@rdlabo/ionic-theme-ios27 1.2.1 → 2.0.0-beta.pr303.shaf4f5ca16816f

package/dist/tab-bar-searchable/dismiss-button.js

@@ -13,8 +13,58 @@ const addSearchDismissButton = (footer) => {
 	button.fill = "default";
 	button.type = "button";
 	button.setAttribute("aria-label", original.getAttribute("aria-label") ?? "Close");
-	button.addEventListener("pointerdown", (event) => event.preventDefault());
-	button.addEventListener("click", () => original.click());
+	const doc = footer.ownerDocument;
+	let pointer;
+	let pointerTarget;
+	const actionTarget = (event) => {
+		const target = event.target instanceof Element ? event.target : void 0;
+		if (target?.closest("ion-button") === button) return button;
+		const clear = target?.closest("ion-searchbar .searchbar-clear-button");
+		return clear && footer.contains(clear) ? clear : void 0;
+	};
+	const syncEditing = () => {
+		if (!footer.contains(doc.activeElement)) footer.classList.remove("ios-theme-searchable-editing");
+	};
+	const releasePointer = () => {
+		pointer = void 0;
+		pointerTarget = void 0;
+		doc.removeEventListener("pointerup", finishPointer, true);
+		doc.removeEventListener("pointercancel", cancelPointer, true);
+		doc.defaultView?.removeEventListener("blur", releasePointer);
+		syncEditing();
+	};
+	const finishPointer = (event) => {
+		if (event.pointerId !== pointer || !pointerTarget) return;
+		const target = pointerTarget;
+		const rect = target.getBoundingClientRect();
+		const inside = rect.width > 0 && rect.height > 0 && event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+		releasePointer();
+		if (inside) (target === button ? original : target).click();
+	};
+	const cancelPointer = (event) => {
+		if (event.pointerId === pointer) releasePointer();
+	};
+	footer.addEventListener("pointerdown", (event) => {
+		const target = actionTarget(event);
+		if (!target || !event.isPrimary || event.button !== 0) return;
+		event.preventDefault();
+		pointer = event.pointerId;
+		pointerTarget = target;
+		doc.addEventListener("pointerup", finishPointer, true);
+		doc.addEventListener("pointercancel", cancelPointer, true);
+		doc.defaultView?.addEventListener("blur", releasePointer);
+	}, true);
+	footer.addEventListener("click", (event) => {
+		if (event.detail !== 0 && actionTarget(event)) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	}, true);
+	button.addEventListener("click", (event) => {
+		if (event.detail !== 0) return;
+		releasePointer();
+		original.click();
+	});
 	const icon = footer.ownerDocument.createElement("ion-icon");
 	icon.slot = "icon-only";
 	icon.icon = close;
@@ -24,7 +74,7 @@ const addSearchDismissButton = (footer) => {
 		if (event.target.closest("ion-searchbar")) footer.classList.add("ios-theme-searchable-editing");
 	});
 	footer.addEventListener("focusout", (event) => {
-		if (!footer.contains(event.relatedTarget)) footer.classList.remove("ios-theme-searchable-editing");
+		if (pointer === void 0 && !footer.contains(event.relatedTarget)) footer.classList.remove("ios-theme-searchable-editing");
 	});
 	original.closest("ion-toolbar")?.append(buttons);
 };

