@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.1

package/generated/components/plain-button.js

@@ -1,18 +1,16 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 export class PlainButton extends ButtonBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${PlainButton.name} ⚡️ disconnect`);
+        debug(`${PlainButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${PlainButton.name} ⚡️ connect`);
+        debug(`${PlainButton.name} ⚡️ connect`);
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', PlainButton.#handleClick, el).on());
     }

package/generated/components/progress-view.d.ts

@@ -1,7 +1,7 @@
 /**
  * @summary A view that shows how far along a task is.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot current-value
  */
 export declare class ProgressView extends HTMLElement {

package/generated/components/progress-view.js

@@ -1,7 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 import { html } from '../tpl';
@@ -9,7 +9,7 @@ const progressViewStyles = ['circular', 'linear'];
 /**
  * @summary A view that shows how far along a task is.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot current-value
  */
 export class ProgressView extends HTMLElement {
@@ -60,8 +60,7 @@ export class ProgressView extends HTMLElement {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'label': {
                 const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view foreground="secondary"></label-view>`, '>1'));
@@ -79,13 +78,11 @@ export class ProgressView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.inert = true;
         this.#cssStyleObserver = new CSSStyleObserver({
             properties: ['--progress-view-style-index'],
@@ -94,8 +91,7 @@ export class ProgressView extends HTMLElement {
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
     #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const raw = self.getComputedStyle(this).getPropertyValue('--progress-view-style-index').trim();
         const newValue = progressViewStyles[Number(raw)] ?? progressViewStyles[0];
         if (newValue === this.#progressViewStyle)
@@ -104,8 +100,7 @@ export class ProgressView extends HTMLElement {
         this.#render();
     };
     #render() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ #render (${this.#progressViewStyle})`);
+        debug(`${_a.name} ⚡️ #render (${this.#progressViewStyle})`);
         if (this.#lastRenderedStyle === this.#progressViewStyle)
             return; // skip if already applied
         this.#lastRenderedStyle = this.#progressViewStyle;

package/generated/components/screen-view.js

@@ -1,11 +1,10 @@
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 export class ScreenView extends DialogBase {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ScreenView.name} ⚡️ disconnect`);
+        debug(`${ScreenView.name} ⚡️ disconnect`);
     }
 }

package/generated/components/scroll-view-proxy.js

@@ -1,4 +1,4 @@
-import { devFlags } from '../internal/utils';
+import { debug } from '../internal/utils';
 /**
  * @summary A wrapper for {hv}-stacks
  */
@@ -7,11 +7,9 @@ export class ScrollViewProxy extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
+        debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
+        debug(`${ScrollViewProxy.name} ⚡️ connect`);
     }
 }

package/generated/components/scroll-view.d.ts

@@ -1,7 +1,7 @@
 /**
  * @summary A view that scrolls its content when it doesn’t fit the screen.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot top-bar-principal
  * @slot bottom-bar-principal
  */

package/generated/components/scroll-view.js

@@ -2,14 +2,14 @@ var _a;
 import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
+import { $, debug, frame, onoff, slowHideShow } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
  * @summary A view that scrolls its content when it doesn’t fit the screen.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot top-bar-principal
  * @slot bottom-bar-principal
  */
@@ -57,8 +57,7 @@ export class ScrollView extends HTMLElement {
         });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'navigation-inline-title':
                 this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
@@ -80,15 +79,13 @@ export class ScrollView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         observers.unobserve(this);
         frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff([
             // { types: 'tabreveal', listener: this.#handleTabReveal as EventListener },
             { types: 'beforetabswap', listener: this.#handleTabBeforeswap },
@@ -122,8 +119,7 @@ export class ScrollView extends HTMLElement {
         slowHideShow('largeinline' === `${comp}` ? 'show' : 'hide', title);
     };
     #handleScroll = ({ target, type }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isMidScroll)
             this.#isMidScroll = true;
         // if (this.#stopRecordingScrollTop) return
@@ -132,14 +128,12 @@ export class ScrollView extends HTMLElement {
         this.#lastScrollTop = target.scrollTop;
     };
     #handleScrollend = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (this.#isMidScroll)
             this.#isMidScroll = false;
     };
     #handleMeasure = (entry) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (0 === entry.contentRect.width + entry.contentRect.height)
             return;
         if (undefined === this.#beforeTabSwapLastScrolltop)
@@ -156,7 +150,7 @@ export class ScrollView extends HTMLElement {
         this.#beforeTabSwapLastScrolltop = undefined;
     };
     // #handleTabReveal = ({ type, target }: CustomEvent<TabDetail>) => {
-    //   if (devFlags.debug) console.debug(`${ScrollView.name} ⚡️ ${type}`)
+    //   debug(`${ScrollView.name} ⚡️ ${type}`)
     //   if (!(target instanceof HTMLElement)) return
     //   if (!target.contains(this)) return
     //   if (this.closest('[hidden]')) return
@@ -184,8 +178,7 @@ export class ScrollView extends HTMLElement {
     //   // })
     // }
     #handleTabBeforeswap = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (!target.contains(this))

package/generated/components/search-view.js

@@ -1,24 +1,21 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { debug, onoff, touchGlass } from '../internal/utils';
 import { InputBase } from '../namespace-browser/base';
 export class SearchView extends InputBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SearchView.name} ⚡️ disconnect`);
+        debug(`${SearchView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SearchView.name} ⚡️ connect`);
+        debug(`${SearchView.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.type = 'search';
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
         const node = target instanceof HTMLInputElement;
         if (!node)
             return;

package/generated/components/section-view.d.ts

@@ -1,7 +1,7 @@
 /**
  * @summary A container view that groups related content together.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot header
  * @slot footer
  */

package/generated/components/section-view.js

@@ -1,10 +1,10 @@
-import { $, devFlags } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html } from '../tpl';
 /**
  * @summary A container view that groups related content together.
  *
- * @slot — The default slot.
+ * @slot — The default slot
  * @slot header
  * @slot footer
  */
@@ -32,8 +32,7 @@ export class SectionView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'header':
                 queryMorph('[slot=header]', html `<header slot="header">
@@ -52,13 +51,11 @@ export class SectionView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${SectionView.name} ⚡️ disconnect`);
+        debug(`${SectionView.name} ⚡️ disconnect`);
         //
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${SectionView.name} ⚡️ connect`);
+        debug(`${SectionView.name} ⚡️ connect`);
         //
     }
 }

