@rdlabo/ionic-theme-ios27 1.1.0 → 1.2.0-0

package/dist/native/shared/candidate.js

@@ -1,4 +1,4 @@
-import { frame, isDark, text, visible } from './dom';
+import { frame, isDark, isVerticalBarsSource, text, visible } from './dom';
 import { iconSource } from './icons';
 export const createCandidate = (element, kind, id) => {
     const rect = element.getBoundingClientRect();
@@ -18,7 +18,8 @@ export const createCandidate = (element, kind, id) => {
     };
 };
 export const appendItem = (candidate, child, id, content = child, label = text(child)) => {
-    if (!visible(child) || child.querySelector('input, button, a, img, canvas, video, ion-spinner, ion-avatar'))
+    if (!visible(child, isVerticalBarsSource(candidate.element)) ||
+        child.querySelector('input, button, a, img, canvas, video, ion-spinner, ion-avatar'))
         return;
     const icons = Array.from(content.querySelectorAll('ion-icon'));
     const directSVGs = Array.from(content.querySelectorAll('svg'));
@@ -36,7 +37,10 @@ export const appendItem = (candidate, child, id, content = child, label = text(c
         id: id(child),
         ...frame(child.getBoundingClientRect(), candidate.element.getBoundingClientRect()),
         label,
-        accessibilityLabel: child.getAttribute('aria-label') ?? native?.getAttribute('aria-label') ?? label,
+        accessibilityLabel: child.getAttribute('aria-label') ??
+            native?.getAttribute('aria-label') ??
+            (icons[0]?.getAttribute('aria-hidden') === 'true' ? null : icons[0]?.getAttribute('aria-label')) ??
+            label,
         disabled: !!child.disabled ||
             !!candidate.element.disabled ||
             getComputedStyle(child).pointerEvents === 'none',

package/dist/native/shared/dom.d.ts

@@ -1,10 +1,41 @@
 import type { Frame } from '../definitions';
 export declare const marker = "data-native-ui-shell";
+export declare const childNodesOf: (element: Element) => Node[];
+export declare const childElements: (element: Element) => HTMLElement[];
+export declare const prehiddenClass = "ios-theme-native-ui-shell-prehidden";
+export declare const prehideRootClass = "ios-theme-native-ui-shell-prehide";
+export declare const rejectedClass = "ios-theme-native-ui-shell-rejected";
+export declare const verticalBarsBackWebClass = "ios-theme-vertical-bars-back-web-owned";
+export declare const prehideOnlyMutation: (record: MutationRecord) => boolean;
+export declare const withoutPrehide: <T>(element: HTMLElement, read: () => T) => T;
 export declare const isDark: (style: CSSStyleDeclaration) => boolean;
-export declare const excluded = ".ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled, .ion-page-hidden, .ion-page-invisible, .ion-cloned-element, [hidden], [inert]";
+export declare const excluded = ".ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled, .ion-cloned-element, [hidden], [inert], .ion-page-hidden, .ion-page-invisible";
+export declare const setVerticalBarsEnteringPage: (page: HTMLElement, entering: boolean) => void;
+export declare const verticalBarsEnteringPage: (element: HTMLElement) => HTMLElement | undefined;
+export declare const createVerticalBarsPageState: () => {
+    isDeparted(element: HTMLElement): boolean;
+    lifecycle(event: Event): void;
+    cancel(entering?: HTMLElement, leaving?: HTMLElement): void;
+};
+export declare const isDisabledButtonGroupChild: (element: HTMLElement) => boolean;
+export declare const isVerticalBarsSource: (element: HTMLElement) => boolean;
+export declare const isVerticalBarsBackPosition: (element: HTMLElement) => boolean;
+export declare const preferredVerticalBarsBack: <T extends HTMLElement>(elements: T[], doc: Document) => T | undefined;
+export declare const isPermanentlyExcluded: (element: HTMLElement) => boolean;
+export declare const isExcluded: (element: HTMLElement, enteringPage?: HTMLElement) => boolean;
 export declare const isShellDisabled: (element: Element) => boolean;
+export declare const isVerticalBarsToolbarActionShape: (element: HTMLElement) => boolean;
+export declare const setVerticalBarsPlacement: (element: HTMLElement, rail: boolean) => void;
+export declare const clearVerticalBarsPlacement: (element: HTMLElement) => void;
+export declare const verticalBarsOwned: (element: HTMLElement) => boolean;
+export declare const isVerticalBarsToolbarAction: (element: HTMLElement) => boolean;
+export declare const verticalBarsActionCandidate: (element: HTMLElement) => boolean;
+export declare const verticalBarsBackCandidate: (element: HTMLElement) => boolean;
+export declare const verticalBarsToolbarActions: (element: HTMLElement) => HTMLElement[];
+export declare const isVerticalBarsToolbarGroup: (element: HTMLElement) => boolean;
+export declare const activateProjectedElement: (element: HTMLElement) => void;
 export declare const unprojected: <T>(elements: Iterable<HTMLElement>, read: () => T) => T;
-export declare const visible: (element: HTMLElement) => boolean;
+export declare const visible: (element: HTMLElement, allowOutsideViewport?: boolean) => boolean;
 export declare const frame: (rect: DOMRect, origin?: DOMRect) => Frame;
 export declare const text: (element: Element) => string;
 export declare const inFixedToolbar: (element: Element) => boolean;

package/dist/native/shared/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/native/shared/dom.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,eAAO,MAAM,MAAM,GAAI,OAAO,mBAAmB,KAAG,OAA2E,CAAC;AAChI,eAAO,MAAM,QAAQ,+IACyH,CAAC;AAI/I,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,KAAG,OACyC,CAAC;AAE7F,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,UAAU,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,MAAM,CAAC,KAAG,CAQ/E,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,SAAS,WAAW,KAAG,OAmB9C,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,MAAM,OAAO,EAAE,SAAS,OAAO,KAAG,KAKtD,CAAC;AAEH,eAAO,MAAM,IAAI,GAAI,SAAS,OAAO,KAAG,MAOvC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,SAAS,OAAO,KAAG,OAQjD,CAAC"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/native/shared/dom.ts"],"names":[],"mappings":"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"}

package/dist/native/shared/dom.js

@@ -1,9 +1,162 @@
 import { fadeMarker } from './crossfade';
 export const marker = 'data-native-ui-shell';
-export const isDark = (style) => style.getPropertyValue('--ios27-color-scheme').trim() === 'dark';
-export const excluded = '.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled, .ion-page-hidden, .ion-page-invisible, .ion-cloned-element, [hidden], [inert]';
+const childNodesGet = typeof Node === 'undefined' ? undefined : Object.getOwnPropertyDescriptor(Node.prototype, 'childNodes')?.get;
+export const childNodesOf = (element) => childNodesGet ? Array.from(childNodesGet.call(element)) : Array.from(element.childNodes);
+export const childElements = (element) => childNodesOf(element).filter((node) => node.nodeType === 1);
+export const prehiddenClass = 'ios-theme-native-ui-shell-prehidden';
+export const prehideRootClass = 'ios-theme-native-ui-shell-prehide';
+export const rejectedClass = 'ios-theme-native-ui-shell-rejected';
+export const verticalBarsBackWebClass = 'ios-theme-vertical-bars-back-web-owned';
+const prehideClasses = new Set([prehiddenClass, prehideRootClass]);
+export const prehideOnlyMutation = (record) => {
+    if (record.attributeName !== 'class' || record.oldValue === null)
+        return false;
+    const withoutPrehide = (value) => value
+        .split(/\s+/)
+        .filter((name) => name && !prehideClasses.has(name))
+        .join(' ');
+    return withoutPrehide(record.oldValue) === withoutPrehide(record.target.getAttribute('class') ?? '');
+};
+export const withoutPrehide = (element, read) => {
+    const changed = [];
+    for (let current = element; current; current = current.parentElement) {
+        if (current.classList.contains(prehiddenClass)) {
+            current.classList.remove(prehiddenClass);
+            changed.push(current);
+        }
+    }
+    const root = element.ownerDocument.documentElement;
+    if (element.matches('ion-back-button') && root.classList.contains(prehideRootClass)) {
+        root.classList.remove(prehideRootClass);
+        changed.push(root);
+    }
+    try {
+        return read();
+    }
+    finally {
+        changed.forEach((current) => current.classList.add(current === root ? prehideRootClass : prehiddenClass));
+    }
+};
+export const isDark = (style) => {
+    const themeScheme = style.getPropertyValue('--ios27-color-scheme').trim();
+    if (themeScheme)
+        return themeScheme === 'dark';
+    const background = style.getPropertyValue('--ion-background-color-rgb').match(/\d+/g)?.slice(0, 3).map(Number);
+    return !!background && background.length === 3 && background[0] * 0.2126 + background[1] * 0.7152 + background[2] * 0.0722 < 128;
+};
+const permanentlyExcluded = '.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled, .ion-cloned-element, [hidden], [inert]';
+export const excluded = `${permanentlyExcluded}, .ion-page-hidden, .ion-page-invisible`;
+const enteringPages = new WeakSet();
+export const setVerticalBarsEnteringPage = (page, entering) => {
+    if (entering)
+        enteringPages.add(page);
+    else
+        enteringPages.delete(page);
+};
+export const verticalBarsEnteringPage = (element) => {
+    const page = element.closest('.ion-page-invisible');
+    return page && enteringPages.has(page) && page.closest('ion-app.ios-theme-vertical-bars') ? page : undefined;
+};
+export const createVerticalBarsPageState = () => {
+    const departed = new WeakSet();
+    return {
+        isDeparted(element) {
+            const page = element.closest('.ion-page');
+            return !!page && departed.has(page) && !!element.closest('ion-app.ios-theme-vertical-bars');
+        },
+        lifecycle(event) {
+            const page = event.target && event.target.nodeType === 1 ? event.target : undefined;
+            if (!page?.matches('.ion-page'))
+                return;
+            const entering = event.type === 'ionViewWillEnter';
+            if (entering || event.type === 'ionViewDidEnter')
+                departed.delete(page);
+            else if (event.type === 'ionViewWillLeave' || event.type === 'ionViewDidLeave')
+                departed.add(page);
+            setVerticalBarsEnteringPage(page, entering);
+        },
+        cancel(entering, leaving) {
+            if (entering) {
+                departed.add(entering);
+                setVerticalBarsEnteringPage(entering, false);
+            }
+            if (leaving)
+                departed.delete(leaving);
+        },
+    };
+};
+const disabledButtonGroup = 'ion-buttons:is(.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled)';
 const shellDisabledSelector = '.ios-theme-shell-disabled';
+export const isDisabledButtonGroupChild = (element) => element.matches('ion-button') && element.parentElement?.matches(disabledButtonGroup) === true;
+const verticalBarsTags = new Set(['ion-button', 'ion-back-button', 'ion-buttons', 'ion-menu-button', 'ion-tab-bar']);
+export const isVerticalBarsSource = (element) => verticalBarsTags.has(element.localName) &&
+    (element.matches('ion-tab-bar') || verticalBarsOwned(element)) &&
+    !element.closest('ion-menu, ion-modal, ion-popover') &&
+    !!element.closest('ion-app.ios-theme-vertical-bars');
+export const isVerticalBarsBackPosition = (element) => {
+    if (element.closest('ion-header[collapse], ion-footer[collapse]'))
+        return false;
+    const page = element.closest('.ion-page');
+    if (!page)
+        return true;
+    const candidates = Array.from(page.querySelectorAll('ion-back-button')).filter((back) => back.closest('.ion-page') === page &&
+        !back.matches('.ion-cloned-element') &&
+        !back.closest('ion-header[collapse], ion-footer[collapse], ion-menu, ion-modal, ion-popover'));
+    const rank = (back) => inFixedToolbar(back) ? 0 : back.closest('ion-header ion-toolbar, ion-footer ion-toolbar') ? 1 : back.closest('ion-toolbar') ? 3 : 2;
+    const best = candidates.reduce((winner, back) => (!winner || rank(back) < rank(winner) ? back : winner), undefined);
+    return best === element;
+};
+export const preferredVerticalBarsBack = (elements, doc) => {
+    const pages = Array.from(doc.querySelectorAll('.ion-page'));
+    const pageOrder = (element) => pages.indexOf(element.closest('.ion-page'));
+    return elements.sort((a, b) => pageOrder(b) - pageOrder(a) || Number(!!b.closest('ion-header')) - Number(!!a.closest('ion-header')))[0];
+};
+const excludedBy = (element, selector) => {
+    const owner = element.closest(selector);
+    return !!owner && !(element.parentElement === owner && isDisabledButtonGroupChild(element));
+};
+export const isPermanentlyExcluded = (element) => excludedBy(element, permanentlyExcluded);
+export const isExcluded = (element, enteringPage) => excludedBy(element, `${permanentlyExcluded}, .ion-page-hidden`) || (!!element.closest('.ion-page-invisible') && !enteringPage);
 export const isShellDisabled = (element) => !!element.closest(shellDisabledSelector) || !!element.querySelector(shellDisabledSelector);
+export const isVerticalBarsToolbarActionShape = (element) => element.matches('ion-menu-button') ||
+    (element.matches('ion-button') &&
+        !!element.querySelector('ion-icon, svg') &&
+        !childNodesOf(element).some((node) => node.nodeType === 3 && !!node.textContent?.trim()) &&
+        !element.matches('.ion-color, [color]') &&
+        ['default', 'clear'].includes(element.fill ?? element.getAttribute('fill') ?? 'default'));
+const verticalBarsPlacement = new WeakMap();
+export const setVerticalBarsPlacement = (element, rail) => {
+    verticalBarsPlacement.set(element, rail);
+};
+export const clearVerticalBarsPlacement = (element) => {
+    verticalBarsPlacement.delete(element);
+};
+export const verticalBarsOwned = (element) => verticalBarsPlacement.get(element) === true;
+export const isVerticalBarsToolbarAction = (element) => verticalBarsOwned(element) && !isExcluded(element, verticalBarsEnteringPage(element)) && !isShellDisabled(element);
+const overlays = 'ion-menu, ion-modal, ion-popover';
+export const verticalBarsActionCandidate = (element) => inFixedToolbar(element) &&
+    !element.closest('ion-buttons.ios-theme-horizontal-only, ion-button.ios-theme-horizontal-only') &&
+    !isPermanentlyExcluded(element) &&
+    !isShellDisabled(element) &&
+    !element.closest(overlays);
+export const verticalBarsBackCandidate = (element) => isVerticalBarsBackPosition(element) &&
+    !element.closest('ion-buttons.ios-theme-horizontal-only') &&
+    !isPermanentlyExcluded(element) &&
+    !isShellDisabled(element) &&
+    !element.closest(overlays);
+export const verticalBarsToolbarActions = (element) => childElements(element).filter((child) => !child.matches('ion-back-button') && isVerticalBarsToolbarAction(child));
+export const isVerticalBarsToolbarGroup = (element) => {
+    return (element.matches('ion-buttons') &&
+        verticalBarsOwned(element) &&
+        !element.matches('.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled') &&
+        !isShellDisabled(element));
+};
+export const activateProjectedElement = (element) => {
+    const target = element.matches('ion-button, ion-back-button, ion-menu-button')
+        ? element.shadowRoot?.querySelector('[part~="native"]')
+        : undefined;
+    (target ?? element).click();
+};
 export const unprojected = (elements, read) => {
     const hidden = Array.from(elements).filter((element) => element.hasAttribute(marker));
     hidden.forEach((element) => element.removeAttribute(marker));
@@ -14,22 +167,29 @@ export const unprojected = (elements, read) => {
         hidden.forEach((element) => element.setAttribute(marker, ''));
     }
 };
-export const visible = (element) => {
-    if (!element.isConnected || element.closest(excluded) || isShellDisabled(element))
+const readVisible = (element, allowOutsideViewport) => {
+    const enteringPage = isVerticalBarsSource(element) ? verticalBarsEnteringPage(element) : undefined;
+    if (!element.isConnected || isExcluded(element, enteringPage) || isShellDisabled(element))
         return false;
     for (let current = element; current; current = current.parentElement) {
         const style = getComputedStyle(current);
-        if (style.display === 'none' || style.visibility !== 'visible' || (Number(style.opacity) === 0 && !current.hasAttribute(fadeMarker)))
+        if (style.display === 'none' ||
+            style.visibility !== 'visible' ||
+            (Number(style.opacity) === 0 && !current.hasAttribute(fadeMarker) && current !== enteringPage))
             return false;
-        if (style.transform !== 'none' &&
+        if (!allowOutsideViewport &&
+            style.transform !== 'none' &&
             !new DOMMatrixReadOnly(style.transform).isIdentity &&
             current !== element &&
             !current.matches('ion-tab-bar'))
             return false;
     }
     const rect = element.getBoundingClientRect();
-    return (rect.width > 0 && rect.height > 0 && rect.left >= -1 && rect.top >= -1 && rect.right <= innerWidth + 1 && rect.bottom <= innerHeight + 1);
+    return (rect.width > 0 &&
+        rect.height > 0 &&
+        (allowOutsideViewport || (rect.left >= -1 && rect.top >= -1 && rect.right <= innerWidth + 1 && rect.bottom <= innerHeight + 1)));
 };
+export const visible = (element, allowOutsideViewport = false) => withoutPrehide(element, () => readVisible(element, allowOutsideViewport));
 export const frame = (rect, origin) => ({
     x: rect.x - (origin?.x ?? 0),
     y: rect.y - (origin?.y ?? 0),
@@ -39,16 +199,17 @@ export const frame = (rect, origin) => ({
 export const text = (element) => {
     if (element.matches('ion-icon, svg, ion-badge, .ios27-segment-lens, .ion-cloned-element'))
         return '';
-    return Array.from(element.childNodes)
-        .map((node) => (node.nodeType === Node.TEXT_NODE ? node.textContent : node instanceof Element ? text(node) : ''))
+    return childNodesOf(element)
+        .map((node) => (node.nodeType === 3 ? node.textContent : node.nodeType === 1 ? text(node) : ''))
         .join('')
         .replace(/\s+/g, ' ')
         .trim();
 };
 export const inFixedToolbar = (element) => {
     const edge = element.closest('ion-toolbar')?.parentElement;
+    const verticalBars = !!element.closest('ion-app.ios-theme-vertical-bars');
     return (!!edge?.matches('ion-header, ion-footer') &&
         !element.closest('ion-content') &&
         !edge.hasAttribute('collapse') &&
-        !edge.matches('.header-collapse-main, .header-collapse-condense'));
+        (verticalBars || !edge.matches('.header-collapse-main, .header-collapse-condense')));
 };

package/dist/native/vertical-bars-web.d.ts

@@ -0,0 +1,3 @@
+import type { NativeUIShellHandle, NativeUIShellOptions } from './definitions';
+export declare const createVerticalBarsWebProjection: (doc: Document, options: NativeUIShellOptions, enabled?: () => boolean) => NativeUIShellHandle;
+//# sourceMappingURL=vertical-bars-web.d.ts.map

package/dist/native/vertical-bars-web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-bars-web.d.ts","sourceRoot":"","sources":["../../src/native/vertical-bars-web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAuB,MAAM,eAAe,CAAC;AAqCpG,eAAO,MAAM,+BAA+B,GAC1C,KAAK,QAAQ,EACb,SAAS,oBAAoB,EAC7B,UAAS,MAAM,OAAoB,KAClC,mBA4UF,CAAC"}

package/dist/native/vertical-bars-web.js

@@ -0,0 +1,341 @@
+import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
+import { activateProjectedElement, createVerticalBarsPageState, verticalBarsActionCandidate, verticalBarsBackCandidate, verticalBarsEnteringPage, verticalBarsToolbarActions, isExcluded, isVerticalBarsToolbarGroup, preferredVerticalBarsBack, verticalBarsOwned, marker, prehideOnlyMutation, prehiddenClass, unprojected, withoutPrehide, } from './shared/dom';
+const backProjectionClass = 'ios-theme-vertical-bars-back-button-projection';
+const toolbarProjectionClass = 'ios-theme-vertical-bars-toolbar-projection';
+const readyClass = 'ios-theme-vertical-bars-toolbar-ready';
+const toolbarControlSize = 46;
+const toolbarControlGap = 10;
+export const createVerticalBarsWebProjection = (doc, options, enabled = () => true) => {
+    const win = doc.defaultView;
+    if (options.controls !== undefined && options.controls.toolbar !== true)
+        return {
+            getStatus: () => ({ state: 'web', projected: 0, updates: 0 }),
+            suspend: async () => ({ resume: async () => { } }),
+            destroy: async () => { },
+        };
+    let root;
+    let backSource;
+    let backProjection;
+    let previousBackAriaHidden = null;
+    let toolbarProjections = [];
+    let suspended = 0;
+    let stopped = false;
+    let frame = 0;
+    let updates = 0;
+    let observingVerticalBars = false;
+    const verticalBarsPages = createVerticalBarsPageState();
+    let sourceObserver;
+    let waiters = [];
+    const listeners = new AbortController();
+    const verticalBarsRoot = () => doc.querySelector('ion-app.ios-theme-vertical-bars');
+    const projectedSources = () => [backSource, ...toolbarProjections.flatMap(({ actions }) => actions.map(({ source }) => source))].filter((source) => !!source);
+    const isRendered = (element) => withoutPrehide(element, () => {
+        const style = getComputedStyle(element);
+        const rect = element.getBoundingClientRect();
+        return element.isConnected && style.display !== 'none' && style.visibility === 'visible' && rect.width > 0 && rect.height > 0;
+    });
+    const inEligibleToolbar = (element) => !!verticalBarsRoot()?.contains(element) &&
+        verticalBarsActionCandidate(element) &&
+        !isExcluded(element, verticalBarsEnteringPage(element)) &&
+        !verticalBarsPages.isDeparted(element);
+    const isEligibleBack = (element) => !!verticalBarsRoot()?.contains(element) &&
+        verticalBarsOwned(element) &&
+        verticalBarsBackCandidate(element) &&
+        !isExcluded(element, verticalBarsEnteringPage(element)) &&
+        !verticalBarsPages.isDeparted(element) &&
+        unprojected(projectedSources(), () => isRendered(element));
+    const pageOrder = (element) => Array.from(doc.querySelectorAll('.ion-page')).indexOf(element.closest('.ion-page'));
+    const findBack = () => {
+        const candidates = Array.from(doc.querySelectorAll(`ion-back-button:not(.${backProjectionClass})`)).filter(isEligibleBack);
+        return preferredVerticalBarsBack(candidates, doc);
+    };
+    const findToolbarGroups = () => {
+        const candidates = Array.from(doc.querySelectorAll(`ion-buttons:not(.${toolbarProjectionClass})`)).flatMap((group) => {
+            const actions = verticalBarsToolbarActions(group).filter((action) => unprojected(projectedSources(), () => isRendered(action)));
+            if (!actions.length)
+                return [];
+            if (!isVerticalBarsToolbarGroup(group))
+                return actions.filter(inEligibleToolbar).map((action) => ({ group, actions: [action] }));
+            return inEligibleToolbar(group) && unprojected(projectedSources(), () => isRendered(group)) ? [{ group, actions }] : [];
+        });
+        const highestPage = Math.max(...candidates.map(({ group }) => pageOrder(group)));
+        return candidates.filter(({ group }) => pageOrder(group) === highestPage);
+    };
+    const isCurrentToolbarAction = (source) => findToolbarGroups().some(({ actions }) => actions.includes(source));
+    const restore = () => {
+        backProjection?.remove();
+        backProjection = undefined;
+        if (backSource) {
+            backSource.removeAttribute(marker);
+            if (previousBackAriaHidden === null)
+                backSource.removeAttribute('aria-hidden');
+            else
+                backSource.setAttribute('aria-hidden', previousBackAriaHidden);
+            backSource.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+        }
+        backSource = undefined;
+        previousBackAriaHidden = null;
+        for (const { projection, actions } of toolbarProjections) {
+            projection.remove();
+            for (const { source, previousAriaHidden } of actions) {
+                source.removeAttribute(marker);
+                if (previousAriaHidden === null)
+                    source.removeAttribute('aria-hidden');
+                else
+                    source.setAttribute('aria-hidden', previousAriaHidden);
+                source.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+            }
+        }
+        toolbarProjections = [];
+        sourceObserver?.disconnect();
+        sourceObserver = undefined;
+        root?.classList.remove(readyClass);
+        root = undefined;
+    };
+    const copyAttributes = (target, original) => {
+        for (const name of ['id', 'slot', marker, 'aria-hidden'])
+            target.removeAttribute(name);
+        for (const attribute of Array.from(target.attributes))
+            if (!['class', marker].includes(attribute.name) && !original.hasAttribute(attribute.name))
+                target.removeAttribute(attribute.name);
+        for (const attribute of Array.from(original.attributes))
+            if (!['id', 'slot', marker, 'aria-hidden'].includes(attribute.name))
+                target.setAttribute(attribute.name, attribute.value);
+        target.classList.remove(prehiddenClass);
+    };
+    const syncBack = (target, original) => {
+        copyAttributes(target, original);
+        target.classList.add(backProjectionClass, 'ion-cloned-element');
+        target.disabled = original.disabled;
+        target.defaultHref = original.defaultHref;
+        target.icon = original.icon;
+        target.color = original.color;
+        target.mode = original.mode;
+        target.text = '';
+    };
+    const syncAction = (target, original) => {
+        copyAttributes(target, original);
+        target.classList.add('ios-theme-vertical-bars-toolbar-action', 'ion-cloned-element');
+        const label = original.getAttribute('aria-label') ?? original.textContent?.trim();
+        if (label)
+            target.setAttribute('aria-label', label);
+        if ('disabled' in original)
+            target.disabled = original.disabled;
+        if (original.matches('ion-button')) {
+            const icon = original.querySelector('ion-icon, svg');
+            const clonedIcon = icon?.cloneNode(true);
+            clonedIcon?.setAttribute('slot', 'icon-only');
+            target.replaceChildren(...(clonedIcon ? [clonedIcon] : []));
+        }
+    };
+    const sameSources = (back, groups) => back === backSource &&
+        groups.length === toolbarProjections.length &&
+        groups.every(({ group, actions }, index) => {
+            const current = toolbarProjections[index];
+            return (group === current.source &&
+                actions.length === current.actions.length &&
+                actions.every((action, actionIndex) => action === current.actions[actionIndex].source));
+        });
+    const syncExisting = () => {
+        if (backSource && backProjection)
+            syncBack(backProjection, backSource);
+        let topOffset = backSource ? toolbarControlSize + toolbarControlGap : 0;
+        for (const { projection, source, actions } of toolbarProjections) {
+            if (actions.length === 1 && !projection.matches('ion-buttons'))
+                syncAction(projection, actions[0].source);
+            else
+                copyAttributes(projection, source);
+            projection.classList.add(toolbarProjectionClass, 'ion-cloned-element');
+            projection.style.setProperty('--ios-theme-vertical-bars-toolbar-offset', `${topOffset}px`);
+            if (projection.matches('ion-buttons'))
+                actions.forEach(({ source: action, projection: clone }) => syncAction(clone, action));
+            topOffset += actions.length * toolbarControlSize + toolbarControlGap;
+        }
+    };
+    const project = (nextBack, groups) => {
+        root = verticalBarsRoot();
+        let topOffset = 0;
+        if (nextBack) {
+            backSource = nextBack;
+            previousBackAriaHidden = nextBack.getAttribute('aria-hidden');
+            backProjection = nextBack.cloneNode(false);
+            syncBack(backProjection, nextBack);
+            backProjection.addEventListener('click', (event) => {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                if (backSource && backSource === findBack())
+                    activateProjectedElement(backSource);
+            }, { capture: true });
+            root.append(backProjection);
+            nextBack.setAttribute(marker, '');
+            nextBack.setAttribute('aria-hidden', 'true');
+            nextBack.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+            topOffset = toolbarControlSize + toolbarControlGap;
+        }
+        for (const { group, actions: sources } of groups) {
+            const projection = (sources.length === 1 ? sources[0] : group).cloneNode(false);
+            if (sources.length === 1)
+                syncAction(projection, sources[0]);
+            else
+                copyAttributes(projection, group);
+            projection.classList.add(toolbarProjectionClass, 'ion-cloned-element');
+            projection.style.setProperty('--ios-theme-vertical-bars-toolbar-offset', `${topOffset}px`);
+            const actions = sources.map((source) => {
+                const clone = sources.length === 1 ? projection : source.cloneNode(false);
+                if (sources.length > 1)
+                    syncAction(clone, source);
+                clone.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    if (isCurrentToolbarAction(source))
+                        activateProjectedElement(source);
+                }, { capture: true });
+                if (sources.length > 1)
+                    projection.append(clone);
+                const previousAriaHidden = source.getAttribute('aria-hidden');
+                source.setAttribute(marker, '');
+                source.setAttribute('aria-hidden', 'true');
+                source.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+                return { source, projection: clone, previousAriaHidden };
+            });
+            root.append(projection);
+            toolbarProjections.push({ source: group, projection, actions });
+            topOffset += actions.length * toolbarControlSize + toolbarControlGap;
+        }
+        if (nextBack || toolbarProjections.length)
+            root.classList.add(readyClass);
+        sourceObserver = new MutationObserver((records) => {
+            if (records.some((record) => record.type !== 'attributes' || (![marker, 'aria-hidden'].includes(record.attributeName ?? '') && !prehideOnlyMutation(record))))
+                schedule();
+        });
+        if (nextBack?.shadowRoot)
+            sourceObserver.observe(nextBack.shadowRoot, { subtree: true, childList: true, attributes: true, attributeOldValue: true });
+        for (const { group } of groups)
+            sourceObserver.observe(group, { subtree: true, childList: true, attributes: true, attributeOldValue: true });
+    };
+    const performUpdate = () => {
+        frame = 0;
+        const currentRoot = verticalBarsRoot();
+        if (observingVerticalBars !== !!currentRoot) {
+            observingVerticalBars = !!currentRoot;
+            observer.disconnect();
+            observer.observe(doc.documentElement, {
+                subtree: true,
+                childList: true,
+                attributes: true,
+                attributeOldValue: true,
+                attributeFilter: observingVerticalBars ? undefined : ['class'],
+            });
+        }
+        if (stopped || suspended || !currentRoot || !enabled())
+            return restore();
+        const nextBack = findBack();
+        const groups = findToolbarGroups();
+        if (!nextBack && !groups.length)
+            return restore();
+        if (sameSources(nextBack, groups))
+            return syncExisting();
+        restore();
+        project(nextBack, groups);
+        updates++;
+    };
+    const update = () => {
+        try {
+            performUpdate();
+        }
+        catch {
+            restore();
+        }
+        finally {
+            const pending = waiters;
+            waiters = [];
+            pending.forEach((resolve) => resolve());
+        }
+    };
+    const schedule = () => {
+        if (stopped)
+            return Promise.resolve();
+        const done = new Promise((resolve) => waiters.push(resolve));
+        if (!frame)
+            frame = win.requestAnimationFrame(update);
+        return done;
+    };
+    const observer = new MutationObserver((records) => {
+        const insideProjection = (target) => {
+            const element = target instanceof Element ? target : target.parentNode instanceof Element ? target.parentNode : undefined;
+            const rootNode = target.getRootNode();
+            const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : undefined;
+            return !![element, shadowHost].some((candidate) => candidate?.closest(`.${backProjectionClass}, .${toolbarProjectionClass}`));
+        };
+        const verticalBarsChanged = records.some((record) => (record.type === 'attributes' && record.target.matches('ion-app')) ||
+            (record.type === 'childList' &&
+                Array.from(record.addedNodes).some((node) => node instanceof Element &&
+                    (node.matches('ion-app.ios-theme-vertical-bars') || !!node.querySelector('ion-app.ios-theme-vertical-bars')))));
+        if ((observingVerticalBars &&
+            records.some((record) => record.attributeName !== marker && !prehideOnlyMutation(record) && !insideProjection(record.target))) ||
+            (!observingVerticalBars && verticalBarsChanged && records.some((record) => !prehideOnlyMutation(record))))
+            schedule();
+    });
+    observer.observe(doc.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ['class'],
+    });
+    const pageLifecycle = (event) => {
+        const page = event.target;
+        if (!(page instanceof HTMLElement) || !page.matches('.ion-page'))
+            return;
+        if (event.type === VERTICAL_BARS_TRANSITION_CANCELED) {
+            const entering = event.detail?.entering;
+            verticalBarsPages.cancel(entering, page);
+        }
+        else
+            verticalBarsPages.lifecycle(event);
+        if (verticalBarsRoot())
+            schedule();
+    };
+    for (const name of ['ionViewWillEnter', 'ionViewWillLeave', 'ionViewDidEnter', 'ionViewDidLeave'])
+        doc.addEventListener(name, pageLifecycle, { capture: true, signal: listeners.signal });
+    doc.addEventListener(VERTICAL_BARS_TRANSITION_CANCELED, pageLifecycle, { capture: true, signal: listeners.signal });
+    for (const name of ['ionModalWillPresent', 'ionModalDidDismiss'])
+        doc.addEventListener(name, schedule, { capture: true, signal: listeners.signal });
+    win.addEventListener('nativeUIShellRefresh', schedule, { signal: listeners.signal });
+    schedule();
+    return {
+        getStatus: () => ({
+            state: stopped ? 'stopped' : 'web',
+            projected: Number(!!backSource) + toolbarProjections.reduce((count, group) => count + group.actions.length, 0),
+            updates,
+        }),
+        async suspend() {
+            suspended++;
+            restore();
+            let resumed = false;
+            return {
+                async resume() {
+                    if (resumed)
+                        return;
+                    resumed = true;
+                    suspended = Math.max(0, suspended - 1);
+                    if (!suspended)
+                        await schedule();
+                },
+            };
+        },
+        async destroy() {
+            if (stopped)
+                return;
+            stopped = true;
+            win.cancelAnimationFrame(frame);
+            frame = 0;
+            waiters.forEach((resolve) => resolve());
+            waiters = [];
+            observer.disconnect();
+            sourceObserver?.disconnect();
+            listeners.abort();
+            restore();
+        },
+    };
+};