@rdlabo/ionic-theme-ios27 1.2.0 → 1.2.1

package/dist/transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/transition/index.ts"],"sourcesContent":["import { config } from '../utils';\nimport { Build, writeTask } from '@stencil/core';\n\nimport { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';\nimport type { NavOptions, NavDirection } from '@ionic/core';\nimport type { Animation, AnimationBuilder } from '@ionic/core';\nimport { createFocusController } from '../focus-controller';\nimport { raf } from '../utils';\n\nconst iosTransitionAnimation = () => import('./ios.transition');\n// const mdTransitionAnimation = () => import('./md.transition');\nconst focusController = createFocusController();\n\n// TODO(FW-2832): types\n\n/**\n * Executes the main page transition.\n * It also manages the lifecycle of header visibility (if any)\n * to prevent visual flickering in iOS. The flickering only\n * occurs for a condensed header that is placed above the content.\n *\n * @param opts Options for the transition.\n * @returns A promise that resolves when the transition is complete.\n */\nexport const transition = (opts: TransitionOptions): Promise<TransitionResult> => {\n  return new Promise((resolve, reject) => {\n    writeTask(() => {\n      const transitioningInactiveHeader = getIosIonHeader(opts);\n      beforeTransition(opts, transitioningInactiveHeader);\n      runTransition(opts)\n        .then(\n          (result) => {\n            if (result.animation) {\n              result.animation.destroy();\n            }\n            afterTransition(opts);\n            resolve(result);\n          },\n          (error) => {\n            afterTransition(opts);\n            reject(error);\n          },\n        )\n        .finally(() => {\n          // Ensure that the header is restored to its original state.\n          setHeaderTransitionClass(transitioningInactiveHeader, false);\n        });\n    });\n  });\n};\n\nconst beforeTransition = (opts: TransitionOptions, transitioningInactiveHeader: HTMLElement | null) => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n\n  focusController.saveViewFocus(leavingEl);\n\n  setZIndex(enteringEl, leavingEl, opts.direction);\n  // Prevent flickering of the header by adding a class.\n  setHeaderTransitionClass(transitioningInactiveHeader, true);\n\n  if (opts.showGoBack) {\n    enteringEl.classList.add('can-go-back');\n  } else {\n    enteringEl.classList.remove('can-go-back');\n  }\n  setPageHidden(enteringEl, false);\n\n  /**\n   * When transitioning, the page should not\n   * respond to click events. This resolves small\n   * issues like users double tapping the ion-back-button.\n   * These pointer events are removed in `afterTransition`.\n   */\n  enteringEl.style.setProperty('pointer-events', 'none');\n\n  if (leavingEl) {\n    setPageHidden(leavingEl, false);\n    leavingEl.style.setProperty('pointer-events', 'none');\n  }\n};\n\nconst runTransition = async (opts: TransitionOptions): Promise<TransitionResult> => {\n  const animationBuilder = await getAnimationBuilder(opts);\n\n  const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation\n\n  return ani;\n};\n\nconst afterTransition = (opts: TransitionOptions) => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  enteringEl.classList.remove('ion-page-invisible');\n  enteringEl.style.removeProperty('pointer-events');\n  if (leavingEl !== undefined) {\n    leavingEl.classList.remove('ion-page-invisible');\n    leavingEl.style.removeProperty('pointer-events');\n  }\n\n  focusController.setViewFocus(enteringEl);\n};\n\nconst getAnimationBuilder = async (opts: TransitionOptions): Promise<AnimationBuilder | undefined> => {\n  if (!opts.leavingEl || !opts.animated || opts.duration === 0) {\n    return undefined;\n  }\n\n  if (opts.animationBuilder) {\n    return opts.animationBuilder;\n  }\n\n  const getAnimation =\n    // opts.mode === 'ios'\n    (await iosTransitionAnimation()).iosTransitionAnimation;\n  // : (await mdTransitionAnimation()).mdTransitionAnimation;\n\n  return getAnimation;\n};\n\nconst animation = async (animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> => {\n  await waitForReady(opts, true);\n\n  const trans = animationBuilder(opts.baseEl, opts);\n\n  fireWillEvents(opts.enteringEl, opts.leavingEl);\n\n  const didComplete = await playTransition(trans, opts);\n\n  if (opts.progressCallback) {\n    opts.progressCallback(undefined);\n  }\n\n  if (didComplete) {\n    fireDidEvents(opts.enteringEl, opts.leavingEl);\n  }\n\n  return {\n    hasCompleted: didComplete,\n    animation: trans,\n  };\n};\n\nconst noAnimation = async (opts: TransitionOptions): Promise<TransitionResult> => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  const focusManagerEnabled = config.get('focusManagerPriority', false);\n\n  /**\n   * If the focus manager is enabled then we need to wait for Ionic components to be\n   * rendered otherwise the component to focus may not be focused because it is hidden.\n   */\n  await waitForReady(opts, focusManagerEnabled);\n\n  fireWillEvents(enteringEl, leavingEl);\n  fireDidEvents(enteringEl, leavingEl);\n\n  return {\n    hasCompleted: true,\n  };\n};\n\nconst waitForReady = async (opts: TransitionOptions, defaultDeep: boolean) => {\n  const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;\n\n  if (deep) {\n    await Promise.all([deepReady(opts.enteringEl), deepReady(opts.leavingEl)]);\n  }\n\n  await notifyViewReady(opts.viewIsReady, opts.enteringEl);\n};\n\nconst notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise<unknown>), enteringEl: HTMLElement) => {\n  if (viewIsReady) {\n    await viewIsReady(enteringEl);\n  }\n};\n\nconst playTransition = (trans: Animation, opts: TransitionOptions): Promise<boolean> => {\n  const progressCallback = opts.progressCallback;\n\n  const promise = new Promise<boolean>((resolve) => {\n    trans.onFinish((currentStep) => resolve(currentStep === 1));\n  });\n\n  // cool, let's do this, start the transition\n  if (progressCallback) {\n    // this is a swipe to go back, just get the transition progress ready\n    // kick off the swipe animation start\n    trans.progressStart(true);\n    progressCallback(trans);\n  } else {\n    // only the top level transition should actually start \"play\"\n    // kick it off and let it play through\n    // ******** DOM WRITE ****************\n    trans.play();\n  }\n  // create a callback for when the animation is done\n  return promise;\n};\n\nconst fireWillEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {\n  lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);\n  lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);\n};\n\nconst fireDidEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {\n  lifecycle(enteringEl, LIFECYCLE_DID_ENTER);\n  lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);\n};\n\nexport const lifecycle = (el: HTMLElement | undefined, eventName: string) => {\n  if (el) {\n    const ev = new CustomEvent(eventName, {\n      bubbles: false,\n      cancelable: false,\n    });\n    el.dispatchEvent(ev);\n  }\n};\n\n/**\n * Wait two request animation frame loops.\n * This allows the framework implementations enough time to mount\n * the user-defined contents. This is often needed when using inline\n * modals and popovers that accept user components. For popover,\n * the contents must be mounted for the popover to be sized correctly.\n * For modals, the contents must be mounted for iOS to run the\n * transition correctly.\n *\n * On Angular and React, a single raf is enough time, but for Vue\n * we need to wait two rafs. As a result we are using two rafs for\n * all frameworks to ensure contents are mounted.\n */\nexport const waitForMount = (): Promise<void> => {\n  return new Promise((resolve) => raf(() => raf(() => resolve())));\n};\n\ntype LazyLoadedElement = Element & {\n  componentOnReady?: () => Promise<unknown>;\n  __registerHost?: unknown;\n};\n\nexport const deepReady = async (el: Element | undefined): Promise<void> => {\n  const element = el as LazyLoadedElement | undefined;\n  if (element) {\n    if (element.componentOnReady != null) {\n      // eslint-disable-next-line custom-rules/no-component-on-ready-method\n      const stencilEl = await element.componentOnReady();\n      if (stencilEl != null) {\n        return;\n      }\n\n      /**\n       * Custom elements in Stencil will have __registerHost.\n       */\n    } else if (element.__registerHost != null) {\n      /**\n       * Non-lazy loaded custom elements need to wait\n       * one frame for component to be loaded.\n       */\n      const waitForCustomElement = new Promise((resolve) => raf(resolve));\n      await waitForCustomElement;\n\n      return;\n    }\n    await Promise.all(Array.from(element.children).map((child) => deepReady(child)));\n  }\n};\n\nexport const setPageHidden = (el: HTMLElement, hidden: boolean) => {\n  if (hidden) {\n    el.setAttribute('aria-hidden', 'true');\n    el.classList.add('ion-page-hidden');\n  } else {\n    el.hidden = false;\n    el.removeAttribute('aria-hidden');\n    el.classList.remove('ion-page-hidden');\n  }\n};\n\nconst setZIndex = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined, direction: NavDirection | undefined) => {\n  if (enteringEl !== undefined) {\n    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';\n  }\n  if (leavingEl !== undefined) {\n    leavingEl.style.zIndex = '100';\n  }\n};\n\n/**\n * Add a class to ensure that the header (if any)\n * does not flicker during the transition. By adding the\n * transitioning class, we ensure that the header has\n * the necessary styles to prevent the following flickers:\n * 1. When entering a page with a condensed header, the\n * header should never be visible. However,\n * it briefly renders the background color while\n * the transition is occurring.\n * 2. When leaving a page with a condensed header, the\n * header has an opacity of 0 and the pages\n * have a z-index which causes the entering page to\n * briefly show it's content underneath the leaving page.\n * 3. When entering a page or leaving a page with a fade\n * header, the header should not have a background color.\n * However, it briefly shows the background color while\n * the transition is occurring.\n *\n * @param header The header element to modify.\n * @param isTransitioning Whether the transition is occurring.\n */\nconst setHeaderTransitionClass = (header: HTMLElement | null, isTransitioning: boolean) => {\n  if (!header) {\n    return;\n  }\n\n  const transitionClass = 'header-transitioning';\n  if (isTransitioning) {\n    header.classList.add(transitionClass);\n  } else {\n    header.classList.remove(transitionClass);\n  }\n};\n\nexport const getIonPageElement = (element: HTMLElement) => {\n  if (element.classList.contains('ion-page')) {\n    return element;\n  }\n\n  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');\n  if (ionPage) {\n    return ionPage;\n  }\n  // idk, return the original element so at least something animates and we don't have a null pointer\n  return element;\n};\n\n/**\n * Retrieves the ion-header element from a page based on the\n * direction of the transition.\n *\n * @param opts Options for the transition.\n * @returns The ion-header element or null if not found or not in 'ios' mode.\n */\nconst getIosIonHeader = (opts: TransitionOptions): HTMLElement | null => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  const direction = opts.direction;\n  const mode = opts.mode;\n\n  if (mode !== 'ios') {\n    return null;\n  }\n\n  const element = direction === 'back' ? leavingEl : enteringEl;\n\n  if (!element) {\n    return null;\n  }\n\n  return element.querySelector('ion-header');\n};\n\nexport interface TransitionOptions extends NavOptions {\n  progressCallback?: (ani: Animation | undefined) => void;\n  baseEl: HTMLElement;\n  enteringEl: HTMLElement;\n  leavingEl: HTMLElement | undefined;\n}\n\nexport interface TransitionResult {\n  hasCompleted: boolean;\n  animation?: Animation;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/transition/index.ts"],"sourcesContent":["import { config } from '../utils';\nimport { Build, writeTask } from '@stencil/core';\n\nimport { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components/index.js';\nimport type { NavOptions, NavDirection } from '@ionic/core/components';\nimport type { Animation, AnimationBuilder } from '@ionic/core/components';\nimport { createFocusController } from '../focus-controller';\nimport { raf } from '../utils';\n\nconst iosTransitionAnimation = () => import('./ios.transition');\n// const mdTransitionAnimation = () => import('./md.transition');\nconst focusController = createFocusController();\n\n// TODO(FW-2832): types\n\n/**\n * Executes the main page transition.\n * It also manages the lifecycle of header visibility (if any)\n * to prevent visual flickering in iOS. The flickering only\n * occurs for a condensed header that is placed above the content.\n *\n * @param opts Options for the transition.\n * @returns A promise that resolves when the transition is complete.\n */\nexport const transition = (opts: TransitionOptions): Promise<TransitionResult> => {\n  return new Promise((resolve, reject) => {\n    writeTask(() => {\n      const transitioningInactiveHeader = getIosIonHeader(opts);\n      beforeTransition(opts, transitioningInactiveHeader);\n      runTransition(opts)\n        .then(\n          (result) => {\n            if (result.animation) {\n              result.animation.destroy();\n            }\n            afterTransition(opts);\n            resolve(result);\n          },\n          (error) => {\n            afterTransition(opts);\n            reject(error);\n          },\n        )\n        .finally(() => {\n          // Ensure that the header is restored to its original state.\n          setHeaderTransitionClass(transitioningInactiveHeader, false);\n        });\n    });\n  });\n};\n\nconst beforeTransition = (opts: TransitionOptions, transitioningInactiveHeader: HTMLElement | null) => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n\n  focusController.saveViewFocus(leavingEl);\n\n  setZIndex(enteringEl, leavingEl, opts.direction);\n  // Prevent flickering of the header by adding a class.\n  setHeaderTransitionClass(transitioningInactiveHeader, true);\n\n  if (opts.showGoBack) {\n    enteringEl.classList.add('can-go-back');\n  } else {\n    enteringEl.classList.remove('can-go-back');\n  }\n  setPageHidden(enteringEl, false);\n\n  /**\n   * When transitioning, the page should not\n   * respond to click events. This resolves small\n   * issues like users double tapping the ion-back-button.\n   * These pointer events are removed in `afterTransition`.\n   */\n  enteringEl.style.setProperty('pointer-events', 'none');\n\n  if (leavingEl) {\n    setPageHidden(leavingEl, false);\n    leavingEl.style.setProperty('pointer-events', 'none');\n  }\n};\n\nconst runTransition = async (opts: TransitionOptions): Promise<TransitionResult> => {\n  const animationBuilder = await getAnimationBuilder(opts);\n\n  const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation\n\n  return ani;\n};\n\nconst afterTransition = (opts: TransitionOptions) => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  enteringEl.classList.remove('ion-page-invisible');\n  enteringEl.style.removeProperty('pointer-events');\n  if (leavingEl !== undefined) {\n    leavingEl.classList.remove('ion-page-invisible');\n    leavingEl.style.removeProperty('pointer-events');\n  }\n\n  focusController.setViewFocus(enteringEl);\n};\n\nconst getAnimationBuilder = async (opts: TransitionOptions): Promise<AnimationBuilder | undefined> => {\n  if (!opts.leavingEl || !opts.animated || opts.duration === 0) {\n    return undefined;\n  }\n\n  if (opts.animationBuilder) {\n    return opts.animationBuilder;\n  }\n\n  const getAnimation =\n    // opts.mode === 'ios'\n    (await iosTransitionAnimation()).iosTransitionAnimation;\n  // : (await mdTransitionAnimation()).mdTransitionAnimation;\n\n  return getAnimation;\n};\n\nconst animation = async (animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> => {\n  await waitForReady(opts, true);\n\n  const trans = animationBuilder(opts.baseEl, opts);\n\n  fireWillEvents(opts.enteringEl, opts.leavingEl);\n\n  const didComplete = await playTransition(trans, opts);\n\n  if (opts.progressCallback) {\n    opts.progressCallback(undefined);\n  }\n\n  if (didComplete) {\n    fireDidEvents(opts.enteringEl, opts.leavingEl);\n  }\n\n  return {\n    hasCompleted: didComplete,\n    animation: trans,\n  };\n};\n\nconst noAnimation = async (opts: TransitionOptions): Promise<TransitionResult> => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  const focusManagerEnabled = config.get('focusManagerPriority', false);\n\n  /**\n   * If the focus manager is enabled then we need to wait for Ionic components to be\n   * rendered otherwise the component to focus may not be focused because it is hidden.\n   */\n  await waitForReady(opts, focusManagerEnabled);\n\n  fireWillEvents(enteringEl, leavingEl);\n  fireDidEvents(enteringEl, leavingEl);\n\n  return {\n    hasCompleted: true,\n  };\n};\n\nconst waitForReady = async (opts: TransitionOptions, defaultDeep: boolean) => {\n  const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;\n\n  if (deep) {\n    await Promise.all([deepReady(opts.enteringEl), deepReady(opts.leavingEl)]);\n  }\n\n  await notifyViewReady(opts.viewIsReady, opts.enteringEl);\n};\n\nconst notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise<unknown>), enteringEl: HTMLElement) => {\n  if (viewIsReady) {\n    await viewIsReady(enteringEl);\n  }\n};\n\nconst playTransition = (trans: Animation, opts: TransitionOptions): Promise<boolean> => {\n  const progressCallback = opts.progressCallback;\n\n  const promise = new Promise<boolean>((resolve) => {\n    trans.onFinish((currentStep) => resolve(currentStep === 1));\n  });\n\n  // cool, let's do this, start the transition\n  if (progressCallback) {\n    // this is a swipe to go back, just get the transition progress ready\n    // kick off the swipe animation start\n    trans.progressStart(true);\n    progressCallback(trans);\n  } else {\n    // only the top level transition should actually start \"play\"\n    // kick it off and let it play through\n    // ******** DOM WRITE ****************\n    trans.play();\n  }\n  // create a callback for when the animation is done\n  return promise;\n};\n\nconst fireWillEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {\n  lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);\n  lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);\n};\n\nconst fireDidEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {\n  lifecycle(enteringEl, LIFECYCLE_DID_ENTER);\n  lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);\n};\n\nexport const lifecycle = (el: HTMLElement | undefined, eventName: string) => {\n  if (el) {\n    const ev = new CustomEvent(eventName, {\n      bubbles: false,\n      cancelable: false,\n    });\n    el.dispatchEvent(ev);\n  }\n};\n\n/**\n * Wait two request animation frame loops.\n * This allows the framework implementations enough time to mount\n * the user-defined contents. This is often needed when using inline\n * modals and popovers that accept user components. For popover,\n * the contents must be mounted for the popover to be sized correctly.\n * For modals, the contents must be mounted for iOS to run the\n * transition correctly.\n *\n * On Angular and React, a single raf is enough time, but for Vue\n * we need to wait two rafs. As a result we are using two rafs for\n * all frameworks to ensure contents are mounted.\n */\nexport const waitForMount = (): Promise<void> => {\n  return new Promise((resolve) => raf(() => raf(() => resolve())));\n};\n\ntype LazyLoadedElement = Element & {\n  componentOnReady?: () => Promise<unknown>;\n  __registerHost?: unknown;\n};\n\nexport const deepReady = async (el: Element | undefined): Promise<void> => {\n  const element = el as LazyLoadedElement | undefined;\n  if (element) {\n    if (element.componentOnReady != null) {\n      // eslint-disable-next-line custom-rules/no-component-on-ready-method\n      const stencilEl = await element.componentOnReady();\n      if (stencilEl != null) {\n        return;\n      }\n\n      /**\n       * Custom elements in Stencil will have __registerHost.\n       */\n    } else if (element.__registerHost != null) {\n      /**\n       * Non-lazy loaded custom elements need to wait\n       * one frame for component to be loaded.\n       */\n      const waitForCustomElement = new Promise((resolve) => raf(resolve));\n      await waitForCustomElement;\n\n      return;\n    }\n    await Promise.all(Array.from(element.children).map((child) => deepReady(child)));\n  }\n};\n\nexport const setPageHidden = (el: HTMLElement, hidden: boolean) => {\n  if (hidden) {\n    el.setAttribute('aria-hidden', 'true');\n    el.classList.add('ion-page-hidden');\n  } else {\n    el.hidden = false;\n    el.removeAttribute('aria-hidden');\n    el.classList.remove('ion-page-hidden');\n  }\n};\n\nconst setZIndex = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined, direction: NavDirection | undefined) => {\n  if (enteringEl !== undefined) {\n    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';\n  }\n  if (leavingEl !== undefined) {\n    leavingEl.style.zIndex = '100';\n  }\n};\n\n/**\n * Add a class to ensure that the header (if any)\n * does not flicker during the transition. By adding the\n * transitioning class, we ensure that the header has\n * the necessary styles to prevent the following flickers:\n * 1. When entering a page with a condensed header, the\n * header should never be visible. However,\n * it briefly renders the background color while\n * the transition is occurring.\n * 2. When leaving a page with a condensed header, the\n * header has an opacity of 0 and the pages\n * have a z-index which causes the entering page to\n * briefly show it's content underneath the leaving page.\n * 3. When entering a page or leaving a page with a fade\n * header, the header should not have a background color.\n * However, it briefly shows the background color while\n * the transition is occurring.\n *\n * @param header The header element to modify.\n * @param isTransitioning Whether the transition is occurring.\n */\nconst setHeaderTransitionClass = (header: HTMLElement | null, isTransitioning: boolean) => {\n  if (!header) {\n    return;\n  }\n\n  const transitionClass = 'header-transitioning';\n  if (isTransitioning) {\n    header.classList.add(transitionClass);\n  } else {\n    header.classList.remove(transitionClass);\n  }\n};\n\nexport const getIonPageElement = (element: HTMLElement) => {\n  if (element.classList.contains('ion-page')) {\n    return element;\n  }\n\n  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');\n  if (ionPage) {\n    return ionPage;\n  }\n  // idk, return the original element so at least something animates and we don't have a null pointer\n  return element;\n};\n\n/**\n * Retrieves the ion-header element from a page based on the\n * direction of the transition.\n *\n * @param opts Options for the transition.\n * @returns The ion-header element or null if not found or not in 'ios' mode.\n */\nconst getIosIonHeader = (opts: TransitionOptions): HTMLElement | null => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  const direction = opts.direction;\n  const mode = opts.mode;\n\n  if (mode !== 'ios') {\n    return null;\n  }\n\n  const element = direction === 'back' ? leavingEl : enteringEl;\n\n  if (!element) {\n    return null;\n  }\n\n  return element.querySelector('ion-header');\n};\n\nexport interface TransitionOptions extends NavOptions {\n  progressCallback?: (ani: Animation | undefined) => void;\n  baseEl: HTMLElement;\n  enteringEl: HTMLElement;\n  leavingEl: HTMLElement | undefined;\n}\n\nexport interface TransitionResult {\n  hasCompleted: boolean;\n  animation?: Animation;\n}\n"],"mappings":"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"}

package/dist/transition/ios.transition.d.ts

@@ -1,6 +1,6 @@
 import { TransitionOptions } from "./index.js";
-import { Animation } from "@ionic/core";
 import { shadow } from "@rdlabo/ionic-theme-utils";
+import { Animation } from "@ionic/core/components";
 //#region src/transition/ios.transition.d.ts
 export interface IosTransitionConfig {
   radius: number;

package/dist/transition/ios.transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.js","names":[],"sources":["../../src/transition/ios.transition.ts"],"sourcesContent":["import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';\nimport type { Animation } from '@ionic/core';\nimport type { TransitionOptions } from './index';\nimport { getIonPageElement } from './index';\nimport { withNativeUIShellTransition } from '../native-integration/transition';\n\nexport { shadow };\n\nexport interface IosTransitionConfig {\n  radius: number;\n}\n\nconst transitionConfig = {\n  offLeftPercent: 30,\n  getIonPageElement,\n  shouldAnimateFixedBackButton: (navEl: HTMLElement) => !navEl.closest('ion-app.ios-theme-vertical-bars'),\n  radius: 0,\n};\n\nexport const setConfig = (config: Partial<IosTransitionConfig>): void => {\n  Object.assign(transitionConfig, config);\n};\n\nexport const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUIShellTransition(\n  createIosTransitionAnimation<TransitionOptions>(transitionConfig),\n);\n"],"mappings":";;;;AAYA,MAAM,mBAAmB;CACvB,gBAAgB;CAChB;CACA,+BAA+B,UAAuB,CAAC,MAAM,QAAQ,iCAAiC;CACtG,QAAQ;AACV;AAEA,MAAa,aAAa,WAA+C;CACvE,OAAO,OAAO,kBAAkB,MAAM;AACxC;AAEA,MAAa,yBAAqF,4BAChG,6BAAgD,gBAAgB,CAClE"}
+{"version":3,"file":"ios.transition.js","names":[],"sources":["../../src/transition/ios.transition.ts"],"sourcesContent":["import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';\nimport type { Animation } from '@ionic/core/components';\nimport type { TransitionOptions } from './index';\nimport { getIonPageElement } from './index';\nimport { withNativeUIShellTransition } from '../native-integration/transition';\n\nexport { shadow };\n\nexport interface IosTransitionConfig {\n  radius: number;\n}\n\nconst transitionConfig = {\n  offLeftPercent: 30,\n  getIonPageElement,\n  shouldAnimateFixedBackButton: (navEl: HTMLElement) => !navEl.closest('ion-app.ios-theme-vertical-bars'),\n  radius: 0,\n};\n\nexport const setConfig = (config: Partial<IosTransitionConfig>): void => {\n  Object.assign(transitionConfig, config);\n};\n\nexport const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUIShellTransition(\n  createIosTransitionAnimation<TransitionOptions>(transitionConfig),\n);\n"],"mappings":";;;;AAYA,MAAM,mBAAmB;CACvB,gBAAgB;CAChB;CACA,+BAA+B,UAAuB,CAAC,MAAM,QAAQ,iCAAiC;CACtG,QAAQ;AACV;AAEA,MAAa,aAAa,WAA+C;CACvE,OAAO,OAAO,kBAAkB,MAAM;AACxC;AAEA,MAAa,yBAAqF,4BAChG,6BAAgD,gBAAgB,CAClE"}

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 import { AnimationPosition } from "./sheets-of-glass/interfaces.js";
-import { IonicConfig } from "@ionic/core";
+import { IonicConfig } from "@ionic/core/components";
 //#region src/utils.d.ts
 export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) => HTMLElement | ShadowRoot;
 export declare const raf: (h: FrameRequestCallback) => number;

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import { AnimationPosition } from './sheets-of-glass/interfaces';\nimport { IonicConfig } from '@ionic/core';\n\ndeclare const __zone_symbol__requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;\ndeclare const requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;\n\nexport const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {\n  return el.shadowRoot || fallback;\n};\n\nexport const raf = (h: FrameRequestCallback) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(h);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(h);\n  }\n  return setTimeout(h);\n};\n\nexport const cloneElement = (tagName: string, useCache: boolean = true): HTMLElement => {\n  if (useCache) {\n    const cachedElement = document.querySelector(`${tagName}.ion-cloned-element`);\n    if (cachedElement !== null) {\n      return cachedElement as HTMLElement;\n    }\n  }\n\n  const clonedEl = document.createElement(tagName) as HTMLElement;\n  clonedEl.classList.add('ion-cloned-element');\n  clonedEl.style.setProperty('display', 'none');\n  document.body.appendChild(clonedEl);\n\n  return clonedEl;\n};\n\nexport const getStep = (targetX: number, animationPosition: AnimationPosition) => {\n  if (animationPosition === undefined) {\n    return 0;\n  }\n  const currentX = targetX - animationPosition.width / 2;\n  let progress = (currentX - animationPosition.minPositionX) / (animationPosition.maxPositionX - animationPosition.minPositionX);\n  progress = Math.max(0, Math.min(1, progress)); // clamp 0〜1\n  return progress;\n};\n\nexport const changeSelectedElement = (\n  targetElement: HTMLElement,\n  selectedElement: HTMLElement,\n  effectTagName: string,\n  selectedClassName: string,\n): void => {\n  targetElement.querySelectorAll(effectTagName).forEach((element) => {\n    element.classList.remove(selectedClassName);\n    element.classList.remove('ion-activated');\n  });\n  selectedElement.classList.add('ion-activated');\n};\n\nexport class Config {\n  private m = new Map<keyof IonicConfig, unknown>();\n\n  reset(configObj: IonicConfig) {\n    this.m = new Map<keyof IonicConfig, unknown>(Object.entries(configObj) as [keyof IonicConfig, unknown][]);\n  }\n\n  get<T>(key: keyof IonicConfig, fallback?: T): T {\n    const value = this.m.get(key);\n    return value !== undefined ? (value as T) : (fallback as T);\n  }\n\n  getBoolean(key: keyof IonicConfig, fallback = false): boolean {\n    const val = this.m.get(key);\n    if (val === undefined) {\n      return fallback;\n    }\n    if (typeof val === 'string') {\n      return val === 'true';\n    }\n    return !!val;\n  }\n\n  getNumber(key: keyof IonicConfig, fallback?: number): number {\n    const val = parseFloat(String(this.m.get(key)));\n    return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;\n  }\n\n  set(key: keyof IonicConfig, value: unknown) {\n    this.m.set(key, value);\n  }\n}\n\nexport const config = /*@__PURE__*/ new Config();\n"],"mappings":";AAMA,MAAa,kBAAkB,IAAiB,WAAwB,OAAO;CAC7E,OAAO,GAAG,cAAc;AAC1B;AAEA,MAAa,OAAO,MAA4B;CAC9C,IAAI,OAAO,yCAAyC,YAClD,OAAO,qCAAqC,CAAC;CAE/C,IAAI,OAAO,0BAA0B,YACnC,OAAO,sBAAsB,CAAC;CAEhC,OAAO,WAAW,CAAC;AACrB;AAEA,MAAa,gBAAgB,SAAiB,WAAoB,SAAsB;CACtF,IAAI,UAAU;EACZ,MAAM,gBAAgB,SAAS,cAAc,GAAG,QAAQ,oBAAoB;EAC5E,IAAI,kBAAkB,MACpB,OAAO;CAEX;CAEA,MAAM,WAAW,SAAS,cAAc,OAAO;CAC/C,SAAS,UAAU,IAAI,oBAAoB;CAC3C,SAAS,MAAM,YAAY,WAAW,MAAM;CAC5C,SAAS,KAAK,YAAY,QAAQ;CAElC,OAAO;AACT;AAEA,MAAa,WAAW,SAAiB,sBAAyC;CAChF,IAAI,sBAAsB,KAAA,GACxB,OAAO;CAGT,IAAI,YADa,UAAU,kBAAkB,QAAQ,IAC1B,kBAAkB,iBAAiB,kBAAkB,eAAe,kBAAkB;CACjH,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;CAC5C,OAAO;AACT;AAEA,MAAa,yBACX,eACA,iBACA,eACA,sBACS;CACT,cAAc,iBAAiB,aAAa,CAAC,CAAC,SAAS,YAAY;EACjE,QAAQ,UAAU,OAAO,iBAAiB;EAC1C,QAAQ,UAAU,OAAO,eAAe;CAC1C,CAAC;CACD,gBAAgB,UAAU,IAAI,eAAe;AAC/C;AAEA,IAAa,SAAb,MAAoB;;EAClB,KAAQ,oBAAI,IAAI,IAAgC;;CAEhD,MAAM,WAAwB;EAC5B,KAAK,IAAI,IAAI,IAAgC,OAAO,QAAQ,SAAS,CAAmC;CAC1G;CAEA,IAAO,KAAwB,UAAiB;EAC9C,MAAM,QAAQ,KAAK,EAAE,IAAI,GAAG;EAC5B,OAAO,UAAU,KAAA,IAAa,QAAe;CAC/C;CAEA,WAAW,KAAwB,WAAW,OAAgB;EAC5D,MAAM,MAAM,KAAK,EAAE,IAAI,GAAG;EAC1B,IAAI,QAAQ,KAAA,GACV,OAAO;EAET,IAAI,OAAO,QAAQ,UACjB,OAAO,QAAQ;EAEjB,OAAO,CAAC,CAAC;CACX;CAEA,UAAU,KAAwB,UAA2B;EAC3D,MAAM,MAAM,WAAW,OAAO,KAAK,EAAE,IAAI,GAAG,CAAC,CAAC;EAC9C,OAAO,MAAM,GAAG,IAAK,aAAa,KAAA,IAAY,WAAW,MAAO;CAClE;CAEA,IAAI,KAAwB,OAAgB;EAC1C,KAAK,EAAE,IAAI,KAAK,KAAK;CACvB;AACF;AAEA,MAAa,uBAAuB,IAAI,OAAO"}
+{"version":3,"file":"utils.js","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import { AnimationPosition } from './sheets-of-glass/interfaces';\nimport type { IonicConfig } from '@ionic/core/components';\n\ndeclare const __zone_symbol__requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;\ndeclare const requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;\n\nexport const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {\n  return el.shadowRoot || fallback;\n};\n\nexport const raf = (h: FrameRequestCallback) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(h);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(h);\n  }\n  return setTimeout(h);\n};\n\nexport const cloneElement = (tagName: string, useCache: boolean = true): HTMLElement => {\n  if (useCache) {\n    const cachedElement = document.querySelector(`${tagName}.ion-cloned-element`);\n    if (cachedElement !== null) {\n      return cachedElement as HTMLElement;\n    }\n  }\n\n  const clonedEl = document.createElement(tagName) as HTMLElement;\n  clonedEl.classList.add('ion-cloned-element');\n  clonedEl.style.setProperty('display', 'none');\n  document.body.appendChild(clonedEl);\n\n  return clonedEl;\n};\n\nexport const getStep = (targetX: number, animationPosition: AnimationPosition) => {\n  if (animationPosition === undefined) {\n    return 0;\n  }\n  const currentX = targetX - animationPosition.width / 2;\n  let progress = (currentX - animationPosition.minPositionX) / (animationPosition.maxPositionX - animationPosition.minPositionX);\n  progress = Math.max(0, Math.min(1, progress)); // clamp 0〜1\n  return progress;\n};\n\nexport const changeSelectedElement = (\n  targetElement: HTMLElement,\n  selectedElement: HTMLElement,\n  effectTagName: string,\n  selectedClassName: string,\n): void => {\n  targetElement.querySelectorAll(effectTagName).forEach((element) => {\n    element.classList.remove(selectedClassName);\n    element.classList.remove('ion-activated');\n  });\n  selectedElement.classList.add('ion-activated');\n};\n\nexport class Config {\n  private m = new Map<keyof IonicConfig, unknown>();\n\n  reset(configObj: IonicConfig) {\n    this.m = new Map<keyof IonicConfig, unknown>(Object.entries(configObj) as [keyof IonicConfig, unknown][]);\n  }\n\n  get<T>(key: keyof IonicConfig, fallback?: T): T {\n    const value = this.m.get(key);\n    return value !== undefined ? (value as T) : (fallback as T);\n  }\n\n  getBoolean(key: keyof IonicConfig, fallback = false): boolean {\n    const val = this.m.get(key);\n    if (val === undefined) {\n      return fallback;\n    }\n    if (typeof val === 'string') {\n      return val === 'true';\n    }\n    return !!val;\n  }\n\n  getNumber(key: keyof IonicConfig, fallback?: number): number {\n    const val = parseFloat(String(this.m.get(key)));\n    return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;\n  }\n\n  set(key: keyof IonicConfig, value: unknown) {\n    this.m.set(key, value);\n  }\n}\n\nexport const config = /*@__PURE__*/ new Config();\n"],"mappings":";AAMA,MAAa,kBAAkB,IAAiB,WAAwB,OAAO;CAC7E,OAAO,GAAG,cAAc;AAC1B;AAEA,MAAa,OAAO,MAA4B;CAC9C,IAAI,OAAO,yCAAyC,YAClD,OAAO,qCAAqC,CAAC;CAE/C,IAAI,OAAO,0BAA0B,YACnC,OAAO,sBAAsB,CAAC;CAEhC,OAAO,WAAW,CAAC;AACrB;AAEA,MAAa,gBAAgB,SAAiB,WAAoB,SAAsB;CACtF,IAAI,UAAU;EACZ,MAAM,gBAAgB,SAAS,cAAc,GAAG,QAAQ,oBAAoB;EAC5E,IAAI,kBAAkB,MACpB,OAAO;CAEX;CAEA,MAAM,WAAW,SAAS,cAAc,OAAO;CAC/C,SAAS,UAAU,IAAI,oBAAoB;CAC3C,SAAS,MAAM,YAAY,WAAW,MAAM;CAC5C,SAAS,KAAK,YAAY,QAAQ;CAElC,OAAO;AACT;AAEA,MAAa,WAAW,SAAiB,sBAAyC;CAChF,IAAI,sBAAsB,KAAA,GACxB,OAAO;CAGT,IAAI,YADa,UAAU,kBAAkB,QAAQ,IAC1B,kBAAkB,iBAAiB,kBAAkB,eAAe,kBAAkB;CACjH,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;CAC5C,OAAO;AACT;AAEA,MAAa,yBACX,eACA,iBACA,eACA,sBACS;CACT,cAAc,iBAAiB,aAAa,CAAC,CAAC,SAAS,YAAY;EACjE,QAAQ,UAAU,OAAO,iBAAiB;EAC1C,QAAQ,UAAU,OAAO,eAAe;CAC1C,CAAC;CACD,gBAAgB,UAAU,IAAI,eAAe;AAC/C;AAEA,IAAa,SAAb,MAAoB;;EAClB,KAAQ,oBAAI,IAAI,IAAgC;;CAEhD,MAAM,WAAwB;EAC5B,KAAK,IAAI,IAAI,IAAgC,OAAO,QAAQ,SAAS,CAAmC;CAC1G;CAEA,IAAO,KAAwB,UAAiB;EAC9C,MAAM,QAAQ,KAAK,EAAE,IAAI,GAAG;EAC5B,OAAO,UAAU,KAAA,IAAa,QAAe;CAC/C;CAEA,WAAW,KAAwB,WAAW,OAAgB;EAC5D,MAAM,MAAM,KAAK,EAAE,IAAI,GAAG;EAC1B,IAAI,QAAQ,KAAA,GACV,OAAO;EAET,IAAI,OAAO,QAAQ,UACjB,OAAO,QAAQ;EAEjB,OAAO,CAAC,CAAC;CACX;CAEA,UAAU,KAAwB,UAA2B;EAC3D,MAAM,MAAM,WAAW,OAAO,KAAK,EAAE,IAAI,GAAG,CAAC,CAAC;EAC9C,OAAO,MAAM,GAAG,IAAK,aAAa,KAAA,IAAY,WAAW,MAAO;CAClE;CAEA,IAAI,KAAwB,OAAgB;EAC1C,KAAK,EAAE,IAAI,KAAK,KAAK;CACvB;AACF;AAEA,MAAa,uBAAuB,IAAI,OAAO"}