package/generated/components/sheet-view.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A dialog that slides up over the current screen.
@@ -9,13 +9,11 @@ export class SheetView extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ disconnect`);
+        debug(`${SheetView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ connect`);
+        debug(`${SheetView.name} ⚡️ connect`);
         CleanupRegistry.register(el, onoff([
             { types: 'cancel', listener: this.#handleCancel },
             { types: 'keydown', listener: SheetView.#handleKeydown },
@@ -23,12 +21,10 @@ export class SheetView extends DialogBase {
         el.autofocus = true;
     }
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
     }
     static #handleKeydown = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
         if ('Escape' !== evt.key)
             return;
         evt.preventDefault();
@@ -36,8 +32,7 @@ export class SheetView extends DialogBase {
         evt.stopPropagation();
     };
     static #handleCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();

package/generated/components/sidebar-toggle.js

@@ -1,7 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { debounce, devFlags, onoff } from '../internal/utils';
+import { debounce, debug, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 /**
  * @summary A control that shows or hides the sidebar view.
@@ -11,14 +11,12 @@ export class SidebarToggle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         observers.unobserve(this);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
         const entry = {
             target: this,
@@ -33,8 +31,7 @@ export class SidebarToggle extends HTMLElement {
     }
     // This triggers on show/hide of any of sidebar-toggle elements
     static #handleMeasure(entry) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         const { target } = entry ?? {};
         if (!(target instanceof HTMLElement))
             return;
@@ -72,8 +69,7 @@ export class SidebarToggle extends HTMLElement {
         });
     }
     #handleClick({ target, type }) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (!target?.closest('button'))

package/generated/components/sidebar-view.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { debug, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A container view that arranges navigation destinations in a single column.
@@ -27,8 +27,7 @@ export class SidebarView extends DialogBase {
     }
     // Autoclose on click outside.
     static #handleClick = async ({ target, type }) => {
-        if (devFlags.debug)
-            console.debug(`${SidebarView.name} ⚡️ ${type}`);
+        debug(`${SidebarView.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (target instanceof HTMLDialogElement && 'sidebar-view' === target.getAttribute('is'))

package/generated/components/sticky-container.js

@@ -1,17 +1,15 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 export class StickyContainer extends HTMLElement {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
+        debug(`${StickyContainer.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${StickyContainer.name} ⚡️ connect`);
+        debug(`${StickyContainer.name} ⚡️ connect`);
         // CleanupRegistry.register(this, onoff('transitionend transitionstart transitioncancel', this.#handleTransitionrun as unknown as EventListener, this).on())
         CleanupRegistry.register(this, onoff('transitionrun', this.#handleTransitionrun, this).on());
     }

package/generated/components/tab-bar.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { debug, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
  * @summary A container view that groups tab-items together along the top or bottom of the screen.
@@ -9,14 +9,12 @@ export class TabBar extends DialogBase {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${TabBar.name} ⚡️ disconnect`);
+        debug(`${TabBar.name} ⚡️ disconnect`);
         el.removeEventListener('click', TabBar.#handleClick);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${TabBar.name} ⚡️ connect`);
+        debug(`${TabBar.name} ⚡️ connect`);
         el.autofocus = true;
         CleanupRegistry.register(el, onoff('click', TabBar.#handleClick, el).on());
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
@@ -30,8 +28,7 @@ export class TabBar extends DialogBase {
         }), el).on());
     }
     static #handleClick = async ({ target, type }) => {
-        if (devFlags.debug)
-            console.debug(`${TabBar.name} ⚡️ ${type}`);
+        debug(`${TabBar.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (target instanceof HTMLDialogElement && 'tab-bar' === target.getAttribute('is'))

package/generated/components/tab-item.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { TabView } from './tab-view';
 /**
@@ -10,13 +10,11 @@ export class TabItem extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(btn) {
-        if (devFlags.debug)
-            console.debug(`${TabItem.name} ⚡️ disconnect`);
+        debug(`${TabItem.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(btn);
     }
     static polyfillConnectedCallback(btn) {
-        if (devFlags.debug)
-            console.debug(`${TabItem.name} ⚡️ connect`);
+        debug(`${TabItem.name} ⚡️ connect`);
         Object.assign(btn, {
             tabIndex: 0,
             ariaSelected: 'false',
@@ -36,8 +34,7 @@ export class TabItem extends ButtonBase {
         });
     }
     static #handleTabMoreStackAllowance = async (btn, evt) => {
-        if (devFlags.debug)
-            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        debug(`${TabItem.name} ⚡️ ${evt?.type}`);
         const tv = btn.closest('tab-view');
         if (!tv)
             return;
@@ -46,8 +43,7 @@ export class TabItem extends ButtonBase {
         btn.hidden = 'bottom-bar' !== tv.tabBarPlacement;
     };
     static #handleTabRevealOrSwap = async (btn, evt) => {
-        if (devFlags.debug)
-            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        debug(`${TabItem.name} ⚡️ ${evt?.type}`);
         const tv = btn?.closest('tab-view');
         if (!tv)
             return;
@@ -69,8 +65,7 @@ export class TabItem extends ButtonBase {
         }, 100);
     };
     static #handleClick = async ({ type, currentTarget: btn }) => {
-        if (devFlags.debug)
-            console.debug(`${TabItem.name} ⚡️ ${type}`);
+        debug(`${TabItem.name} ⚡️ ${type}`);
         if (!(btn instanceof HTMLElement))
             return;
         // const tag = btn.getAttribute('value')
@@ -116,16 +111,14 @@ export class TabItem extends ButtonBase {
             for (const tab of tabs.reverse())
                 if (tv.selectedTab.includes(tab)) {
                     const eventType = 'tabroot';
-                    if (devFlags.debug)
-                        console.debug(`${TabItem.name} 💡 ${eventType}`);
+                    debug(`${TabItem.name} 💡 ${eventType}`);
                     tab?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
                     return; // skip rest no selection!
                 }
         }
         else if ('->' === dir) {
             const eventType = 'tabroot';
-            if (devFlags.debug)
-                console.debug(`${TabItem.name} 💡 ${eventType}`);
+            debug(`${TabItem.name} 💡 ${eventType}`);
             tabs.at(0)?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
         }
         // SECTION: finally, submit new tabs