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

package/src/native-integration/index.ts

@@ -2,7 +2,7 @@
 import type { Animation } from '@ionic/core';
 
 export interface NativeUIShellIntegration {
-  suspend(scopes: HTMLElement[]): Promise<() => void>;
+  suspend(scopes: HTMLElement[]): Promise<(canceled?: boolean) => void>;
   search?(binding: NativeSearchBinding, active: boolean, focus?: boolean): Promise<boolean>;
 }
 
@@ -32,6 +32,7 @@ export const requestNativeSearch = async (binding: NativeSearchBinding, active:
   (await runtimes.get(binding.tabBar.ownerDocument)?.search?.(binding, active, focus)) ?? false;
 
 const runtimes = new WeakMap<Document, NativeUIShellIntegration>();
+export const VERTICAL_BARS_TRANSITION_CANCELED = 'iosThemeVerticalBarsTransitionCanceled';
 
 export const setNativeUIShellIntegration = (doc: Document, runtime?: NativeUIShellIntegration) => {
   if (runtime) runtimes.set(doc, runtime);
@@ -40,11 +41,15 @@ export const setNativeUIShellIntegration = (doc: Document, runtime?: NativeUIShe
 
 export const isNativeUIShell = (element: HTMLElement) => element.hasAttribute('data-native-ui-shell');
 
-export const suspendNativeUIShell = async (scopes: HTMLElement[]): Promise<() => void> =>
+export const suspendNativeUIShell = async (scopes: HTMLElement[]): Promise<(canceled?: boolean) => void> =>
   (await runtimes.get(scopes[0]?.ownerDocument)?.suspend(scopes)) ?? (() => {});
 
 /** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */
 export const connectNativeUIShellTransition = (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => {
+  if (leaving)
+    animation.onFinish((step) => {
+      if (step === 0) leaving.dispatchEvent(new CustomEvent(VERTICAL_BARS_TRANSITION_CANCELED, { bubbles: true, detail: { entering } }));
+    });
   if (!runtimes.has(entering.ownerDocument)) return;
   const scopes = leaving ? [entering, leaving] : [entering];
   const play = animation.play.bind(animation);
@@ -52,7 +57,7 @@ export const connectNativeUIShellTransition = (animation: Animation, entering: H
   const progressStep = animation.progressStep.bind(animation);
   const progressEnd = animation.progressEnd.bind(animation);
   const destroy = animation.destroy.bind(animation);
-  let release: (() => void) | undefined;
+  let release: ((canceled?: boolean) => void) | undefined;
   let preparation: Promise<void> | undefined;
   let disposed = false;
   let interactiveReady = false;
@@ -60,15 +65,15 @@ export const connectNativeUIShellTransition = (animation: Animation, entering: H
   let end: Parameters<Animation['progressEnd']> | undefined;
   const prepare = () =>
     (preparation ??= suspendNativeUIShell(scopes).then((resume) => {
-      if (disposed) resume();
+      if (disposed) resume(true);
       else release = resume;
     }));
-  const finish = () => {
-    release?.();
+  const finish = (canceled = false) => {
+    release?.(canceled);
     release = undefined;
     preparation = undefined;
   };
-  animation.onFinish(finish);
+  animation.onFinish((step) => finish(step === 0));
   animation.play = async (options) => {
     await prepare();
     if (disposed) return;
@@ -103,7 +108,7 @@ export const connectNativeUIShellTransition = (animation: Animation, entering: H
   };
   animation.destroy = (...args) => {
     disposed = true;
-    finish();
+    finish(true);
     return destroy(...args);
   };
 };

package/src/styles/components/ion-list.scss

@@ -34,11 +34,11 @@ ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
       --inner-padding-end: 0;
 
       &::part(native) {
-        padding-right: calc(var(--ion-safe-area-right, 0px) + 18px);
+        padding-inline-end: calc(var(--ion-safe-area-right, 0px) + 18px);
       }
 
       &:dir(rtl)::part(native) {
-        padding-left: calc(var(--ion-safe-area-left, 0px) + 18px);
+        padding-inline-end: calc(var(--ion-safe-area-left, 0px) + 18px);
       }
 
       --min-height: 52px;

package/src/styles/components/ion-menu.scss

@@ -4,7 +4,7 @@ ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled) {
 
 ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:has(ion-menu.menu-pane-visible) {
   .split-pane-main {
-    ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled):not(:where(.ios-theme-vertical-bars *)) {
       width: calc(
         100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - 60px -
           12px - var(--ios-theme-menu-width, var(--ios26-menu-width))
@@ -43,7 +43,7 @@ ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:
       ion-footer ion-toolbar {
         --padding-start: var(--ios-theme-menu-width, var(--ios26-menu-width));
       }
-      ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+      ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled):not(:where(.ios-theme-vertical-bars *)) {
         &[slot='bottom'] {
           inset-inline-start: calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)));
           &:dir(rtl) {

package/src/styles/ionic-theme-ios27.scss

@@ -21,3 +21,4 @@
 @use 'components/ion-toast';
 @use 'components/ion-toggle';
 @use 'components/ion-toolbar';
+@use 'vertical-bars';

package/src/styles/vertical-bars.scss

@@ -0,0 +1,342 @@
+@use 'utils/api';
+@use 'utils/glass';
+
+// iPhone Duo simulation: the system reserves 80pt at the physical right edge.
+// This entry point does not load the iOS 27 theme or change ordinary Ionic UI.
+// A split menu is independent of the vertical control area. Its width is
+// selected by the application from the device posture, not the viewport width.
+@property --ios-theme-split-pane-width {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 320px;
+}
+
+ion-split-pane.ios-theme-split-pane-half-open {
+  --ios-theme-split-pane-width: 50vw;
+}
+
+ion-app.ios-theme-vertical-bars {
+  --ios-theme-vertical-bars-safe-area-left-resolved: var(--ios-theme-vertical-bars-safe-area-left, 0px);
+  --ios-theme-vertical-bars-safe-area-right-resolved: var(
+    --ios-theme-vertical-bars-safe-area-right,
+    var(--ios-theme-vertical-bars-native-inset, max(80px, env(safe-area-inset-right, 0px)))
+  );
+}
+
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left {
+  --ios-theme-vertical-bars-safe-area-left-resolved: var(
+    --ios-theme-vertical-bars-safe-area-left,
+    var(--ios-theme-vertical-bars-native-inset, max(80px, env(safe-area-inset-left, 0px)))
+  );
+  --ios-theme-vertical-bars-safe-area-right-resolved: var(--ios-theme-vertical-bars-safe-area-right, 0px);
+}
+
+// Supply material defaults only to Web projections, never to ordinary controls.
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready
+  > :is(ion-menu-button, ion-button).ios-theme-vertical-bars-toolbar-projection {
+  --ios26-glass-background-rgb: var(--ion-background-color-rgb, 255, 255, 255);
+  --ios26-glass-border-color-rgb: var(--ion-background-color-rgb, 255, 255, 255);
+  --ios26-glass-box-shadow-color-rgb: var(--ion-text-color-rgb, 0, 0, 0);
+}
+
+// The transition shade belongs to the Web page, never to the control area.
+ion-app.ios-theme-vertical-bars .ios-transition-shade {
+  clip-path: inset(0 var(--ios-theme-vertical-bars-safe-area-right-resolved) 0 var(--ios-theme-vertical-bars-safe-area-left-resolved));
+}
+
+// Keep page backgrounds and the router full width; move only their foregrounds.
+ion-app.ios-theme-vertical-bars
+  ion-content:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *)) {
+  --ion-safe-area-left: 0px;
+  --ion-safe-area-right: 0px;
+
+  &::part(scroll) {
+    padding-inline-start: calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved));
+    padding-inline-end: calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved));
+  }
+
+  &:dir(rtl)::part(scroll) {
+    padding-inline-start: calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved));
+    padding-inline-end: calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved));
+  }
+}
+
+ion-app.ios-theme-vertical-bars
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *)) {
+  --ion-safe-area-left: 0px;
+  --ion-safe-area-right: 0px;
+
+  // Collapse headers already sit inside the padded ion-content scroll area.
+  &:not(:where(ion-header.header-collapse-condense *, ion-footer.footer-collapse-fade *)) {
+    &::part(container) {
+      padding-inline-start: calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved));
+      padding-inline-end: calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved));
+    }
+
+    &:dir(rtl)::part(container) {
+      padding-inline-start: calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved));
+      padding-inline-end: calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved));
+    }
+  }
+}
+
+ion-app.ios-theme-vertical-bars
+  ion-fab:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *)) {
+  --ion-safe-area-left: 0px;
+  --ion-safe-area-right: 0px;
+  --ios-theme-vertical-bars-fab-edge-gap: 16px;
+  --ios-theme-vertical-bars-fab-start-offset: var(--ios-theme-menu-width, var(--ios26-menu-width, 0px));
+
+  &.fab-horizontal-start {
+    inset-inline-start: calc(
+      var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-fab-start-offset) +
+        var(--ios-theme-vertical-bars-safe-area-left-resolved)
+    );
+  }
+  &.fab-horizontal-end {
+    inset-inline-end: calc(var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-safe-area-right-resolved));
+  }
+  &:dir(rtl).fab-horizontal-start {
+    inset-inline-start: calc(
+      var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-fab-start-offset) +
+        var(--ios-theme-vertical-bars-safe-area-right-resolved)
+    );
+  }
+  &:dir(rtl).fab-horizontal-end {
+    inset-inline-end: calc(var(--ios-theme-vertical-bars-fab-edge-gap) + var(--ios-theme-vertical-bars-safe-area-left-resolved));
+  }
+  &:has(.fab-button-small) {
+    --ios-theme-vertical-bars-fab-edge-gap: 10px;
+  }
+}
+
+// Menus retain their own safe-area handling and full-width animation host.
+ion-app.ios-theme-vertical-bars {
+  ion-menu:is(.ios, .md).menu-side-end:not(:dir(rtl)):not(.ios-theme-disabled, .ios26-disabled),
+  ion-menu:is(.ios, .md).menu-side-start:dir(rtl):not(.ios-theme-disabled, .ios26-disabled) {
+    --ion-safe-area-right: 0px;
+    &::part(container) {
+      margin-right: var(--ios-theme-vertical-bars-safe-area-right-resolved);
+    }
+  }
+  ion-menu:is(.ios, .md).menu-side-start:not(:dir(rtl)):not(.ios-theme-disabled, .ios26-disabled),
+  ion-menu:is(.ios, .md).menu-side-end:dir(rtl):not(.ios-theme-disabled, .ios26-disabled) {
+    --ion-safe-area-left: 0px;
+    &::part(container) {
+      margin-left: var(--ios-theme-vertical-bars-safe-area-left-resolved);
+    }
+  }
+}
+
+ion-app.ios-theme-vertical-bars
+  ion-tabs:not(:where(ion-menu *, ion-modal *, ion-popover *))
+  > ion-tab-bar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled) {
+  --ios-theme-side-tab-bar-width: 50px;
+  --ios-theme-side-tab-bar-gap: 8px;
+  --ios-theme-side-safe-area: var(--ios-theme-vertical-bars-safe-area-right-resolved);
+  contain: layout style;
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  width: 46px;
+  min-width: 46px;
+  max-width: 46px;
+  height: fit-content;
+  min-height: 0;
+  padding: 2px;
+  border-radius: 25px;
+  left: auto;
+  right: max(4px, calc((var(--ios-theme-side-safe-area) - var(--ios-theme-side-tab-bar-width)) / 2));
+  margin: 0;
+  top: auto;
+  bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--ios-theme-side-tab-bar-gap));
+
+  > ion-tab-button:not(.ion-cloned-element) {
+    display: block;
+    flex: none;
+    width: 46px;
+    min-width: 46px;
+    height: 52px;
+    min-height: 52px;
+    border-radius: 23px;
+    &::part(native) {
+      justify-content: center;
+    }
+    ion-label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+    ion-icon {
+      margin: 0;
+      font-size: 28px;
+    }
+  }
+  > ion-tab-button:not(.ion-cloned-element) ~ ion-tab-button:not(.ion-cloned-element) {
+    margin-block-start: 0;
+    margin-inline-start: 0;
+  }
+  &:has(> ion-tab-button:is(.ion-activated, :active)) > ion-tab-button:not(.ion-cloned-element) {
+    &::part(native) {
+      flex-direction: column;
+      padding-block: 4px;
+    }
+    ion-label {
+      position: static;
+      width: auto;
+      height: auto;
+      max-width: 44px;
+      padding: 0;
+      margin: 1px 0 0;
+      overflow: hidden;
+      clip: auto;
+      font-size: 0.5rem;
+      line-height: 1;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    ion-icon {
+      margin: 0;
+      font-size: 22px;
+    }
+  }
+}
+
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left
+  ion-tabs:not(:where(ion-menu *, ion-modal *, ion-popover *))
+  > ion-tab-bar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled) {
+  --ios-theme-side-safe-area: var(--ios-theme-vertical-bars-safe-area-left-resolved);
+  right: auto;
+  left: max(4px, calc((var(--ios-theme-side-safe-area) - var(--ios-theme-side-tab-bar-width)) / 2));
+}
+
+.ios-theme-native-ui-shell-prehidden {
+  position: absolute !important;
+  visibility: hidden !important;
+}
+
+// Hide an entering back source until JS decides whether it belongs in the rail.
+html.ios-theme-native-ui-shell-prehide
+  ion-app.ios-theme-vertical-bars
+  ion-back-button:not(
+    [icon],
+    [color],
+    .ios-theme-vertical-bars-back-web-owned,
+    .ionic-theme-disabled,
+    .ios-theme-disabled,
+    .ios26-disabled,
+    .ios-theme-vertical-bars-back-button-projection
+  ):not(
+    :where(
+      ion-menu *,
+      ion-modal *,
+      ion-popover *,
+      ion-header[collapse] *,
+      ion-footer[collapse] *,
+      ion-buttons.ios-theme-horizontal-only *,
+      .ios-theme-shell-disabled *,
+      .ionic-theme-disabled *,
+      .ios-theme-disabled *,
+      .ios26-disabled *
+    )
+  ) {
+  position: absolute !important;
+  visibility: hidden !important;
+}
+
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *))
+    ion-back-button:is(.ios, .md)[data-native-ui-shell]:not(
+      .ios-theme-disabled,
+      .ios26-disabled,
+      .ios-theme-vertical-bars-back-button-projection
+    ) {
+    display: none;
+  }
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *))
+    ion-buttons:is(.ios, .md)
+    > :is(ion-button, ion-menu-button):is(.ios, .md)[data-native-ui-shell]:not(
+      .ios-theme-disabled,
+      .ios26-disabled,
+      .ios-theme-vertical-bars-toolbar-action
+    ) {
+    display: none;
+  }
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *))
+    ion-buttons:is(.ios, .md):has(> :is(ion-back-button, ion-button, ion-menu-button)[data-native-ui-shell]):not(
+      :has(> :is(ion-back-button, ion-button, ion-menu-button):not([data-native-ui-shell]))
+    ) {
+    display: none;
+  }
+  > ion-back-button.ios-theme-vertical-bars-back-button-projection {
+    position: fixed;
+    z-index: 1001;
+    top: var(--ios-theme-vertical-bars-toolbar-top, 220px);
+    right: max(4px, calc((var(--ios-theme-vertical-bars-safe-area-right-resolved) - 46px) / 2));
+    display: block;
+    width: 46px;
+    height: 46px;
+    margin: 0;
+  }
+  > :is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
+    position: fixed;
+    z-index: 1001;
+    top: calc(var(--ios-theme-vertical-bars-toolbar-top, 220px) + var(--ios-theme-vertical-bars-toolbar-offset, 0px));
+    right: max(4px, calc((var(--ios-theme-vertical-bars-safe-area-right-resolved) - 46px) / 2));
+    width: 46px;
+    min-width: 46px;
+    height: 46px;
+    min-height: 46px;
+    margin: 0;
+    :is(ion-icon, svg) {
+      width: 22px;
+      height: 22px;
+      margin: 0;
+      font-size: 22px;
+    }
+  }
+  > ion-menu-button:is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
+    @include api.glass-control-background;
+    border-radius: 50%;
+  }
+  > ion-button:is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
+    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
+    --border-radius: 50%;
+    @include glass.light-shadow('--box-shadow');
+    &::part(native) {
+      @include api.glass-control-background($include-background: false, $shadow: var(--box-shadow));
+    }
+  }
+  > ion-buttons:is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-height: 0;
+    > :is(ion-button, ion-menu-button):is(.ios, .md).ios-theme-vertical-bars-toolbar-action {
+      display: block;
+      width: 44px;
+      min-width: 44px;
+      height: 46px;
+      min-height: 46px;
+      margin: 0 1px;
+      &::part(native) {
+        margin-inline: auto;
+      }
+    }
+  }
+}
+
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left {
+  > ion-back-button.ios-theme-vertical-bars-back-button-projection,
+  > :is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
+    right: auto;
+    left: max(4px, calc((var(--ios-theme-vertical-bars-safe-area-left-resolved) - 46px) / 2));
+  }
+}