package/docs/native-ui-shell.md

@@ -98,9 +98,9 @@ With vertical bars, the native rail keeps every tab and its selection. SwiftUI
 
 Search registration does not bypass placement restrictions. Its searchbar and close button must be in fixed footer toolbars. Its trigger must belong to an `ion-fab[slot="fixed"]` directly inside `ion-content`, or directly on the existing non-scrolling `.ion-page` layout. A wrapper inside scrolling content is not a fixed slot.
 
-For horizontal tabs, while a registration is alive, Native UI Shell keeps the searchable controller even when the page is transitioning or temporarily unavailable (`available: false`), instead of demoting back to a separate ordinary control identity. Resting chrome (including Album before search opens) uses the same `UITabBar` + `ShellTabBar.fit` path as ordinary tabs, with the search trigger pinned to the FAB when available; `UISearchTab` is shown only while the search session is active. Flipping availability or entering/leaving search crossfades between those layers. Register before the destination page finishes entering (for example in `ionViewWillEnter`) so the first visit does not paint ordinary tabs and then swap.
+For horizontal tabs, while a registration is alive, Native UI Shell keeps the searchable controller even when the page is transitioning or temporarily unavailable (`available: false`). The same controller manages resting tabs and active search. When resting, its view is fitted to the source `ion-tab-bar` to preserve the ordinary tab platter’s source width. UIKit can limit the platter width for small tab groups. UIKit owns the search button's placement beside the tabs. Register before the destination page finishes entering (for example in `ionViewWillEnter`) so the first visit does not paint ordinary tabs and then swap.
 