package/dist/tab-bar-searchable/dismiss-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.js","names":[],"sources":["../../src/tab-bar-searchable/dismiss-button.ts"],"sourcesContent":["import { close } from 'ionicons/icons';\n\n/** Keep the application's original dismissal handler for the focused search layout. */\nexport const addSearchDismissButton = (footer: HTMLElement): void => {\n  if (footer.querySelector('.ios-theme-searchable-dismiss')) return;\n  const original = footer.querySelector<HTMLElement>('ion-buttons[slot=start] ion-button');\n  if (!original) return;\n  const buttons = footer.ownerDocument.createElement('ion-buttons');\n  buttons.slot = 'end';\n  // Remain hidden when the full theme is absent or opted out.\n  buttons.style.display = 'none';\n  buttons.classList.add('ios-theme-searchable-dismiss', 'ios-theme-horizontal-only');\n  const button = footer.ownerDocument.createElement('ion-button');\n  button.fill = 'default';\n  button.type = 'button';\n  button.setAttribute('aria-label', original.getAttribute('aria-label') ?? 'Close');\n  // Keep the field focused until click; blur would hide this button before dismissal.\n  button.addEventListener('pointerdown', (event) => event.preventDefault());\n  button.addEventListener('click', () => original.click());\n  const icon = footer.ownerDocument.createElement('ion-icon');\n  icon.slot = 'icon-only';\n  icon.icon = close;\n  button.append(icon);\n  buttons.append(button);\n  // Keep the editing layout while focus moves from clear to the slotted close button.\n  footer.addEventListener('focusin', (event) => {\n    if ((event.target as HTMLElement).closest('ion-searchbar')) footer.classList.add('ios-theme-searchable-editing');\n  });\n  footer.addEventListener('focusout', (event) => {\n    if (!footer.contains(event.relatedTarget as Node | null)) footer.classList.remove('ios-theme-searchable-editing');\n  });\n  original.closest('ion-toolbar')?.append(buttons);\n};\n"],"mappings":";;;AAGA,MAAa,0BAA0B,WAA8B;CACnE,IAAI,OAAO,cAAc,+BAA+B,GAAG;CAC3D,MAAM,WAAW,OAAO,cAA2B,oCAAoC;CACvF,IAAI,CAAC,UAAU;CACf,MAAM,UAAU,OAAO,cAAc,cAAc,aAAa;CAChE,QAAQ,OAAO;CAEf,QAAQ,MAAM,UAAU;CACxB,QAAQ,UAAU,IAAI,gCAAgC,2BAA2B;CACjF,MAAM,SAAS,OAAO,cAAc,cAAc,YAAY;CAC9D,OAAO,OAAO;CACd,OAAO,OAAO;CACd,OAAO,aAAa,cAAc,SAAS,aAAa,YAAY,KAAK,OAAO;CAEhF,OAAO,iBAAiB,gBAAgB,UAAU,MAAM,eAAe,CAAC;CACxE,OAAO,iBAAiB,eAAe,SAAS,MAAM,CAAC;CACvD,MAAM,OAAO,OAAO,cAAc,cAAc,UAAU;CAC1D,KAAK,OAAO;CACZ,KAAK,OAAO;CACZ,OAAO,OAAO,IAAI;CAClB,QAAQ,OAAO,MAAM;CAErB,OAAO,iBAAiB,YAAY,UAAU;EAC5C,IAAK,MAAM,OAAuB,QAAQ,eAAe,GAAG,OAAO,UAAU,IAAI,8BAA8B;CACjH,CAAC;CACD,OAAO,iBAAiB,aAAa,UAAU;EAC7C,IAAI,CAAC,OAAO,SAAS,MAAM,aAA4B,GAAG,OAAO,UAAU,OAAO,8BAA8B;CAClH,CAAC;CACD,SAAS,QAAQ,aAAa,CAAC,EAAE,OAAO,OAAO;AACjD"}
+{"version":3,"file":"dismiss-button.js","names":[],"sources":["../../src/tab-bar-searchable/dismiss-button.ts"],"sourcesContent":["import { close } from 'ionicons/icons';\n\n/** Keep the application's original dismissal handler for the focused search layout. */\nexport const addSearchDismissButton = (footer: HTMLElement): void => {\n  if (footer.querySelector('.ios-theme-searchable-dismiss')) return;\n  const original = footer.querySelector<HTMLElement>('ion-buttons[slot=start] ion-button');\n  if (!original) return;\n  const buttons = footer.ownerDocument.createElement('ion-buttons');\n  buttons.slot = 'end';\n  // Remain hidden when the full theme is absent or opted out.\n  buttons.style.display = 'none';\n  buttons.classList.add('ios-theme-searchable-dismiss', 'ios-theme-horizontal-only');\n  const button = footer.ownerDocument.createElement('ion-button');\n  button.fill = 'default';\n  button.type = 'button';\n  button.setAttribute('aria-label', original.getAttribute('aria-label') ?? 'Close');\n  // WebKit can blur the field between pointerup and click despite preventDefault.\n  // Complete pointer activation on release before blur can remove the button.\n  const doc = footer.ownerDocument;\n  let pointer: number | undefined;\n  let pointerTarget: HTMLElement | undefined;\n  const actionTarget = (event: Event): HTMLElement | undefined => {\n    const target = event.target instanceof Element ? event.target : undefined;\n    if (target?.closest('ion-button') === button) return button;\n    const clear = target?.closest<HTMLElement>('ion-searchbar .searchbar-clear-button');\n    return clear && footer.contains(clear) ? clear : undefined;\n  };\n  const syncEditing = () => {\n    if (!footer.contains(doc.activeElement)) footer.classList.remove('ios-theme-searchable-editing');\n  };\n  const releasePointer = () => {\n    pointer = undefined;\n    pointerTarget = undefined;\n    doc.removeEventListener('pointerup', finishPointer, true);\n    doc.removeEventListener('pointercancel', cancelPointer, true);\n    doc.defaultView?.removeEventListener('blur', releasePointer);\n    syncEditing();\n  };\n  const finishPointer = (event: PointerEvent) => {\n    if (event.pointerId !== pointer || !pointerTarget) return;\n    const target = pointerTarget;\n    const rect = target.getBoundingClientRect();\n    const inside =\n      rect.width > 0 &&\n      rect.height > 0 &&\n      event.clientX >= rect.left &&\n      event.clientX <= rect.right &&\n      event.clientY >= rect.top &&\n      event.clientY <= rect.bottom;\n    releasePointer();\n    if (inside) (target === button ? original : target).click();\n  };\n  const cancelPointer = (event: PointerEvent) => {\n    if (event.pointerId === pointer) releasePointer();\n  };\n  footer.addEventListener(\n    'pointerdown',\n    (event) => {\n      const target = actionTarget(event);\n      if (!target || !event.isPrimary || event.button !== 0) return;\n      event.preventDefault();\n      pointer = event.pointerId;\n      pointerTarget = target;\n      doc.addEventListener('pointerup', finishPointer, true);\n      doc.addEventListener('pointercancel', cancelPointer, true);\n      doc.defaultView?.addEventListener('blur', releasePointer);\n    },\n    true,\n  );\n  // Capture before Ionic's clear handler. Our programmatic click (detail 0) still\n  // invokes its existing ionClear/input/refocus behavior, including after hydration.\n  footer.addEventListener(\n    'click',\n    (event) => {\n      if (event.detail !== 0 && actionTarget(event)) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    true,\n  );\n  button.addEventListener('click', (event) => {\n    // Pointer release already invoked the action. Keyboard/AT activation has no pointer click count.\n    if (event.detail !== 0) return;\n    releasePointer();\n    original.click();\n  });\n  const icon = footer.ownerDocument.createElement('ion-icon');\n  icon.slot = 'icon-only';\n  icon.icon = close;\n  button.append(icon);\n  buttons.append(button);\n  // Keep the editing layout while focus moves from clear to the slotted close button.\n  footer.addEventListener('focusin', (event) => {\n    if ((event.target as HTMLElement).closest('ion-searchbar')) footer.classList.add('ios-theme-searchable-editing');\n  });\n  footer.addEventListener('focusout', (event) => {\n    if (pointer === undefined && !footer.contains(event.relatedTarget as Node | null))\n      footer.classList.remove('ios-theme-searchable-editing');\n  });\n  original.closest('ion-toolbar')?.append(buttons);\n};\n"],"mappings":";;;AAGA,MAAa,0BAA0B,WAA8B;CACnE,IAAI,OAAO,cAAc,+BAA+B,GAAG;CAC3D,MAAM,WAAW,OAAO,cAA2B,oCAAoC;CACvF,IAAI,CAAC,UAAU;CACf,MAAM,UAAU,OAAO,cAAc,cAAc,aAAa;CAChE,QAAQ,OAAO;CAEf,QAAQ,MAAM,UAAU;CACxB,QAAQ,UAAU,IAAI,gCAAgC,2BAA2B;CACjF,MAAM,SAAS,OAAO,cAAc,cAAc,YAAY;CAC9D,OAAO,OAAO;CACd,OAAO,OAAO;CACd,OAAO,aAAa,cAAc,SAAS,aAAa,YAAY,KAAK,OAAO;CAGhF,MAAM,MAAM,OAAO;CACnB,IAAI;CACJ,IAAI;CACJ,MAAM,gBAAgB,UAA0C;EAC9D,MAAM,SAAS,MAAM,kBAAkB,UAAU,MAAM,SAAS,KAAA;EAChE,IAAI,QAAQ,QAAQ,YAAY,MAAM,QAAQ,OAAO;EACrD,MAAM,QAAQ,QAAQ,QAAqB,uCAAuC;EAClF,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,QAAQ,KAAA;CACnD;CACA,MAAM,oBAAoB;EACxB,IAAI,CAAC,OAAO,SAAS,IAAI,aAAa,GAAG,OAAO,UAAU,OAAO,8BAA8B;CACjG;CACA,MAAM,uBAAuB;EAC3B,UAAU,KAAA;EACV,gBAAgB,KAAA;EAChB,IAAI,oBAAoB,aAAa,eAAe,IAAI;EACxD,IAAI,oBAAoB,iBAAiB,eAAe,IAAI;EAC5D,IAAI,aAAa,oBAAoB,QAAQ,cAAc;EAC3D,YAAY;CACd;CACA,MAAM,iBAAiB,UAAwB;EAC7C,IAAI,MAAM,cAAc,WAAW,CAAC,eAAe;EACnD,MAAM,SAAS;EACf,MAAM,OAAO,OAAO,sBAAsB;EAC1C,MAAM,SACJ,KAAK,QAAQ,KACb,KAAK,SAAS,KACd,MAAM,WAAW,KAAK,QACtB,MAAM,WAAW,KAAK,SACtB,MAAM,WAAW,KAAK,OACtB,MAAM,WAAW,KAAK;EACxB,eAAe;EACf,IAAI,QAAQ,CAAC,WAAW,SAAS,WAAW,OAAA,CAAQ,MAAM;CAC5D;CACA,MAAM,iBAAiB,UAAwB;EAC7C,IAAI,MAAM,cAAc,SAAS,eAAe;CAClD;CACA,OAAO,iBACL,gBACC,UAAU;EACT,MAAM,SAAS,aAAa,KAAK;EACjC,IAAI,CAAC,UAAU,CAAC,MAAM,aAAa,MAAM,WAAW,GAAG;EACvD,MAAM,eAAe;EACrB,UAAU,MAAM;EAChB,gBAAgB;EAChB,IAAI,iBAAiB,aAAa,eAAe,IAAI;EACrD,IAAI,iBAAiB,iBAAiB,eAAe,IAAI;EACzD,IAAI,aAAa,iBAAiB,QAAQ,cAAc;CAC1D,GACA,IACF;CAGA,OAAO,iBACL,UACC,UAAU;EACT,IAAI,MAAM,WAAW,KAAK,aAAa,KAAK,GAAG;GAC7C,MAAM,eAAe;GACrB,MAAM,gBAAgB;EACxB;CACF,GACA,IACF;CACA,OAAO,iBAAiB,UAAU,UAAU;EAE1C,IAAI,MAAM,WAAW,GAAG;EACxB,eAAe;EACf,SAAS,MAAM;CACjB,CAAC;CACD,MAAM,OAAO,OAAO,cAAc,cAAc,UAAU;CAC1D,KAAK,OAAO;CACZ,KAAK,OAAO;CACZ,OAAO,OAAO,IAAI;CAClB,QAAQ,OAAO,MAAM;CAErB,OAAO,iBAAiB,YAAY,UAAU;EAC5C,IAAK,MAAM,OAAuB,QAAQ,eAAe,GAAG,OAAO,UAAU,IAAI,8BAA8B;CACjH,CAAC;CACD,OAAO,iBAAiB,aAAa,UAAU;EAC7C,IAAI,YAAY,KAAA,KAAa,CAAC,OAAO,SAAS,MAAM,aAA4B,GAC9E,OAAO,UAAU,OAAO,8BAA8B;CAC1D,CAAC;CACD,SAAS,QAAQ,aAAa,CAAC,EAAE,OAAO,OAAO;AACjD"}

package/dist/tab-bar-searchable/index.js

@@ -1,8 +1,8 @@
-import { isNativeUIShell, registerNativeSearch, requestNativeSearch, suspendNativeUIShell } from "../native-integration/index.js";
 import { addSearchDismissButton } from "./dismiss-button.js";
 import { createCloseButtonsAnimation, createEffectAnimation, createFabButtonAnimation, createSearchContainerAnimation, createTabBarAnimation } from "./animations/enter.js";
 import { createReverseCloseButtonsAnimation, createReverseEffectAnimation, createReverseFabButtonAnimation, createReverseSearchContainerAnimation, createReverseTabBarAnimation } from "./animations/leave.js";
 import { createAnimation } from "@ionic/core/components/index.js";
+import { isNativeUI, registerNativeSearch, requestNativeSearch, suspendNativeUI } from "@rdlabo/capacitor-native-ui/integration";
 import { ANIMATION_DELAY_BASE, ANIMATION_DURATION, ANIMATION_EASING, TabBarSearchableType, TabBarSearchableType as TabBarSearchableType$1, getElementReferences, getElementSizes, throwErrorByFailedClickElement } from "@rdlabo/ionic-theme-utils";
 //#region src/tab-bar-searchable/index.ts
 /**
@@ -34,6 +34,7 @@ const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
 	const nativeSearch = registerNativeSearch(ionTabBar, ionFabButton, ionFooter);
 	let searchableEventCache;
 	let resumeNative;
+	let restoreTrigger;
 	let nativeEntry = false;
 	let nativeRequest = 0;
 	let verticalSearch = false;
@@ -44,7 +45,7 @@ const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
 		if (type === TabBarSearchableType$1.Leave && !nativeEntry && !searchableEventCache) throw new Error("TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter");
 		const hadNativeEntry = nativeEntry;
 		const request = ++nativeRequest;
-		if (type === TabBarSearchableType$1.Enter) nativeEntry || (nativeEntry = isNativeUIShell(ionFooter));
+		if (type === TabBarSearchableType$1.Enter) nativeEntry || (nativeEntry = isNativeUI(ionFooter));
 		const accepted = await requestNativeSearch(nativeSearch, type === TabBarSearchableType$1.Enter);
 		if (request !== nativeRequest) return;
 		if (accepted) {
@@ -67,23 +68,37 @@ const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
 				});
 				keepTabsVisible();
 			}
-			resumeNative ?? (resumeNative = await suspendNativeUIShell([
+			resumeNative ?? (resumeNative = await suspendNativeUI([
 				...verticalSearch ? [] : [ionTabBar],
 				ionFooter,
 				ionFabButton.closest("ion-fab") ?? ionFabButton
 			]));
 			try {
 				searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter, verticalSearch);
+				if (!restoreTrigger) {
+					const trigger = ionFabButton.closest("ion-fab") ?? ionFabButton;
+					const visibility = trigger.style.getPropertyValue("visibility");
+					const priority = trigger.style.getPropertyPriority("visibility");
+					restoreTrigger = () => {
+						if (visibility) trigger.style.setProperty("visibility", visibility, priority);
+						else trigger.style.removeProperty("visibility");
+						restoreTrigger = void 0;
+					};
+					trigger.style.setProperty("visibility", "hidden", "important");
+				}
 			} catch (error) {
+				restoreTrigger?.();
 				tabVisibilityObserver?.disconnect();
 				resumeNative();
 				resumeNative = void 0;
 				throw error;
 			}
 		} else if (searchableEventCache !== void 0) try {
+			restoreTrigger?.();
 			await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch);
 			searchableEventCache = void 0;
 		} finally {
+			restoreTrigger?.();
 			tabVisibilityObserver?.disconnect();
 			resumeNative?.();
 			resumeNative = void 0;

package/dist/tab-bar-searchable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TabBarSearchableType"],"sources":["../../src/tab-bar-searchable/index.ts"],"sourcesContent":["import { createAnimation } from '@ionic/core/components/index.js';\nimport { addSearchDismissButton } from './dismiss-button';\nimport {\n  ANIMATION_DELAY_BASE,\n  ANIMATION_DURATION,\n  ANIMATION_EASING,\n  getElementReferences,\n  getElementSizes,\n  throwErrorByFailedClickElement,\n  type SearchableEventCache,\n  type TabBarSearchableFunction,\n  TabBarSearchableType,\n} from '@rdlabo/ionic-theme-utils';\nimport { isNativeUIShell, registerNativeSearch, requestNativeSearch, suspendNativeUIShell } from '../native-integration';\nimport {\n  createCloseButtonsAnimation,\n  createEffectAnimation,\n  createFabButtonAnimation,\n  createSearchContainerAnimation,\n  createTabBarAnimation,\n} from './animations/enter';\nimport {\n  createReverseCloseButtonsAnimation,\n  createReverseEffectAnimation,\n  createReverseFabButtonAnimation,\n  createReverseSearchContainerAnimation,\n  createReverseTabBarAnimation,\n} from './animations/leave';\n\nexport {\n  TabBarSearchableType,\n  type TabBarSearchableFunction,\n  type SearchableEventCache,\n  type ElementSizes,\n  type ElementReferences,\n} from '@rdlabo/ionic-theme-utils';\n\n/**\n *  <ion-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n *   <ion-fab-button (click)=\"present($event)\">\n *     <ion-icon name=\"search\"></ion-icon>\n *   </ion-fab-button>\n *  </ion-fab>\n *  <ion-footer [translucent]=\"true\">\n *   <ion-toolbar>\n *     <ion-buttons slot=\"start\">\n *     <!-- ion-icon does not need `name` attribute. -->\n *       <ion-button fill=\"default\"><ion-icon slot=\"icon-only\"></ion-icon>\n *     </ion-button>\n *     </ion-buttons>\n *     <!-- User set `ionChange` or other events. -->\n *     <ion-searchbar aria-label=\"Search\" (ionChange)=\"example($event)\"></ion-searchbar>\n *   </ion-toolbar>\n *  </ion-footer>\n **/\n\nexport const attachTabBarSearchable = (\n  ionTabBar: HTMLElement,\n  ionFabButton: HTMLElement,\n  ionFooter: HTMLElement,\n): TabBarSearchableFunction => {\n  if (!ionTabBar || !ionFabButton || !ionFooter) {\n    throw new Error('TabBarSearchable should be defined with props');\n  }\n  // Initialize\n  ionFooter.classList.add('ios-theme-searchable');\n  ionFabButton.closest('ion-fab')?.classList.add('ios-theme-searchable-trigger');\n  addSearchDismissButton(ionFooter);\n  ionFooter.style.pointerEvents = 'none';\n  ionFooter.style.opacity = '0';\n  // Search dismissal belongs beside the Web search field, never in the vertical rail.\n  ionFooter.querySelector('ion-buttons[slot=start]')?.classList.add('ios-theme-horizontal-only');\n  const nativeSearch = registerNativeSearch(ionTabBar, ionFabButton, ionFooter);\n\n  // Saved Params\n  let searchableEventCache: SearchableEventCache | undefined;\n  let resumeNative: (() => void) | undefined;\n  // Leave is valid both while native Enter awaits its ack and after it completes.\n  let nativeEntry = false;\n  let nativeRequest = 0;\n  let verticalSearch = false;\n  let tabVisibilityObserver: MutationObserver | undefined;\n\n  return async (event: Event, type: TabBarSearchableType) => {\n    const selector = type === TabBarSearchableType.Enter ? 'ion-fab-button' : 'ion-buttons[slot=start] ion-button';\n    if (!(event.target as HTMLElement)?.closest(selector)) throw throwErrorByFailedClickElement(selector);\n    if (type === TabBarSearchableType.Leave && !nativeEntry && !searchableEventCache)\n      throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');\n    const hadNativeEntry = nativeEntry;\n    const request = ++nativeRequest;\n    if (type === TabBarSearchableType.Enter) nativeEntry ||= isNativeUIShell(ionFooter);\n    const accepted = await requestNativeSearch(nativeSearch, type === TabBarSearchableType.Enter);\n    if (request !== nativeRequest) return;\n    if (accepted) {\n      nativeEntry = type === TabBarSearchableType.Enter;\n      return;\n    }\n    nativeEntry = false;\n    if (type === TabBarSearchableType.Leave && hadNativeEntry) {\n      // Forced native retirement already restored the closed Web presentation.\n      return;\n    }\n    if (type === TabBarSearchableType.Enter) {\n      verticalSearch = !!ionTabBar.closest('ion-app.ios-theme-vertical-bars');\n      if (verticalSearch) {\n        // Ionic hides horizontal tabs when the keyboard opens; keep this rail available.\n        const keepTabsVisible = () => {\n          if (ionTabBar.classList.contains('tab-bar-hidden') && ionTabBar.closest('ion-app.ios-theme-vertical-bars')) {\n            ionTabBar.classList.remove('tab-bar-hidden');\n          }\n        };\n        tabVisibilityObserver?.disconnect();\n        tabVisibilityObserver = new MutationObserver(keepTabsVisible);\n        tabVisibilityObserver.observe(ionTabBar, { attributes: true, attributeFilter: ['class'] });\n        keepTabsVisible();\n      }\n      resumeNative ??= await suspendNativeUIShell([\n        ...(verticalSearch ? [] : [ionTabBar]),\n        ionFooter,\n        ionFabButton.closest('ion-fab') ?? ionFabButton,\n      ]);\n      try {\n        searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter, verticalSearch);\n      } catch (error) {\n        tabVisibilityObserver?.disconnect();\n        resumeNative();\n        resumeNative = undefined;\n        throw error;\n      }\n    } else if (searchableEventCache !== undefined) {\n      try {\n        await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch);\n        searchableEventCache = undefined;\n      } finally {\n        tabVisibilityObserver?.disconnect();\n        resumeNative?.();\n        resumeNative = undefined;\n      }\n    } else {\n      throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');\n    }\n  };\n};\n\nconst enterEvent = async (\n  event: Event,\n  ionTabBar: HTMLElement,\n  ionFabButton: HTMLElement,\n  ionFooter: HTMLElement,\n  verticalSearch: boolean,\n): Promise<SearchableEventCache> => {\n  if (!(event.target as HTMLElement)?.closest('ion-fab-button')) {\n    throw throwErrorByFailedClickElement('ion-fab-button');\n  }\n\n  const references = getElementReferences(ionTabBar, ionFooter);\n  const sizes = getElementSizes(ionTabBar, ionFabButton, references);\n  const colorSelected = references.selectedTabButton\n    ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()\n    : '';\n\n  if (verticalSearch) references.closeButtonIcon.setAttribute('name', 'close');\n  const tabAnimations = verticalSearch\n    ? []\n    : [createTabBarAnimation(ionTabBar, references, sizes), createEffectAnimation(references, sizes)];\n  const searchContainerAnimation = createSearchContainerAnimation(references, sizes);\n  const closeButtonsAnimation = createCloseButtonsAnimation(references);\n  const fabButtonAnimation = createFabButtonAnimation(ionFabButton);\n\n  await createAnimation()\n    .delay(ANIMATION_DELAY_BASE)\n    .duration(ANIMATION_DURATION)\n    .easing(ANIMATION_EASING)\n    .addElement(ionFooter)\n    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))\n    .fromTo('opacity', '0.8', '1')\n    .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])\n    .play();\n\n  return {\n    elementSizes: sizes,\n    colorSelected,\n  };\n};\n\nconst leaveEvent = async (\n  event: Event,\n  searchableEventCache: SearchableEventCache,\n  ionTabBar: HTMLElement,\n  ionFabButton: HTMLElement,\n  ionFooter: HTMLElement,\n  verticalSearch: boolean,\n): Promise<void> => {\n  if (!(event.target as HTMLElement)?.closest('ion-buttons[slot=start] ion-button')) {\n    throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');\n  }\n\n  const focused = ionFooter.ownerDocument.activeElement;\n  if (focused instanceof HTMLElement && ionFooter.contains(focused)) focused.blur();\n  const references = getElementReferences(ionTabBar, ionFooter);\n\n  const tabAnimations = verticalSearch\n    ? []\n    : [\n        createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes),\n        createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected),\n      ];\n  const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);\n  const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);\n  const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);\n\n  await createAnimation()\n    .delay(ANIMATION_DELAY_BASE)\n    .duration(ANIMATION_DURATION)\n    .easing(ANIMATION_EASING)\n    .addElement(ionFooter)\n    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))\n    .fromTo('opacity', '1', '0')\n    .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])\n    .play();\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,MAAa,0BACX,WACA,cACA,cAC6B;CAC7B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,WAClC,MAAM,IAAI,MAAM,+CAA+C;CAGjE,UAAU,UAAU,IAAI,sBAAsB;CAC9C,aAAa,QAAQ,SAAS,CAAC,EAAE,UAAU,IAAI,8BAA8B;CAC7E,uBAAuB,SAAS;CAChC,UAAU,MAAM,gBAAgB;CAChC,UAAU,MAAM,UAAU;CAE1B,UAAU,cAAc,yBAAyB,CAAC,EAAE,UAAU,IAAI,2BAA2B;CAC7F,MAAM,eAAe,qBAAqB,WAAW,cAAc,SAAS;CAG5E,IAAI;CACJ,IAAI;CAEJ,IAAI,cAAc;CAClB,IAAI,gBAAgB;CACpB,IAAI,iBAAiB;CACrB,IAAI;CAEJ,OAAO,OAAO,OAAc,SAA+B;EACzD,MAAM,WAAW,SAASA,uBAAqB,QAAQ,mBAAmB;EAC1E,IAAI,CAAE,MAAM,QAAwB,QAAQ,QAAQ,GAAG,MAAM,+BAA+B,QAAQ;EACpG,IAAI,SAASA,uBAAqB,SAAS,CAAC,eAAe,CAAC,sBAC1D,MAAM,IAAI,MAAM,2EAA2E;EAC7F,MAAM,iBAAiB;EACvB,MAAM,UAAU,EAAE;EAClB,IAAI,SAASA,uBAAqB,OAAO,gBAAA,cAAgB,gBAAgB,SAAS;EAClF,MAAM,WAAW,MAAM,oBAAoB,cAAc,SAASA,uBAAqB,KAAK;EAC5F,IAAI,YAAY,eAAe;EAC/B,IAAI,UAAU;GACZ,cAAc,SAASA,uBAAqB;GAC5C;EACF;EACA,cAAc;EACd,IAAI,SAASA,uBAAqB,SAAS,gBAEzC;EAEF,IAAI,SAASA,uBAAqB,OAAO;GACvC,iBAAiB,CAAC,CAAC,UAAU,QAAQ,iCAAiC;GACtE,IAAI,gBAAgB;IAElB,MAAM,wBAAwB;KAC5B,IAAI,UAAU,UAAU,SAAS,gBAAgB,KAAK,UAAU,QAAQ,iCAAiC,GACvG,UAAU,UAAU,OAAO,gBAAgB;IAE/C;IACA,uBAAuB,WAAW;IAClC,wBAAwB,IAAI,iBAAiB,eAAe;IAC5D,sBAAsB,QAAQ,WAAW;KAAE,YAAY;KAAM,iBAAiB,CAAC,OAAO;IAAE,CAAC;IACzF,gBAAgB;GAClB;GACA,iBAAA,eAAiB,MAAM,qBAAqB;IAC1C,GAAI,iBAAiB,CAAC,IAAI,CAAC,SAAS;IACpC;IACA,aAAa,QAAQ,SAAS,KAAK;GACrC,CAAC;GACD,IAAI;IACF,uBAAuB,MAAM,WAAW,OAAO,WAAW,cAAc,WAAW,cAAc;GACnG,SAAS,OAAO;IACd,uBAAuB,WAAW;IAClC,aAAa;IACb,eAAe,KAAA;IACf,MAAM;GACR;EACF,OAAO,IAAI,yBAAyB,KAAA,GAClC,IAAI;GACF,MAAM,WAAW,OAAO,sBAAsB,WAAW,cAAc,WAAW,cAAc;GAChG,uBAAuB,KAAA;EACzB,UAAU;GACR,uBAAuB,WAAW;GAClC,eAAe;GACf,eAAe,KAAA;EACjB;OAEA,MAAM,IAAI,MAAM,2EAA2E;CAE/F;AACF;AAEA,MAAM,aAAa,OACjB,OACA,WACA,cACA,WACA,mBACkC;CAClC,IAAI,CAAE,MAAM,QAAwB,QAAQ,gBAAgB,GAC1D,MAAM,+BAA+B,gBAAgB;CAGvD,MAAM,aAAa,qBAAqB,WAAW,SAAS;CAC5D,MAAM,QAAQ,gBAAgB,WAAW,cAAc,UAAU;CACjE,MAAM,gBAAgB,WAAW,oBAC7B,iBAAiB,WAAW,iBAAiB,CAAC,CAAC,iBAAiB,kBAAkB,CAAC,CAAC,KAAK,IACzF;CAEJ,IAAI,gBAAgB,WAAW,gBAAgB,aAAa,QAAQ,OAAO;CAC3E,MAAM,gBAAgB,iBAClB,CAAC,IACD,CAAC,sBAAsB,WAAW,YAAY,KAAK,GAAG,sBAAsB,YAAY,KAAK,CAAC;CAClG,MAAM,2BAA2B,+BAA+B,YAAY,KAAK;CACjF,MAAM,wBAAwB,4BAA4B,UAAU;CACpE,MAAM,qBAAqB,yBAAyB,YAAY;CAEhE,MAAM,gBAAgB,CAAC,CACpB,MAAM,oBAAoB,CAAC,CAC3B,SAAS,kBAAkB,CAAC,CAC5B,OAAO,gBAAgB,CAAC,CACxB,WAAW,SAAS,CAAC,CACrB,oBAAqB,UAAU,MAAM,gBAAgB,MAAO,CAAC,CAC7D,OAAO,WAAW,OAAO,GAAG,CAAC,CAC7B,aAAa;EAAC,GAAG;EAAe;EAAoB;EAA0B;CAAqB,CAAC,CAAC,CACrG,KAAK;CAER,OAAO;EACL,cAAc;EACd;CACF;AACF;AAEA,MAAM,aAAa,OACjB,OACA,sBACA,WACA,cACA,WACA,mBACkB;CAClB,IAAI,CAAE,MAAM,QAAwB,QAAQ,oCAAoC,GAC9E,MAAM,+BAA+B,oCAAoC;CAG3E,MAAM,UAAU,UAAU,cAAc;CACxC,IAAI,mBAAmB,eAAe,UAAU,SAAS,OAAO,GAAG,QAAQ,KAAK;CAChF,MAAM,aAAa,qBAAqB,WAAW,SAAS;CAE5D,MAAM,gBAAgB,iBAClB,CAAC,IACD,CACE,6BAA6B,WAAW,YAAY,qBAAqB,YAAY,GACrF,6BAA6B,YAAY,qBAAqB,cAAc,qBAAqB,aAAa,CAChH;CACJ,MAAM,2BAA2B,sCAAsC,YAAY,qBAAqB,YAAY;CACpH,MAAM,wBAAwB,mCAAmC,UAAU;CAC3E,MAAM,qBAAqB,gCAAgC,cAAc,qBAAqB,YAAY;CAE1G,MAAM,gBAAgB,CAAC,CACpB,MAAM,oBAAoB,CAAC,CAC3B,SAAS,kBAAkB,CAAC,CAC5B,OAAO,gBAAgB,CAAC,CACxB,WAAW,SAAS,CAAC,CACrB,oBAAqB,UAAU,MAAM,gBAAgB,MAAO,CAAC,CAC7D,OAAO,WAAW,KAAK,GAAG,CAAC,CAC3B,aAAa;EAAC,GAAG;EAAe;EAAoB;EAA0B;CAAqB,CAAC,CAAC,CACrG,KAAK;AACV"}
+{"version":3,"file":"index.js","names":["TabBarSearchableType"],"sources":["../../src/tab-bar-searchable/index.ts"],"sourcesContent":["import { createAnimation } from '@ionic/core/components/index.js';\nimport { addSearchDismissButton } from './dismiss-button';\nimport {\n  ANIMATION_DELAY_BASE,\n  ANIMATION_DURATION,\n  ANIMATION_EASING,\n  getElementReferences,\n  getElementSizes,\n  throwErrorByFailedClickElement,\n  type SearchableEventCache,\n  type TabBarSearchableFunction,\n  TabBarSearchableType,\n} from '@rdlabo/ionic-theme-utils';\nimport { isNativeUI, registerNativeSearch, requestNativeSearch, suspendNativeUI } from '@rdlabo/capacitor-native-ui/integration';\nimport {\n  createCloseButtonsAnimation,\n  createEffectAnimation,\n  createFabButtonAnimation,\n  createSearchContainerAnimation,\n  createTabBarAnimation,\n} from './animations/enter';\nimport {\n  createReverseCloseButtonsAnimation,\n  createReverseEffectAnimation,\n  createReverseFabButtonAnimation,\n  createReverseSearchContainerAnimation,\n  createReverseTabBarAnimation,\n} from './animations/leave';\n\nexport {\n  TabBarSearchableType,\n  type TabBarSearchableFunction,\n  type SearchableEventCache,\n  type ElementSizes,\n  type ElementReferences,\n} from '@rdlabo/ionic-theme-utils';\n\n/**\n *  <ion-fab vertical=\"bottom\" horizontal=\"end\" slot=\"fixed\">\n *   <ion-fab-button (click)=\"present($event)\">\n *     <ion-icon name=\"search\"></ion-icon>\n *   </ion-fab-button>\n *  </ion-fab>\n *  <ion-footer [translucent]=\"true\">\n *   <ion-toolbar>\n *     <ion-buttons slot=\"start\">\n *     <!-- ion-icon does not need `name` attribute. -->\n *       <ion-button fill=\"default\"><ion-icon slot=\"icon-only\"></ion-icon>\n *     </ion-button>\n *     </ion-buttons>\n *     <!-- User set `ionChange` or other events. -->\n *     <ion-searchbar aria-label=\"Search\" (ionChange)=\"example($event)\"></ion-searchbar>\n *   </ion-toolbar>\n *  </ion-footer>\n **/\n\nexport const attachTabBarSearchable = (\n  ionTabBar: HTMLElement,\n  ionFabButton: HTMLElement,\n  ionFooter: HTMLElement,\n): TabBarSearchableFunction => {\n  if (!ionTabBar || !ionFabButton || !ionFooter) {\n    throw new Error('TabBarSearchable should be defined with props');\n  }\n  // Initialize\n  ionFooter.classList.add('ios-theme-searchable');\n  ionFabButton.closest('ion-fab')?.classList.add('ios-theme-searchable-trigger');\n  addSearchDismissButton(ionFooter);\n  ionFooter.style.pointerEvents = 'none';\n  ionFooter.style.opacity = '0';\n  // Search dismissal belongs beside the Web search field, never in the vertical rail.\n  ionFooter.querySelector('ion-buttons[slot=start]')?.classList.add('ios-theme-horizontal-only');\n  const nativeSearch = registerNativeSearch(ionTabBar, ionFabButton, ionFooter);\n\n  // Saved Params\n  let searchableEventCache: SearchableEventCache | undefined;\n  let resumeNative: (() => void) | undefined;\n  let restoreTrigger: (() => void) | undefined;\n  // Leave is valid both while native Enter awaits its ack and after it completes.\n  let nativeEntry = false;\n  let nativeRequest = 0;\n  let verticalSearch = false;\n  let tabVisibilityObserver: MutationObserver | undefined;\n\n  return async (event: Event, type: TabBarSearchableType) => {\n    const selector = type === TabBarSearchableType.Enter ? 'ion-fab-button' : 'ion-buttons[slot=start] ion-button';\n    if (!(event.target as HTMLElement)?.closest(selector)) throw throwErrorByFailedClickElement(selector);\n    if (type === TabBarSearchableType.Leave && !nativeEntry && !searchableEventCache)\n      throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');\n    const hadNativeEntry = nativeEntry;\n    const request = ++nativeRequest;\n    if (type === TabBarSearchableType.Enter) nativeEntry ||= isNativeUI(ionFooter);\n    const accepted = await requestNativeSearch(nativeSearch, type === TabBarSearchableType.Enter);\n    if (request !== nativeRequest) return;\n    if (accepted) {\n      nativeEntry = type === TabBarSearchableType.Enter;\n      return;\n    }\n    nativeEntry = false;\n    if (type === TabBarSearchableType.Leave && hadNativeEntry) {\n      // Forced native retirement already restored the closed Web presentation.\n      return;\n    }\n    if (type === TabBarSearchableType.Enter) {\n      verticalSearch = !!ionTabBar.closest('ion-app.ios-theme-vertical-bars');\n      if (verticalSearch) {\n        // Ionic hides horizontal tabs when the keyboard opens; keep this rail available.\n        const keepTabsVisible = () => {\n          if (ionTabBar.classList.contains('tab-bar-hidden') && ionTabBar.closest('ion-app.ios-theme-vertical-bars')) {\n            ionTabBar.classList.remove('tab-bar-hidden');\n          }\n        };\n        tabVisibilityObserver?.disconnect();\n        tabVisibilityObserver = new MutationObserver(keepTabsVisible);\n        tabVisibilityObserver.observe(ionTabBar, { attributes: true, attributeFilter: ['class'] });\n        keepTabsVisible();\n      }\n      resumeNative ??= await suspendNativeUI([\n        ...(verticalSearch ? [] : [ionTabBar]),\n        ionFooter,\n        ionFabButton.closest('ion-fab') ?? ionFabButton,\n      ]);\n      try {\n        searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter, verticalSearch);\n        if (!restoreTrigger) {\n          // WebKit can hit an opacity-zero FAB above the focused close button.\n          // Hide its complete host after the entrance animation; restore before animating out.\n          const trigger = ionFabButton.closest('ion-fab') ?? ionFabButton;\n          const visibility = trigger.style.getPropertyValue('visibility');\n          const priority = trigger.style.getPropertyPriority('visibility');\n          restoreTrigger = () => {\n            if (visibility) trigger.style.setProperty('visibility', visibility, priority);\n            else trigger.style.removeProperty('visibility');\n            restoreTrigger = undefined;\n          };\n          trigger.style.setProperty('visibility', 'hidden', 'important');\n        }\n      } catch (error) {\n        restoreTrigger?.();\n        tabVisibilityObserver?.disconnect();\n        resumeNative();\n        resumeNative = undefined;\n        throw error;\n      }\n    } else if (searchableEventCache !== undefined) {\n      try {\n        restoreTrigger?.();\n        await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch);\n        searchableEventCache = undefined;\n      } finally {\n        restoreTrigger?.();\n        tabVisibilityObserver?.disconnect();\n        resumeNative?.();\n        resumeNative = undefined;\n      }\n    } else {\n      throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');\n    }\n  };\n};\n\nconst enterEvent = async (\n  event: Event,\n  ionTabBar: HTMLElement,\n  ionFabButton: HTMLElement,\n  ionFooter: HTMLElement,\n  verticalSearch: boolean,\n): Promise<SearchableEventCache> => {\n  if (!(event.target as HTMLElement)?.closest('ion-fab-button')) {\n    throw throwErrorByFailedClickElement('ion-fab-button');\n  }\n\n  const references = getElementReferences(ionTabBar, ionFooter);\n  const sizes = getElementSizes(ionTabBar, ionFabButton, references);\n  const colorSelected = references.selectedTabButton\n    ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()\n    : '';\n\n  if (verticalSearch) references.closeButtonIcon.setAttribute('name', 'close');\n  const tabAnimations = verticalSearch\n    ? []\n    : [createTabBarAnimation(ionTabBar, references, sizes), createEffectAnimation(references, sizes)];\n  const searchContainerAnimation = createSearchContainerAnimation(references, sizes);\n  const closeButtonsAnimation = createCloseButtonsAnimation(references);\n  const fabButtonAnimation = createFabButtonAnimation(ionFabButton);\n\n  await createAnimation()\n    .delay(ANIMATION_DELAY_BASE)\n    .duration(ANIMATION_DURATION)\n    .easing(ANIMATION_EASING)\n    .addElement(ionFooter)\n    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))\n    .fromTo('opacity', '0.8', '1')\n    .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])\n    .play();\n\n  return {\n    elementSizes: sizes,\n    colorSelected,\n  };\n};\n\nconst leaveEvent = async (\n  event: Event,\n  searchableEventCache: SearchableEventCache,\n  ionTabBar: HTMLElement,\n  ionFabButton: HTMLElement,\n  ionFooter: HTMLElement,\n  verticalSearch: boolean,\n): Promise<void> => {\n  if (!(event.target as HTMLElement)?.closest('ion-buttons[slot=start] ion-button')) {\n    throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');\n  }\n\n  const focused = ionFooter.ownerDocument.activeElement;\n  if (focused instanceof HTMLElement && ionFooter.contains(focused)) focused.blur();\n  const references = getElementReferences(ionTabBar, ionFooter);\n\n  const tabAnimations = verticalSearch\n    ? []\n    : [\n        createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes),\n        createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected),\n      ];\n  const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);\n  const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);\n  const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);\n\n  await createAnimation()\n    .delay(ANIMATION_DELAY_BASE)\n    .duration(ANIMATION_DURATION)\n    .easing(ANIMATION_EASING)\n    .addElement(ionFooter)\n    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))\n    .fromTo('opacity', '1', '0')\n    .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])\n    .play();\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.d.ts","names":[],"sources":["../../src/transition/ios.transition.ts"],"mappings":";;;;iBAQiB;EACf;;qBAUW,YAAa,QAAQ,QAAQ;qBAI7B,yBAAyB,OAAO,aAAa,MAAM,sBAAsB"}
+{"version":3,"file":"ios.transition.d.ts","names":[],"sources":["../../src/transition/ios.transition.ts"],"mappings":";;;;iBASiB;EACf;;qBAYW,YAAa,QAAQ,QAAQ;qBAI7B,yBAAyB,OAAO,aAAa,MAAM,sBAAsB"}

package/dist/transition/ios.transition.js

@@ -1,17 +1,20 @@
 import { getIonPageElement } from "./index.js";
-import { withNativeUIShellTransition } from "../native-integration/transition.js";
+import { withNativeUITransition } from "./native-ui.js";
+import { nativeWebViewMetrics } from "@rdlabo/capacitor-native-ui/integration";
 import { createIosTransitionAnimation, shadow } from "@rdlabo/ionic-theme-utils";
 //#region src/transition/ios.transition.ts
 const transitionConfig = {
 	offLeftPercent: 30,
 	getIonPageElement,
 	shouldAnimateFixedBackButton: (navEl) => !navEl.closest("ion-app.ios-theme-vertical-bars"),
-	radius: 0
+	get radius() {
+		return nativeWebViewMetrics.radius;
+	}
 };
 const setConfig = (config) => {
-	Object.assign(transitionConfig, config);
+	if (config.radius !== void 0) nativeWebViewMetrics.radius = config.radius;
 };
-const iosTransitionAnimation = withNativeUIShellTransition(createIosTransitionAnimation(transitionConfig));
+const iosTransitionAnimation = withNativeUITransition(createIosTransitionAnimation(transitionConfig));
 //#endregion
 export { iosTransitionAnimation, setConfig, shadow };
 

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/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"}
+{"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 { nativeWebViewMetrics } from '@rdlabo/capacitor-native-ui/integration';\nimport { withNativeUITransition } from './native-ui';\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  get radius() {\n    return nativeWebViewMetrics.radius;\n  },\n};\n\nexport const setConfig = (config: Partial<IosTransitionConfig>): void => {\n  if (config.radius !== undefined) nativeWebViewMetrics.radius = config.radius;\n};\n\nexport const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUITransition(\n  createIosTransitionAnimation<TransitionOptions>(transitionConfig),\n);\n"],"mappings":";;;;;AAaA,MAAM,mBAAmB;CACvB,gBAAgB;CAChB;CACA,+BAA+B,UAAuB,CAAC,MAAM,QAAQ,iCAAiC;CACtG,IAAI,SAAS;EACX,OAAO,qBAAqB;CAC9B;AACF;AAEA,MAAa,aAAa,WAA+C;CACvE,IAAI,OAAO,WAAW,KAAA,GAAW,qBAAqB,SAAS,OAAO;AACxE;AAEA,MAAa,yBAAqF,uBAChG,6BAAgD,gBAAgB,CAClE"}

package/dist/transition/native-ui.d.ts

@@ -0,0 +1,6 @@
+import { Animation, AnimationBuilder } from "@ionic/core/components";
+//#region src/transition/native-ui.d.ts
+export declare const withNativeUITransition: (builder: AnimationBuilder) => AnimationBuilder;
+export declare const connectNativeUITransition: (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => void;
+//#endregion
+//# sourceMappingURL=native-ui.d.ts.map

package/dist/transition/native-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-ui.d.ts","names":[],"sources":["../../src/transition/native-ui.ts"],"mappings":";;qBASa,yBACV,SAAS,qBAAmB;qBAWlB,4BAA6B,WAAW,WAAW,UAAU,aAAa,UAAU"}

package/dist/{native-integration/index.js → transition/native-ui.js}

@@ -1,33 +1,19 @@
-//#region src/native-integration/index.ts
-const searches = /* @__PURE__ */ new WeakMap();
-const registerNativeSearch = (tabBar, trigger, footer) => {
-	const binding = {
-		tabBar,
-		trigger,
-		footer,
-		active: false,
-		focused: false
-	};
-	const entries = (searches.get(tabBar.ownerDocument) ?? []).filter((entry) => entry.deref() && entry.deref()?.footer !== footer);
-	entries.push(new WeakRef(binding));
-	searches.set(tabBar.ownerDocument, entries);
-	tabBar.ownerDocument.defaultView?.dispatchEvent(new Event("nativeUIShellRefresh"));
-	return binding;
-};
-const getNativeSearchBindings = (doc) => (searches.get(doc) ?? []).flatMap((entry) => entry.deref() ?? []);
-const requestNativeSearch = async (binding, active, focus) => await runtimes.get(binding.tabBar.ownerDocument)?.search?.(binding, active, focus) ?? false;
-const runtimes = /* @__PURE__ */ new WeakMap();
-const VERTICAL_BARS_TRANSITION_CANCELED = "iosThemeVerticalBarsTransitionCanceled";
-const setNativeUIShellIntegration = (doc, runtime) => {
-	if (runtime) runtimes.set(doc, runtime);
-	else runtimes.delete(doc);
+import { VERTICAL_BARS_TRANSITION_CANCELED, hasNativeUIIntegration, suspendNativeUI } from "@rdlabo/capacitor-native-ui/integration";
+//#region src/transition/native-ui.ts
+/**
+* Keeps an existing Ionic navigation animation and coordinates native control handoff.
+* Register the returned builder as navAnimation. Do not use it for overlay animations.
+* The builder must return a fresh Animation for each navigation; Ionic destroys it afterward.
+*/
+const withNativeUITransition = (builder) => (baseEl, opts) => {
+	const animation = builder(baseEl, opts);
+	if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl);
+	return animation;
 };
-const isNativeUIShell = (element) => element.hasAttribute("data-native-ui-shell");
-const suspendNativeUIShell = async (scopes) => await runtimes.get(scopes[0]?.ownerDocument)?.suspend(scopes) ?? (() => {});
 const connectedTransitions = /* @__PURE__ */ new WeakSet();
 const cancellationTransitions = /* @__PURE__ */ new WeakSet();
 /** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */
-const connectNativeUIShellTransition = (animation, entering, leaving) => {
+const connectNativeUITransition = (animation, entering, leaving) => {
 	if (leaving && !cancellationTransitions.has(animation)) {
 		cancellationTransitions.add(animation);
 		animation.onFinish((step) => {
@@ -37,7 +23,7 @@ const connectNativeUIShellTransition = (animation, entering, leaving) => {
 			}));
 		});
 	}
-	if (connectedTransitions.has(animation) || !runtimes.has(entering.ownerDocument)) return;
+	if (connectedTransitions.has(animation) || !hasNativeUIIntegration(entering.ownerDocument)) return;
 	connectedTransitions.add(animation);
 	const scopes = leaving ? [entering, leaving] : [entering];
 	const play = animation.play.bind(animation);
@@ -51,7 +37,7 @@ const connectNativeUIShellTransition = (animation, entering, leaving) => {
 	let interactiveReady = false;
 	let step;
 	let end;
-	const prepare = () => preparation ?? (preparation = suspendNativeUIShell(scopes).then((resume) => {
+	const prepare = () => preparation ?? (preparation = suspendNativeUI(scopes).then((resume) => {
 		if (disposed) resume(true);
 		else release = resume;
 	}));
@@ -100,6 +86,6 @@ const connectNativeUIShellTransition = (animation, entering, leaving) => {
 	};
 };
 //#endregion
-export { VERTICAL_BARS_TRANSITION_CANCELED, connectNativeUIShellTransition, getNativeSearchBindings, isNativeUIShell, registerNativeSearch, requestNativeSearch, setNativeUIShellIntegration, suspendNativeUIShell };
+export { connectNativeUITransition, withNativeUITransition };
 
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=native-ui.js.map

package/dist/transition/native-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-ui.js","names":[],"sources":["../../src/transition/native-ui.ts"],"sourcesContent":["import type { Animation } from '@ionic/core/components';\nimport { hasNativeUIIntegration, suspendNativeUI, VERTICAL_BARS_TRANSITION_CANCELED } from '@rdlabo/capacitor-native-ui/integration';\nimport type { AnimationBuilder } from '@ionic/core/components';\n\n/**\n * Keeps an existing Ionic navigation animation and coordinates native control handoff.\n * Register the returned builder as navAnimation. Do not use it for overlay animations.\n * The builder must return a fresh Animation for each navigation; Ionic destroys it afterward.\n */\nexport const withNativeUITransition =\n  (builder: AnimationBuilder): AnimationBuilder =>\n  (baseEl, opts) => {\n    const animation = builder(baseEl, opts);\n    if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl);\n    return animation;\n  };\n\nconst connectedTransitions = new WeakSet<Animation>();\nconst cancellationTransitions = new WeakSet<Animation>();\n\n/** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */\nexport const connectNativeUITransition = (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => {\n  if (leaving && !cancellationTransitions.has(animation)) {\n    cancellationTransitions.add(animation);\n    animation.onFinish((step) => {\n      if (step === 0) leaving.dispatchEvent(new CustomEvent(VERTICAL_BARS_TRANSITION_CANCELED, { bubbles: true, detail: { entering } }));\n    });\n  }\n  if (connectedTransitions.has(animation) || !hasNativeUIIntegration(entering.ownerDocument)) return;\n  connectedTransitions.add(animation);\n  const scopes = leaving ? [entering, leaving] : [entering];\n  const play = animation.play.bind(animation);\n  const progressStart = animation.progressStart.bind(animation);\n  const progressStep = animation.progressStep.bind(animation);\n  const progressEnd = animation.progressEnd.bind(animation);\n  const destroy = animation.destroy.bind(animation);\n  let release: ((canceled?: boolean) => void) | undefined;\n  let preparation: Promise<void> | undefined;\n  let disposed = false;\n  let interactiveReady = false;\n  let step: number | undefined;\n  let end: Parameters<Animation['progressEnd']> | undefined;\n  const prepare = () =>\n    (preparation ??= suspendNativeUI(scopes).then((resume) => {\n      if (disposed) resume(true);\n      else release = resume;\n    }));\n  const finish = (canceled = false) => {\n    release?.(canceled);\n    release = undefined;\n    preparation = undefined;\n  };\n  animation.onFinish((step) => finish(step === 0));\n  animation.play = async (options) => {\n    await prepare();\n    if (disposed) return;\n    try {\n      await play(options);\n    } finally {\n      finish();\n    }\n  };\n  animation.progressStart = (...args) => {\n    interactiveReady = false;\n    step = undefined;\n    end = undefined;\n    void prepare().then(() => {\n      if (disposed) return;\n      progressStart(...args);\n      interactiveReady = true;\n      if (step !== undefined) progressStep(step);\n      if (end) progressEnd(...end);\n    });\n    return animation;\n  };\n  animation.progressStep = (value) => {\n    step = value;\n    if (interactiveReady) progressStep(value);\n    return animation;\n  };\n  animation.progressEnd = (...args) => {\n    end = args;\n    if (interactiveReady) progressEnd(...args);\n    return animation;\n  };\n  animation.destroy = (...args) => {\n    disposed = true;\n    finish(true);\n    return destroy(...args);\n  };\n};\n"],"mappings":";;;;;;;AASA,MAAa,0BACV,aACA,QAAQ,SAAS;CAChB,MAAM,YAAY,QAAQ,QAAQ,IAAI;CACtC,IAAI,MAAM,YAAY,0BAA0B,WAAW,KAAK,YAAY,KAAK,SAAS;CAC1F,OAAO;AACT;AAEF,MAAM,uCAAuB,IAAI,QAAmB;AACpD,MAAM,0CAA0B,IAAI,QAAmB;;AAGvD,MAAa,6BAA6B,WAAsB,UAAuB,YAA0B;CAC/G,IAAI,WAAW,CAAC,wBAAwB,IAAI,SAAS,GAAG;EACtD,wBAAwB,IAAI,SAAS;EACrC,UAAU,UAAU,SAAS;GAC3B,IAAI,SAAS,GAAG,QAAQ,cAAc,IAAI,YAAY,mCAAmC;IAAE,SAAS;IAAM,QAAQ,EAAE,SAAS;GAAE,CAAC,CAAC;EACnI,CAAC;CACH;CACA,IAAI,qBAAqB,IAAI,SAAS,KAAK,CAAC,uBAAuB,SAAS,aAAa,GAAG;CAC5F,qBAAqB,IAAI,SAAS;CAClC,MAAM,SAAS,UAAU,CAAC,UAAU,OAAO,IAAI,CAAC,QAAQ;CACxD,MAAM,OAAO,UAAU,KAAK,KAAK,SAAS;CAC1C,MAAM,gBAAgB,UAAU,cAAc,KAAK,SAAS;CAC5D,MAAM,eAAe,UAAU,aAAa,KAAK,SAAS;CAC1D,MAAM,cAAc,UAAU,YAAY,KAAK,SAAS;CACxD,MAAM,UAAU,UAAU,QAAQ,KAAK,SAAS;CAChD,IAAI;CACJ,IAAI;CACJ,IAAI,WAAW;CACf,IAAI,mBAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,MAAM,gBACH,gBAAA,cAAgB,gBAAgB,MAAM,CAAC,CAAC,MAAM,WAAW;EACxD,IAAI,UAAU,OAAO,IAAI;OACpB,UAAU;CACjB,CAAC;CACH,MAAM,UAAU,WAAW,UAAU;EACnC,UAAU,QAAQ;EAClB,UAAU,KAAA;EACV,cAAc,KAAA;CAChB;CACA,UAAU,UAAU,SAAS,OAAO,SAAS,CAAC,CAAC;CAC/C,UAAU,OAAO,OAAO,YAAY;EAClC,MAAM,QAAQ;EACd,IAAI,UAAU;EACd,IAAI;GACF,MAAM,KAAK,OAAO;EACpB,UAAU;GACR,OAAO;EACT;CACF;CACA,UAAU,iBAAiB,GAAG,SAAS;EACrC,mBAAmB;EACnB,OAAO,KAAA;EACP,MAAM,KAAA;EACN,QAAa,CAAC,CAAC,WAAW;GACxB,IAAI,UAAU;GACd,cAAc,GAAG,IAAI;GACrB,mBAAmB;GACnB,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,IAAI,KAAK,YAAY,GAAG,GAAG;EAC7B,CAAC;EACD,OAAO;CACT;CACA,UAAU,gBAAgB,UAAU;EAClC,OAAO;EACP,IAAI,kBAAkB,aAAa,KAAK;EACxC,OAAO;CACT;CACA,UAAU,eAAe,GAAG,SAAS;EACnC,MAAM;EACN,IAAI,kBAAkB,YAAY,GAAG,IAAI;EACzC,OAAO;CACT;CACA,UAAU,WAAW,GAAG,SAAS;EAC/B,WAAW;EACX,OAAO,IAAI;EACX,OAAO,QAAQ,GAAG,IAAI;CACxB;AACF"}

package/docs/adaptive-themes.md

@@ -0,0 +1,151 @@
+# Use iOS 26, iOS 27, and MD3 themes
+
+Use this optional setup when you want browser capabilities to select iOS styles, or want MD3 in Material Design mode. For a single iOS 27 appearance, follow [theme setup](setup.md). These steps replace the stylesheet and animation configuration in that guide.
+
+## 1. Install the themes
+
+Install both themes in an existing Ionic 8 or 9 app (`@ionic/core` 8.8.1 or later):
+
+```bash
+npm install @rdlabo/ionic-theme-ios26 @rdlabo/ionic-theme-ios27
+```
+
+## 2. Load styles
+
+In your global Sass stylesheet (for example, `src/styles.scss`), load the styles by browser capability:
+
+```scss
+@use 'sass:meta';
+
+@supports (overflow-anchor: auto) {
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/default-variables');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect');
+}
+
+@supports (text-wrap: pretty) and (not (overflow-anchor: auto)) {
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/default-variables');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect');
+}
+```
+
+If compilation reports `Can't find stylesheet to import.` for a `meta.load-css()` call, make `node_modules` available to Sass. In Angular, add this under the app's build `options` in `angular.json`:
+
+```json
+"stylePreprocessorOptions": {
+  "includePaths": ["node_modules"]
+}
+```
+
+Alternatively, use a relative path from the Sass file containing `meta.load-css()` to the installed package, such as `../node_modules/@rdlabo/ionic-theme-ios27/src/styles/default-variables` from `src/styles.scss`. Adjust the `../` prefix for your file's location, and apply the same change to each theme import.
+
+These checks select styles by browser features, not by iOS version. Browsers without either feature retain Ionic's default iOS appearance. The example uses class-based dark mode: also load [Ionic's matching dark palette](https://ionicframework.com/docs/theming/dark-mode). For system or always-dark mode, replace both `-dark-class` imports with the matching variant. The `md-remove-ios-class-effect` styles prevent iOS-specific classes from affecting Material Design mode.
+
+## 3. Configure animations
+
+Keep the iOS 27 page transition and popover animations for both styled generations. Resolve these options before Ionic initializes. For Angular:
+
+```ts
+import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone'; // Ionic 8
+import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';
+
+function loadIOSAnimations() {
+  if (typeof CSS === 'undefined') return {};
+  if (!CSS.supports('overflow-anchor: auto') && !CSS.supports('text-wrap: pretty')) return {};
+
+  return {
+    navAnimation: iosTransitionAnimation,
+    popoverEnter: popoverEnterAnimation,
+    popoverLeave: popoverLeaveAnimation,
+  };
+}
+
+provideIonicAngular(isPlatform('ios') ? loadIOSAnimations() : {});
+```
+
+For Ionic 9 Angular, import `isPlatform` and `provideIonicAngular` from `@ionic/angular`. React and Vue can pass the same options to `setupIonicReact` or `IonicVue` during initialization. In server-rendered apps, run the selection during browser initialization.
+
+The page-transition radius defaults to `0`. Native apps can update it after measuring the WebView:
+
+```ts
+import { setConfig } from '@rdlabo/ionic-theme-ios27';
+
+setConfig({ radius });
+```
+
+## 4. Check the theme
+
+Test on iOS. When previewing on desktop, set Ionic mode to `ios` in your existing framework initialization config (for example `mode: 'ios'`).
+
+Use this markup to preview the inset grouped list look. For the list structure the theme expects, see [Using ion-item-group](using-ion-item-group.md).
+
+```html
+<ion-list mode="ios" inset="true">
+  <ion-item-group>
+    <ion-item><ion-label>Notifications</ion-label></ion-item>
+    <ion-item><ion-label>Appearance</ion-label></ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+## Use with the MD3 theme
+
+Install all three themes to use iOS 27 on supported Safari versions, fall back to iOS 26 on the preceding Safari generation, and use MD3 whenever Ionic runs in Material Design mode. All three themes require `@ionic/core` 8.8.1 or later:
+
+```bash
+npm install @rdlabo/ionic-theme-ios26 @rdlabo/ionic-theme-ios27 @rdlabo/ionic-theme-md3
+```
+
+Keep the two iOS themes behind the same browser feature checks used in step 2 above, then load MD3 unconditionally. Using `meta.load-css()` throughout also keeps the MD3 styles after the conditional iOS styles in the generated CSS:
+
+```scss
+@use 'sass:meta';
+
+@supports (overflow-anchor: auto) {
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/default-variables');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect');
+}
+
+@supports (text-wrap: pretty) and (not (overflow-anchor: auto)) {
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/default-variables');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect');
+}
+
+@include meta.load-css('@rdlabo/ionic-theme-md3/dist/css/default-variables.css');
+@include meta.load-css('@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css');
+```
+
+The iOS styles apply only to Ionic's `ios` mode, while MD3 applies to `md` mode. The `md-remove-ios-class-effect` stylesheet in each iOS branch prevents iOS-only utility classes from leaking into MD mode. MD3 already includes its inset-list styles, so do not load either iOS package's optional `md-ion-list-inset` stylesheet in this configuration.
+
+Load Ionic's matching dark palette too. The example uses class-based dark mode; for system or always-dark mode, select the matching variant for Ionic and both iOS themes.
+
+Keep the iOS 27 transition for both iOS theme generations and select the MD3 transition in Material Design mode. Extend the animation setup above as follows:
+
+```ts
+import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone'; // Ionic 8
+import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';
+import { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';
+
+function loadAnimations() {
+  if (!isPlatform('ios')) return { navAnimation: mdTransitionAnimation };
+  if (typeof CSS === 'undefined') return {};
+  if (!CSS.supports('overflow-anchor: auto') && !CSS.supports('text-wrap: pretty')) return {};
+
+  return {
+    navAnimation: iosTransitionAnimation,
+    popoverEnter: popoverEnterAnimation,
+    popoverLeave: popoverLeaveAnimation,
+  };
+}
+
+provideIonicAngular(loadAnimations());
+```
+
+For Ionic 9 Angular, import `isPlatform` and `provideIonicAngular` from `@ionic/angular`. React and Vue can pass the same returned options to `setupIonicReact` or `IonicVue`. If Sass cannot resolve a package in `meta.load-css()`, use the `stylePreprocessorOptions.includePaths` or relative-path setup described above.

package/docs/add-native-ui.md

@@ -0,0 +1,53 @@
+# Add Native UI to your theme
+
+Already using `@rdlabo/ionic-theme-ios27`? Add native controls on iOS while keeping your theme styles, Web content, and routing. Unsupported controls, browsers, and Android retain their Web appearance.
+
+Start with [theme setup](setup.md) if you have not configured the theme yet. If you use a different Web appearance, follow [Native UI setup](../../capacitor-native-ui/docs/setup.md) instead.
+
+Read [how projection works](../../capacitor-native-ui/README.md#how-projection-works) for how native controls remain connected to your Web DOM and handlers.
+
+## 1. Install the native plugin
+
+This guide assumes a Capacitor 8 application with an iOS project. Web-only theme users can continue without Capacitor; adding native iOS controls requires setting up that native project first. See [Native UI requirements](../../capacitor-native-ui/README.md#requirements) for supported Ionic, iOS, and Xcode versions.
+
+Install both packages together from npm so the theme and native plugin use the same version:
+
+```sh
+npm install @rdlabo/ionic-theme-ios27 @rdlabo/capacitor-native-ui
+```
+
+Keep your existing theme stylesheets. Capacitor's default plugin discovery requires a direct dependency; the copy installed through the theme alone does not register the native plugin.
+
+## 2. Enable native controls
+
+Enable the Shell once at application startup after `ion-app` is mounted:
+
+```ts
+import { enableNativeUI } from '@rdlabo/capacitor-native-ui';
+
+const shell = await enableNativeUI();
+```
+
+Call `await shell.destroy()` when the application owner is disposed; do not create a shell for each page. Use the [Angular, React, or Vue app-root examples](../../capacitor-native-ui/docs/setup.md#place-startup-in-your-frameworks-app-root) to connect startup and cleanup.
+
+Keep `navAnimation: iosTransitionAnimation` from the theme package. It already coordinates native controls during page transitions and back gestures; do not wrap it again. If you use a custom animation, follow the [transition adapter instructions](../../capacitor-native-ui/docs/migration.md#native-ui-transition-adapter).
+
+Installing the plugin or configuring theme animations does not activate native controls. The application enables them with the startup call above.
+
+## 3. Sync and run on iOS
+
+Build your Web assets, then run:
+
+```sh
+npx cap sync ios
+```
+
+Run the app on a supported iOS device or simulator. Eligible fixed controls should use native presentation and still invoke their existing handlers. Navigate forward and back, then check the same app in a browser to confirm Web fallback. If everything stays on the Web on supported iOS, confirm the direct dependency, startup call, sync, and native rebuild. See [supported controls](../../capacitor-native-ui/docs/native-ui.md#supported-markup) for eligible markup and Web fallback behavior. Retain your theme styles for Web content and controls that are not projected.
+
+## Optional: Vertical Bars
+
+For a side rail, load the [Vertical Bars layout stylesheet](vertical-bars-layout.md) and configure [device placement](iphone-duo.md). The Shell includes the rail runtime; no additional startup call is needed. To project only rail controls, use `enableNativeUI({ verticalBars: { only: true } })` instead of the default startup call. See [configuration options](../../capacitor-native-ui/docs/configuration.md).
+
+## Upgrading an existing native integration
+
+If you previously imported native APIs from the theme package, follow the [native import migration](../../capacitor-native-ui/docs/migration.md#2-replace-native-imports) and [native project migration](../../capacitor-native-ui/docs/migration.md#3-sync-the-native-project). Keep ordinary theme imports and stylesheets.

package/docs/animation.md

@@ -65,7 +65,7 @@ Register after the Ionic element has initialized (for example, Angular's `ngAfte
 
 The clear button shares the 44px glass design and appears beside the input. It uses Ionic's `clearIcon`, `showClearButton`, and `--clear-button-color`; clearing retains input focus, while cancel ends the search. Clear and cancel can be displayed together. Set `clearIcon` and `cancelButtonIcon` to the same icon to give them the same appearance.
 
-Both external glass buttons use the iOS 27 cancel button's centered press spring, scaled down to fit the available 8px padding without clipping the border: 44px at rest, 57.2px held, with an approximately 58.26px overshoot (native: 60px held and 61.29px peak). Press and release curves follow UIKit presentation-layer measurements (iPhone 18 Pro simulator); reduced motion disables scaling. This shared external clear design intentionally differs from UIKit's small, non-expanding clear button inside the text field. Ionic supplies the icons, so glyph pixels are not identical to SF Symbols.
+Both external glass buttons use a 44px resting size and expand while pressed. Reduced motion disables scaling. The clear button appears outside the text field; Ionic supplies the icons.
 
 While held, the glass background becomes opaque and the icon opacity is 0.55, preserving its configured color. Use `--background-activated` to customize the pressed background independently of `--background`.
 

package/docs/eslint.md

@@ -60,7 +60,7 @@ Group the items and import `IonItemGroup` in the standalone component:
 
 The rule checks all `ion-list` elements, including non-inset lists. Radio, reorder, and accordion groups are also supported. It checks Angular templates; it does not inspect React or Vue templates.
 
-See [Using ion-item-group](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/using-ion-item-group) for layout examples and the [rule reference](https://docs.rdlabo.dev/projects/eslint-plugin-rules/docs/rules/require-ion-item-group) for supported structures and automatic fixes.
+See [Using ion-item-group](using-ion-item-group.md) for layout examples and the [rule reference](https://docs.rdlabo.dev/projects/eslint-plugin-rules/docs/rules/require-ion-item-group) for supported structures and automatic fixes.
 
 ## Keep it checked
 

package/docs/features.md

@@ -4,7 +4,7 @@ title: Features
 
 # Features
 
-Customize the theme with CSS variables and Sass mixins, or adopt it one component at a time. Markup-specific opt-ins are documented in [Special markup and classes](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/special-markup).
+Customize the theme with CSS variables and Sass mixins, or adopt it one component at a time. Markup-specific opt-ins are documented in [Special markup and classes](special-markup.md).
 
 ## CSS variables
 
@@ -27,9 +27,9 @@ ion-textarea label.textarea-wrapper {
 }
 ```
 
-## Native UI Shell (Preview)
+## Native UI (Preview)
 
-Capacitor iOS apps can use the optional [Native UI Shell](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell) to render supported fixed Ionic controls with UIKit and system Liquid Glass. It is available as a preview in `1.2.0`. Content and application logic stay in the WebView, with Ionic owning routing and page transitions. The guide explains the hybrid approach's origins in Basecamp and Capacitor, setup, supported controls and Web fallback behavior.
+Once your theme is working, [add Native UI](add-native-ui.md) to render supported fixed controls with UIKit and SwiftUI on iOS. Keep theme styles for Web content and fallback controls. Native UI is an optional preview; adding styles alone does not enable it.
 
 ## Selective component imports