package/src/transition/index.ts

@@ -170,7 +170,7 @@ const waitForReady = async (opts: TransitionOptions, defaultDeep: boolean) => {
   await notifyViewReady(opts.viewIsReady, opts.enteringEl);
 };
 
-const notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise<any>), enteringEl: HTMLElement) => {
+const notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise<unknown>), enteringEl: HTMLElement) => {
   if (viewIsReady) {
     await viewIsReady(enteringEl);
   }
@@ -180,7 +180,7 @@ const playTransition = (trans: Animation, opts: TransitionOptions): Promise<bool
   const progressCallback = opts.progressCallback;
 
   const promise = new Promise<boolean>((resolve) => {
-    trans.onFinish((currentStep: any) => resolve(currentStep === 1));
+    trans.onFinish((currentStep) => resolve(currentStep === 1));
   });
 
   // cool, let's do this, start the transition
@@ -236,8 +236,13 @@ export const waitForMount = (): Promise<void> => {
   return new Promise((resolve) => raf(() => raf(() => resolve())));
 };
 
-export const deepReady = async (el: any | undefined): Promise<void> => {
-  const element = el as any;
+type LazyLoadedElement = Element & {
+  componentOnReady?: () => Promise<unknown>;
+  __registerHost?: unknown;
+};
+
+export const deepReady = async (el: Element | undefined): Promise<void> => {
+  const element = el as LazyLoadedElement | undefined;
   if (element) {
     if (element.componentOnReady != null) {
       // eslint-disable-next-line custom-rules/no-component-on-ready-method
@@ -259,7 +264,7 @@ export const deepReady = async (el: any | undefined): Promise<void> => {
 
       return;
     }
-    await Promise.all(Array.from(element.children).map(deepReady));
+    await Promise.all(Array.from(element.children).map((child) => deepReady(child)));
   }
 };
 
@@ -358,7 +363,7 @@ const getIosIonHeader = (opts: TransitionOptions): HTMLElement | null => {
 
 export interface TransitionOptions extends NavOptions {
   progressCallback?: (ani: Animation | undefined) => void;
-  baseEl: any;
+  baseEl: HTMLElement;
   enteringEl: HTMLElement;
   leavingEl: HTMLElement | undefined;
 }

package/src/transition/ios.transition.ts

@@ -14,6 +14,7 @@ const transitionConfig = {
   offLeftPercent: 30,
   getIonPageElement,
   connectNativeUIShellTransition,
+  shouldAnimateFixedBackButton: (navEl: HTMLElement) => !navEl.closest('ion-app.ios-theme-vertical-bars'),
   radius: 0,
 };
 

package/src/utils.ts

@@ -1,8 +1,8 @@
 import { AnimationPosition } from './sheets-of-glass/interfaces';
 import { IonicConfig } from '@ionic/core';
 
-declare const __zone_symbol__requestAnimationFrame: any;
-declare const requestAnimationFrame: any;
+declare const __zone_symbol__requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;
+declare const requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;
 
 export const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {
   return el.shadowRoot || fallback;
@@ -58,15 +58,15 @@ export const changeSelectedElement = (
 };
 
 export class Config {
-  private m = new Map<keyof IonicConfig, any>();
+  private m = new Map<keyof IonicConfig, unknown>();
 
   reset(configObj: IonicConfig) {
-    this.m = new Map<keyof IonicConfig, any>(Object.entries(configObj) as any);
+    this.m = new Map<keyof IonicConfig, unknown>(Object.entries(configObj) as [keyof IonicConfig, unknown][]);
   }
 
-  get(key: keyof IonicConfig, fallback?: any): any {
+  get<T>(key: keyof IonicConfig, fallback?: T): T {
     const value = this.m.get(key);
-    return value !== undefined ? value : fallback;
+    return value !== undefined ? (value as T) : (fallback as T);
   }
 
   getBoolean(key: keyof IonicConfig, fallback = false): boolean {
@@ -81,11 +81,11 @@ export class Config {
   }
 
   getNumber(key: keyof IonicConfig, fallback?: number): number {
-    const val = parseFloat(this.m.get(key));
+    const val = parseFloat(String(this.m.get(key)));
     return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
   }
 
-  set(key: keyof IonicConfig, value: any) {
+  set(key: keyof IonicConfig, value: unknown) {
     this.m.set(key, value);
   }
 }

package/src/vertical-bars.ts

@@ -0,0 +1,3 @@
+export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
+export { HingeStatus } from './native';
+export type { DeviceLayout, NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';

package/dist/native/lifecycle.d.ts

@@ -1,4 +0,0 @@
-import type { PluginListenerHandle } from '@capacitor/core';
-import type { NativeUIShellHandle } from './definitions';
-export declare const bindMetricsLifecycle: (runtime: NativeUIShellHandle, listen: () => Promise<PluginListenerHandle>, deactivate: () => void) => Promise<NativeUIShellHandle>;
-//# sourceMappingURL=lifecycle.d.ts.map

package/dist/native/lifecycle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lifecycle.d.ts","sourceRoot":"","sources":["../../src/native/lifecycle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,eAAO,MAAM,oBAAoB,GAC/B,SAAS,mBAAmB,EAC5B,QAAQ,MAAM,OAAO,CAAC,oBAAoB,CAAC,EAC3C,YAAY,MAAM,IAAI,KACrB,OAAO,CAAC,mBAAmB,CA8B7B,CAAC"}

package/dist/native/lifecycle.js

@@ -1,34 +0,0 @@
-export const bindMetricsLifecycle = async (runtime, listen, deactivate) => {
-    let listener;
-    try {
-        listener = await listen();
-    }
-    catch (error) {
-        await runtime.destroy();
-        throw error;
-    }
-    let destroying;
-    return {
-        getStatus: runtime.getStatus,
-        suspend: runtime.suspend,
-        destroy() {
-            return (destroying ?? (destroying = (async () => {
-                let removalError;
-                try {
-                    await listener.remove();
-                }
-                catch (error) {
-                    removalError = error;
-                }
-                try {
-                    await runtime.destroy();
-                }
-                finally {
-                    deactivate();
-                }
-                if (removalError)
-                    throw removalError;
-            })()));
-        },
-    };
-};

package/src/native/lifecycle.ts

@@ -1,38 +0,0 @@
-import type { PluginListenerHandle } from '@capacitor/core';
-import type { NativeUIShellHandle } from './definitions';
-
-export const bindMetricsLifecycle = async (
-  runtime: NativeUIShellHandle,
-  listen: () => Promise<PluginListenerHandle>,
-  deactivate: () => void,
-): Promise<NativeUIShellHandle> => {
-  let listener: PluginListenerHandle;
-  try {
-    listener = await listen();
-  } catch (error) {
-    await runtime.destroy();
-    throw error;
-  }
-
-  let destroying: Promise<void> | undefined;
-  return {
-    getStatus: runtime.getStatus,
-    suspend: runtime.suspend,
-    destroy() {
-      return (destroying ??= (async () => {
-        let removalError: unknown;
-        try {
-          await listener.remove();
-        } catch (error) {
-          removalError = error;
-        }
-        try {
-          await runtime.destroy();
-        } finally {
-          deactivate();
-        }
-        if (removalError) throw removalError;
-      })());
-    },
-  };
-};