-With horizontal tabs, opening search preserves the selected Ionic tab and does not automatically show the keyboard (`automaticallyActivatesSearch` stays off). Tap the field or call `ion-searchbar.setFocus()` for the keyboard. While search is active, Native UI Shell freezes Web layout projection and holds Capacitor Keyboard resize at `none`; UIKit owns tab/search chrome (no Ionic `fit` mid-session). Leave re-fits ordinary tabs to `ion-tab-bar` and search to the FAB. Ordinary native tabs keep an optimistic selection until the Web `selected` state catches up. Input events and application `value` updates continue across the bridge until search closes. The trigger's resolved SVG and the search icon are projected from Ionic, including `ion-icon name`.
+Opening search preserves the selected Ionic tab and does not automatically show the keyboard (`automaticallyActivatesSearch` stays off). Tap the field or call `ion-searchbar.setFocus()` for the keyboard. While search is active, Native UI Shell freezes Web layout projection and holds Capacitor Keyboard resize at `none`; UIKit owns tab/search chrome without frame fitting during the session. Closing search restores the ordinary tabs to their source placement. Ordinary native tabs keep an optimistic selection until the Web `selected` state catches up. Input events and application `value` updates continue across the bridge until search closes. The trigger's resolved SVG, accessibility label and the search icon are projected from Ionic, including `ion-icon name`.
 
 Native edits pass through Ionic's input handlers, preserving `ionInput` debounce, `ionChange`, `ionFocus`, `ionBlur`, and `ionClear`. Programmatic `value` changes do not emit `ionInput`; synchronous application corrections and stale native input are distinguished. Native editing owns marked text and the caret. Returning through the footer's close action retains the value and does not emit `ionCancel` or `ionClear`.
 

package/docs/vertical-bars.md

@@ -85,6 +85,8 @@ All fills (`default`, `clear`, `solid`, and `outline`) and Ionic colors follow t
 
 The rule applies to individual buttons and buttons inside `ion-buttons`, on ordinary pages and in the topmost full-width modal. Centered modals, menus, and popovers keep their own toolbar layout. Add `.ios-theme-horizontal-only` to a group or individual button to keep it horizontal. Placement is chosen when a routed page enters; changing an existing button's content or icon slot does not move it between the toolbar and rail until the page leaves and re-enters.
 
+A toolbar whose content has all moved into the rail collapses while projection is active. Toolbars containing a title, direct text, other content or a horizontal-only control remain visible. Removing projection restores the original toolbar.
+
 ### Choose button appearance
 
 `buttonProjection` and the local projection settings below are available in `1.2.0`.
@@ -100,7 +102,7 @@ For native vertical `ion-button` and `ion-menu-button` actions, choose who contr
 const rail = await enableVerticalControlArea({ buttonProjection: 'source' });
 ```
 
-Both `enableVerticalControlArea()` and `enableNativeUIShell()` accept the option. Use one runtime, and destroy it before restarting with different options. Either mode preserves actions, disabled state and grouping. These appearance settings do not affect horizontal controls, source elements or Web fallback clones, so compare the native appearance on supported iOS.
+Both `enableVerticalControlArea()` and `enableNativeUIShell()` accept the option. Use one runtime, and destroy it before restarting with different options. Either mode preserves actions, disabled state and grouping. Disabled icons use the native disabled appearance. These appearance settings do not affect horizontal controls, source elements or Web fallback clones, so compare the native appearance on supported iOS.
 
 **Migration from the experimental releases:** the default changes from source styling to `system`. Set `buttonProjection: 'source'` to retain the previous projection behavior.
 

package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellSearchController.swift

@@ -64,21 +64,10 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
     // Wire stays active+focused; local session drives chrome (idle / presented / focused).
     private enum Session: Equatable { case idle, presented, focused }
 
-    private final class IdleBarDelegate: NSObject, UITabBarDelegate {
-        var select: ((String) -> Void)?
-        func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
-            guard item.isEnabled, let id = item.accessibilityIdentifier else { return }
-            select?(id)
-        }
-    }
-
     let surface = ShellSearchHost()
-    /// Ordinary `UITabBar` chrome while searchable is registered but the session is idle.
-    /// Matches `ShellTabBar.fit` so Index/Album resting tabs do not jump.
-    private let idleBar = UITabBar()
-    private let idleBarDelegate = IdleBarDelegate()
-    /// Resting search trigger pinned to the Web FAB while `available && !active`.
-    private var searchTrigger: UIButton?
+    private var restingBarFrame: CGRect?
+    private var restingBarAnchor: ShellTabBar.Anchor?
+    private var fittingTabBar = false
     private let search = UISearchController(searchResultsController: nil)
     private let inputDelegate = ShellSearchInputDelegate()
     private var searchTab: UISearchTab!
@@ -88,8 +77,6 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
     private var closing = false
     private var editingSequence = 0
     private var valueVersion = -1
-    private var lastLayout = ""
-    private var layoutItems: [ShellItemContent] = []
     private var lockedWebFrame: CGRect? // frozen while search is active (width changes re-lock)
     private var session: Session = .idle
     private var focusWork: DispatchWorkItem?
@@ -109,14 +96,6 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
         delegate = self
         mode = .tabBar
         ShellTabBar.configureLayout(tabBar)
-        ShellTabBar.configureLayout(idleBar)
-        // Must not use self as idleBar.delegate — UITabBarController asserts item↔VC pairing.
-        idleBar.delegate = idleBarDelegate
-        idleBarDelegate.select = { [weak self] id in
-            self?.armPendingSelection(id)
-            self?.activate?(id)
-        }
-        idleBar.isHidden = true
         search.obscuresBackgroundDuringPresentation = false
         search.hidesNavigationBarDuringPresentation = false
         search.searchBar.delegate = self
@@ -206,10 +185,7 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
             self.pendingExpiryWork = nil
             guard let pending = self.pendingSelection, CFAbsoluteTimeGetCurrent() >= pending.until else { return }
             self.pendingSelection = nil
-            // No later apply: revert idle chrome + controller selection to the last DOM selected id.
-            if let item = self.idleBar.items?.first(where: { $0.accessibilityIdentifier == self.selectedID }) {
-                self.idleBar.selectedItem = item
-            }
+            // Revert to the last DOM selection if Ionic did not accept the action.
             if let selected = self.ordinary[self.selectedID], self.selectedTab !== selected {
                 self.selectedTab = selected
             }
@@ -244,7 +220,6 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
         parent.addChild(self)
         container.addSubview(surface)
         surface.addSubview(view)
-        if idleBar.superview !== surface { surface.addSubview(idleBar) }
         didMove(toParent: parent)
     }
 
@@ -254,9 +229,7 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
         clearPendingSelection()
         applySession(.idle, selectingSearchTab: false)
         willMove(toParent: nil)
-        idleBar.removeFromSuperview()
-        searchTrigger?.removeFromSuperview()
-        searchTrigger = nil
+        restingBarFrame = nil
         surface.removeFromSuperview()
         view.removeFromSuperview()
         removeFromParent()
@@ -270,18 +243,12 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
             editingSequence = 0
             valueVersion = -1
         }
-        let previousAvailable = self.configuration?.available
         let wasActive = self.configuration.map { $0.available && $0.active } ?? false
         self.configuration = configuration
         let available = configuration.available
         let active = available && configuration.active
         let wanted = wantedSession(active: active, focused: configuration.focused)
         let items = snapshot.items
-        let content = items.map(\.content)
-        if layoutItems != content {
-            layoutItems = content
-            lastLayout = ""
-        }
         let ids = items.map(\.id)
         for id in Array(ordinary.keys) where !ids.contains(id) { ordinary.removeValue(forKey: id) }
         for item in items {
@@ -304,10 +271,8 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
         searchTab.image = rendering.image(trigger.content)
         searchTab.isEnabled = !configuration.disabled
         let requested = ids.compactMap { ordinary[$0] } + (available ? [searchTab!] : [])
-        if !active, wasActive || tabs.isEmpty || tabs.map(\.identifier) != requested.map(\.identifier) {
-            // Leave / availability flips rebuild tabs (UISearchTab morph cleanup when leaving).
+        if !active, tabs.isEmpty || tabs.map(\.identifier) != requested.map(\.identifier) {
             tabs = requested
-            lastLayout = ""
         }
         for item in items {
             if let nativeItem = ordinary[item.id]?.viewController?.tabBarItem {
@@ -316,6 +281,7 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
                 ShellTabBar.applyBadge(item.content.badge, to: nativeItem, rendering: rendering)
             }
         }
+        searchTab.viewController?.tabBarItem.accessibilityLabel = trigger.content.accessibilityLabel
         let prominent = NSSelectorFromString("setProminentTabIdentifier:")
         if responds(to: prominent) { setValue(available ? searchTab.identifier : nil, forKey: "prominentTabIdentifier") }
         let field = configuration.field
@@ -334,7 +300,6 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
             inputDelegate.original = search.searchBar.searchTextField.delegate
             search.searchBar.searchTextField.delegate = inputDelegate
         }
-        let layout = "\(webFrame):\(barFrame):\(triggerFrame):\(available):\(snapshot.rtl)"
         // Resting keeps closing=true so hidden UISearchBar noise cannot emit; clear it while active.
         closing = !active
         surface.isHidden = false
@@ -344,17 +309,8 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
             if tabs.isEmpty || tabs.map(\.identifier) != requested.map(\.identifier) {
                 tabs = requested
             }
-            let reveal = {
-                self.idleBar.isHidden = true
-                self.searchTrigger?.isHidden = true
-                self.view.isHidden = false
-                self.view.frame = self.surface.bounds
-            }
-            if !wasActive {
-                UIView.transition(with: surface, duration: 0.35, options: [.transitionCrossDissolve, .beginFromCurrentState], animations: reveal)
-            } else {
-                reveal()
-            }
+            restingBarFrame = nil
+            view.frame = surface.bounds
             let nextLock = surface.bounds.isEmpty ? webFrame : surface.frame
             if let locked = lockedWebFrame, abs(locked.width - webFrame.width) > 0.5 {
                 // Rotation / size-class change: adopt the new width while still ignoring keyboard shrink.
@@ -370,51 +326,68 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
 
         surface.frame = webFrame
         view.semanticContentAttribute = snapshot.rtl ? .forceRightToLeft : .forceLeftToRight
-        idleBar.semanticContentAttribute = snapshot.rtl ? .forceRightToLeft : .forceLeftToRight
+        tabBar.semanticContentAttribute = snapshot.rtl ? .forceRightToLeft : .forceLeftToRight
+        tabBar.accessibilityIdentifier = snapshot.id
         if lockedWebFrame != nil {
             lockedWebFrame = nil
-            lastLayout = ""
         }
         applySession(.idle, selectingSearchTab: false)
 
-        // Resting chrome: ordinary UITabBar (+ FAB trigger when available). UISearchTab stays off-screen.
-        if idleBar.superview !== surface { surface.addSubview(idleBar) }
-        let localBar = surface.convert(barFrame, from: surface.superview)
-        let localTrigger = surface.convert(triggerFrame, from: surface.superview)
-        // Apply optimistic selection to the visible idle bar before reconciling the hidden controller.
-        ShellTabBar.update(idleBar, node: snapshot, rendering: rendering, pendingSelection: &pendingSelection)
+        view.frame = surface.bounds
         resolveOrdinarySelection(items, fallback: requested.first)
-        if !available {
-            searchTrigger?.removeFromSuperview()
-            searchTrigger = nil
-        } else {
-            let triggerButton = ShellButton.render(configuration.trigger.content, glass: true, existing: searchTrigger, rendering: rendering) { [weak self] id in
-                self?.activate?(id)
-            }
-            if searchTrigger !== triggerButton {
-                searchTrigger?.removeFromSuperview()
-                searchTrigger = triggerButton
-                surface.addSubview(triggerButton)
-            }
-            triggerButton.frame = localTrigger
-        }
+        restingBarFrame = surface.convert(barFrame, from: surface.superview)
+        restingBarAnchor = snapshot.tabBarAnchor
+        view.setNeedsLayout()
+        view.layoutIfNeeded()
+        return fitRestingTabBar()
+    }
 
-        let revealResting = {
-            self.view.isHidden = true
-            self.idleBar.isHidden = false
-            self.idleBar.overrideUserInterfaceStyle = snapshot.dark ? .dark : .light
-            self.searchTrigger?.isHidden = !available
-            self.searchTrigger?.overrideUserInterfaceStyle = snapshot.dark ? .dark : .light
-        }
-        let animateChrome = wasActive || (previousAvailable != nil && previousAvailable != available)
-        if animateChrome {
-            UIView.transition(with: surface, duration: 0.35, options: [.transitionCrossDissolve, .beginFromCurrentState], animations: revealResting)
-        } else {
-            revealResting()
-        }
-        if lastLayout != layout {
-            guard ShellTabBar.fit(idleBar, node: snapshot, bounds: localBar) else { return false }
-            lastLayout = layout
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        if session == .idle { _ = fitRestingTabBar() }
+    }
+
+    /// Match the ordinary tab platter to the source ion-tab-bar by resizing
+    /// the controller's view, so UIKit can keep managing its tab bar through
+    /// search expansion and dismissal.
+    private func fitRestingTabBar() -> Bool {
+        guard let bounds = restingBarFrame, !fittingTabBar else { return true }
+        fittingTabBar = true
+        defer { fittingTabBar = false }
+        tabBar.layoutIfNeeded()
+        for _ in 0..<2 {
+            let regions = ShellTabBar.contentViews(tabBar)
+            func controlCount(_ view: UIView) -> Int {
+                (view is UIControl ? 1 : 0) + view.subviews.reduce(0) { $0 + controlCount($1) }
+            }
+            // Ordinary tabs contain their item controls; Search contains one.
+            // For a single tab, UIKit places ordinary tabs at the leading edge.
+            let rtl = tabBar.effectiveUserInterfaceLayoutDirection == .rightToLeft
+            guard let region = regions.max(by: {
+                let lhs = controlCount($0), rhs = controlCount($1)
+                if lhs != rhs { return lhs < rhs }
+                return rtl ? $0.frame.midX < $1.frame.midX : $0.frame.midX > $1.frame.midX
+            }) else { return false }
+            let content = region.frame
+            let contents = regions.map { $0.frame }
+            let measured = tabBar.convert(content, to: surface)
+            let width = bounds.width - measured.width
+            let x = bounds.minX + (bounds.width - measured.width) * (restingBarAnchor?.x ?? 0) - measured.minX
+            let y = bounds.minY + (bounds.height - measured.height) * (restingBarAnchor?.y ?? 0) - measured.minY
+            // UIKit rounds the platter frame; a subpoint difference must not
+            // keep invalidating its layout during search transitions.
+            if abs(width) <= 0.5 && abs(x) <= 0.5 && abs(y) <= 0.5 { break }
+            var frame = view.frame
+            // The controller also contains the separate search button. Include
+            // that space in its width limit without enlarging capped tab groups.
+            let searchWidth = contents.filter { $0 != content }.reduce(CGFloat(0)) { $0 + $1.width }
+            frame.size.width = min(frame.width + width, surface.bounds.width + searchWidth)
+            frame.origin.x += x
+            frame.origin.y += y
+            if abs(frame.width - view.frame.width) <= 0.5 && abs(x) <= 0.5 && abs(y) <= 0.5 { break }
+            view.frame = frame
+            view.setNeedsLayout()
+            view.layoutIfNeeded()
         }
         return true
     }
@@ -422,6 +395,7 @@ final class ShellSearchController: UITabBarController, UITabBarControllerDelegat
     func tabBarController(_ tabBarController: UITabBarController, shouldSelectTab tab: UITab) -> Bool {
         guard let configuration else { return false }
         if tab === searchTab {
+            restingBarFrame = nil
             clearPendingSelection()
             activate?(configuration.trigger.id)
             return true

package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellTabBar.swift

@@ -203,13 +203,19 @@ enum ShellTabBar {
     }
 
     private static func contentFrame(_ tabBar: UITabBar) -> CGRect? {
+        contentFrames(tabBar).reduce(nil) { (result: CGRect?, frame) in result.map { $0.union(frame) } ?? frame }
+    }
+
+    static func contentFrames(_ tabBar: UITabBar) -> [CGRect] {
+        contentViews(tabBar).map { $0.frame }
+    }
+
+    static func contentViews(_ tabBar: UITabBar) -> [UIView] {
         func containsControl(_ view: UIView) -> Bool {
             view is UIControl || view.subviews.contains(where: containsControl)
         }
         return tabBar.subviews
             .filter { !$0.isHidden && $0.alpha > 0 && containsControl($0) }
-            .map { $0.frame }
-            .filter { !$0.isEmpty }
-            .reduce(nil) { (result: CGRect?, frame) in result.map { $0.union(frame) } ?? frame }
+            .filter { !$0.frame.isEmpty }
     }
 }

package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellVerticalBars.swift

@@ -45,9 +45,11 @@ final class ShellVerticalBarsModel: ObservableObject {
     func apply(_ controls: [ShellControl], rendering: ShellRendering,
                now: CFAbsoluteTime = CFAbsoluteTimeGetCurrent()) {
         func item(_ source: ShellItem) -> Item {
-            Item(id: source.id, label: source.content.label,
+            let image = rendering.image(source.content)
+            return Item(id: source.id, label: source.content.label,
                  accessibilityLabel: source.content.accessibilityLabel,
-                 image: rendering.image(source.content),
+                 // UIKit toolbar extraction uses the UIImage's rendering mode.
+                 image: source.content.disabled ? image?.withRenderingMode(.alwaysTemplate) : image,
                  clear: source.content.buttonFill == .clear,
                  background: source.content.backgroundColor.map { Color(uiColor: rendering.color($0)) },
                  borderColor: source.content.borderColor.map { Color(uiColor: rendering.color($0)) },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/native/components/index.ts

@@ -6,7 +6,7 @@ import * as menuButton from './ion-menu-button';
 import * as tabBar from './ion-tab-bar';
 import * as segment from './ion-segment';
 import * as fab from './ion-fab';
-import { isDisabledButtonGroupChild, isVerticalBarsSource, visible } from '../shared/dom';
+import { isDisabledButtonGroupChild, isVerticalBarsSource, visible, withoutPrehide } from '../shared/dom';
 import type { Candidate, Identify } from '../shared/candidate';
 
 // Static composition only. Each component declares its own tag, discovery and reader.
@@ -48,5 +48,6 @@ export const readCandidate = (element: HTMLElement, id: Identify, options: Verti
   )
     return;
   if (element.contains(element.ownerDocument.activeElement)) return;
-  return components.find((component) => component.tag === element.localName)?.read(element, id, options);
+  // Read icon and control geometry before restoring prehide, which can collapse the toolbar.
+  return withoutPrehide(element, () => components.find((component) => component.tag === element.localName)?.read(element, id, options));
 };

package/src/native/prehide.ts

@@ -1,5 +1,5 @@
 import { modalUsesVerticalBars } from './shared/modal';
-import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
+import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components/index.js';
 import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
 import {
   childElements,
@@ -16,6 +16,7 @@ import {
   prehideRootClass,
   rejectedClass,
   setVerticalBarsPlacement,
+  syncToolbarText,
 } from './shared/dom';
 
 const overlays = 'ion-menu, ion-popover';
@@ -133,6 +134,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
     scopes.set(scope, owned);
   };
   const reconcile = () => {
+    syncToolbarText(doc);
     const verticalBars = root();
     if (!verticalBars) {
       Array.from(scopes.keys()).forEach(release);
@@ -200,6 +202,8 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
   doc.defaultView?.addEventListener('nativeUIShellRefresh', reconcile, { signal: listeners.signal });
   reconcile();
   const mutationRelevant = (record: MutationRecord) => {
+    if (record.type === 'characterData') return record.target.parentElement?.matches('ion-toolbar') === true;
+    if (record.type === 'childList' && asElement(record.target)?.matches('ion-toolbar')) return true;
     if (record.type === 'childList')
       return [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some(
         (node) =>
@@ -228,6 +232,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
   observer.observe(doc.documentElement, {
     subtree: true,
     childList: true,
+    characterData: true,
     attributes: true,
     attributeOldValue: true,
     attributeFilter: ['class', 'data-shell', 'hidden', 'inert', 'icon', 'color'],

package/src/native/runtime.ts

@@ -1,6 +1,6 @@
 import { inVerticalBarsSurface, topModal, modalUsesVerticalBars, modalVerticalBarFrame } from './shared/modal';
 import type { PluginListenerHandle } from '@capacitor/core';
-import { LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE } from '@ionic/core';
+import { LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE } from '@ionic/core/components/index.js';
 import { VERTICAL_BARS_TRANSITION_CANCELED, getNativeSearchBindings, setNativeUIShellIntegration } from '../native-integration';
 import { createSearchSupport } from './components/searchable-tabs';
 import type {
@@ -18,6 +18,8 @@ import {
   isVerticalBarsSource,
   preferredVerticalBarsBack,
   marker,
+  syncToolbarText,
+  toolbarTextMarker,
   prehideOnlyMutation,
   rejectedClass,
   unprojected,
@@ -299,6 +301,7 @@ export const createRuntime = async (
     frame = 0;
     dirty = false;
     pending = true;
+    syncToolbarText(doc);
     handoffInstant = tabSwitchHandoff || handoffAcrossPending || modalPresentHandoff || win.performance.now() < handoffUntil;
     modalPresentHandoff = false;
     try {
@@ -466,6 +469,7 @@ export const createRuntime = async (
       records.some(
         (record) =>
           record.attributeName !== marker &&
+          record.attributeName !== toolbarTextMarker &&
           record.attributeName !== fadeMarker &&
           !prehideOnlyMutation(record) &&
           !(record.attributeName === 'style' && measuringPointerPages.has(record.target as HTMLElement)) &&

package/src/native/shared/dom.ts

@@ -193,6 +193,20 @@ export const isVerticalBarsToolbarGroup = (element: HTMLElement): boolean => {
   );
 };
 
+export const toolbarTextMarker = 'data-native-ui-shell-toolbar-text';
+
+export const syncToolbarText = (doc: Document): void => {
+  for (const toolbar of Array.from(
+    doc.querySelectorAll<HTMLElement>(`ion-app.ios-theme-vertical-bars ion-toolbar, ion-toolbar[${toolbarTextMarker}]`),
+  )) {
+    toolbar.toggleAttribute(
+      toolbarTextMarker,
+      !!toolbar.closest('ion-app.ios-theme-vertical-bars') &&
+        childNodesOf(toolbar).some((node) => node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim()),
+    );
+  }
+};
+
 export const activateProjectedElement = (element: HTMLElement): void => {
   const target = element.matches('ion-button, ion-back-button, ion-menu-button')
     ? element.shadowRoot?.querySelector<HTMLElement>('[part~="native"]')