@rdlabo/ionic-theme-ios27 0.1.0-beta.pr154.shac3e35365120e → 0.1.0

package/dist/css/md-ion-list-inset.css

@@ -1 +1 @@
-ion-list.md ion-item:has(ion-input.input-fill-outline),ion-list.md ion-item:has(ion-textarea.textarea-fill-outline),ion-list.md ion-item:has(ion-select:is([helpertext]:not([helpertext=""]),[errortext]:not([errortext=""]))),ion-list.md ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))),ion-list.md ion-item:has(ion-textarea .textarea-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))){--inner-border-width: 0;--inner-padding-bottom: 4px}ion-list.md ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))),ion-list.md ion-item ion-textarea .textarea-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))){display:none}ion-list.md.list-inset{background:rgba(0,0,0,0)}ion-list.md.list-inset ion-list-header{display:flex;align-items:center}ion-list.md.list-inset ion-list-header ion-label{font-size:.9rem;margin:8px 4px 4px}ion-list.md.list-inset ion-list-header ion-label:not(.ion-color){color:var(--ion-color-medium-tint)}ion-list.md.list-inset ion-list-header ion-button{margin-top:8px}ion-list.md.list-inset ion-list-header ion-note{font-size:.9rem;margin:8px 16px 4px 0}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label{width:100%;text-align:center;padding:32px 16px 16px;transform:translateX(5px)}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon{font-size:2.8rem;border-radius:20%;padding:6px}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon:not(.ion-color){color:#fff}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label h2{font-size:1.2rem;font-weight:bold;margin-top:8px}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-text{font-size:.9rem}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group){display:block;border-radius:16px;overflow:hidden}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top){display:flex;flex-direction:column;border-radius:0;overflow:visible}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>.radio-group-top{order:1;font-size:.9rem;padding-block-start:8px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:first-of-type{--border-radius: 16px 16px 0 0}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:last-of-type{--border-radius: 0 0 16px 16px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:first-of-type){margin-top:16px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))::part(container){flex-direction:column;justify-content:center;padding-top:14px;padding-bottom:14px;min-height:64px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label,ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{width:auto;align-self:flex-start}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label{margin:0;font-weight:500;font-size:1.15rem;line-height:.9rem}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{font-size:.85rem}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-text[slot=end]{padding-left:8px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled{--detail-icon-opacity: 0.1;opacity:1}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled>*{opacity:.4}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem;transform:translateY(4px)}ion-list.md.list-inset>ion-note{--color: var(--ion-color-medium-tint);font-size:.9rem;display:block;margin:8px calc(var(--ion-safe-area-right, 0) + 8px) 8px calc(var(--ion-safe-area-left, 0) + 8px)}ion-list.md.list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md.list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md.list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}
+ion-list.md ion-item:has(ion-input.input-fill-outline),ion-list.md ion-item:has(ion-textarea.textarea-fill-outline),ion-list.md ion-item:has(ion-select:is([helpertext]:not([helpertext=""]),[errortext]:not([errortext=""]))),ion-list.md ion-item:has(ion-input .input-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))),ion-list.md ion-item:has(ion-textarea .textarea-bottom>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty))){--inner-border-width: 0;--inner-padding-bottom: 4px}ion-list.md ion-item ion-input .input-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))),ion-list.md ion-item ion-textarea .textarea-bottom:not(:has(>:is(.helper-text:not(:empty),.error-text:not(:empty),.counter:not(:empty)))){display:none}ion-list.md.list-inset{background:rgba(0,0,0,0)}ion-list.md.list-inset ion-list-header{display:flex;align-items:center}ion-list.md.list-inset ion-list-header ion-label{font-size:1rem;line-height:1.29rem;font-weight:600;margin:8px 4px 4px}ion-list.md.list-inset ion-list-header ion-label:not(.ion-color){color:var(--ion-color-medium-tint)}ion-list.md.list-inset ion-list-header ion-button{margin-top:8px}ion-list.md.list-inset ion-list-header ion-note{font-size:.76rem;line-height:1.06rem;font-weight:400;margin:8px 16px 4px 0}ion-list.md.list-inset ion-list-header ion-note:not(.ion-color){--color: var(--ion-color-medium-tint)}ion-list.md.list-inset ion-item-group.item-group-header{border-radius:16px}ion-list.md.list-inset ion-item-group.item-group-header>ion-item{--inner-padding-end: 0;--inner-border-width: 0}ion-list.md.list-inset ion-item-group.item-group-header>ion-item::part(native){padding-inline:0}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label{width:100%;margin:0;text-align:start;white-space:normal;padding:16px 20px}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-header.header-collapse-condense>ion-toolbar{--min-height: 0;visibility:hidden}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon{font-size:2.82rem;border-radius:20%;padding:6px;vertical-align:top}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-icon:not(.ion-color){color:#fff}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label h2{font-size:1.29rem;font-weight:700;line-height:1.53rem;margin:20px 0 8px}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-text{display:block;font-size:1rem;line-height:1.29rem}ion-list.md.list-inset ion-item-group.item-group-header>ion-item>ion-label ion-text:not(.ion-color){color:var(--ion-color-step-500, var(--ion-text-color-step-500, #808080))}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group){display:block;border-radius:16px;overflow:hidden}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top){display:flex;flex-direction:column;border-radius:0;overflow:visible}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>.radio-group-top{order:1;font-size:.9rem;padding-block-start:8px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:first-of-type{--border-radius: 16px 16px 0 0}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):has(>.radio-group-top)>ion-item:last-of-type{--border-radius: 0 0 16px 16px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group):not(:first-of-type){margin-top:16px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))::part(container){flex-direction:column;justify-content:center;padding-top:14px;padding-bottom:14px;min-height:64px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label,ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{width:auto;align-self:flex-start}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-label{margin:0;font-weight:500;font-size:1rem;line-height:1.29rem}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item:has(>ion-label:not([slot])):has(>ion-note:not([slot]))>ion-note{font-size:.88rem;line-height:1.18rem}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-text[slot=end]{padding-left:8px}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled{--detail-icon-opacity: 0.1;opacity:1}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item.item-disabled>*{opacity:.4}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end].ion-align-self-end{transform:translateY(-7px)}ion-list.md.list-inset>:is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item ion-button[slot=end] ion-icon[slot=icon-only]{font-size:1.2rem;transform:translateY(4px)}ion-list.md.list-inset>ion-note{font-size:.76rem;line-height:1.06rem;font-weight:400;display:block;margin:8px calc(var(--ion-safe-area-right, 0) + 8px) 8px calc(var(--ion-safe-area-left, 0) + 8px)}ion-list.md.list-inset>ion-note:not(.ion-color){--color: var(--ion-color-medium-tint)}ion-list.md.list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]{transition:transform 200ms ease}ion-list.md.list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating]:not(.label-floating){transform:translateY(-7px)}ion-list.md.list-inset :is(ion-item-group,ion-reorder-group,ion-accordion-group,ion-radio-group) ion-item>ion-input[labelplacement=floating].label-floating{transform:translateY(-4px)}

package/dist/css/utils/dark/ion-list.css

@@ -0,0 +1 @@
+

package/dist/css/utils/group-heading.css

@@ -0,0 +1 @@
+

package/dist/native/components/searchable-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchable-tabs.d.ts","sourceRoot":"","sources":["../../../src/native/components/searchable-tabs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAA0B,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmB/E,eAAO,MAAM,mBAAmB,GAAI,KAAK,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,EAAE,UAAU,MAAM,IAAI;sBA8FnF,OAAO;;yBAgBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBA3GhE,mBAAmB;mBAiO9B,mBAAmB,YAAY,MAAM;qBAInC,WAAW;gBAGhB,MAAM,EAAE;iBAKP,gBAAgB;oBAqCb,mBAAmB;;CAkBtC,CAAC"}
+{"version":3,"file":"searchable-tabs.d.ts","sourceRoot":"","sources":["../../../src/native/components/searchable-tabs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAA0B,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmB/E,eAAO,MAAM,mBAAmB,GAAI,KAAK,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,EAAE,UAAU,MAAM,IAAI;sBA8FnF,OAAO;;yBAgBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBA3GhE,mBAAmB;mBAuO9B,mBAAmB,YAAY,MAAM;qBAInC,WAAW;gBAGhB,MAAM,EAAE;iBAUP,gBAAgB;oBAqCb,mBAAmB;;CAkBtC,CAAC"}

package/dist/native/components/searchable-tabs.js

@@ -208,6 +208,12 @@ export const createSearchSupport = (doc, id, schedule) => {
                     trigger.y,
                     trigger.width,
                     trigger.height,
+                    candidate.control.items,
+                    candidate.icons.map(({ source }) => source),
+                    field,
+                    trigger,
+                    bar.placeholder,
+                    bar.disabled,
                 ]);
                 if (state.rejectedLayout === state.layout)
                     continue;
@@ -248,8 +254,10 @@ export const createSearchSupport = (doc, id, schedule) => {
         },
         reject(ids) {
             states.forEach((state) => {
-                if (ids.includes(id(state.binding.tabBar)))
+                if (ids.includes(id(state.binding.tabBar))) {
                     state.rejectedLayout = state.layout;
+                    state.last = undefined;
+                }
             });
         },
         event(event) {

package/dist/native/definitions.d.ts

@@ -36,6 +36,9 @@ export interface ShellItem extends Frame {
     iconWidth?: number;
     iconHeight?: number;
     iconPosition?: 'leading' | 'trailing' | 'top';
+    imagePadding?: number;
+    contentInsetLeading?: number;
+    contentInsetTrailing?: number;
     iconTemplate?: boolean;
     visible?: boolean;
     closeIcon?: string;
@@ -77,6 +80,7 @@ export interface ShellSearchEvent extends ShellActivation {
 }
 export interface ShellSnapshot {
     revision: number;
+    transitionDuration?: number;
     viewportWidth: number;
     controls: ShellControl[];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../src/native/definitions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../src/native/definitions.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,mBAAmB,EAAE,mBAAmB,EAAuB,MAAM,eAAe,CAAC;AAiBlH,eAAO,MAAM,aAAa,GAAU,KAAK,QAAQ,EAAE,QAAQ,mBAAmB,KAAG,OAAO,CAAC,mBAAmB,CAub3G,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAkC,mBAAmB,EAAE,mBAAmB,EAAuB,MAAM,eAAe,CAAC;AAkBnI,eAAO,MAAM,aAAa,GAAU,KAAK,QAAQ,EAAE,QAAQ,mBAAmB,KAAG,OAAO,CAAC,mBAAmB,CA6c3G,CAAC"}

package/dist/native/runtime.js

@@ -5,6 +5,7 @@ import { readCandidate, selector, shadowSelector, motionSelector } from './compo
 import { marker, unprojected } from './shared/dom';
 import { createIconRenderer } from './shared/icons';
 import { CSS_MOTION_EVENTS } from './shared/events';
+import { createCrossfade, fadeMarker } from './shared/crossfade';
 const overlays = 'ion-modal, ion-popover, ion-alert, ion-action-sheet, ion-loading, ion-picker, ion-toast, ion-menu';
 const overlayNames = ['Modal', 'Popover', 'Alert', 'ActionSheet', 'Loading', 'Picker', 'Toast'];
 const bounded = (promise) => new Promise((resolve, reject) => {
@@ -14,6 +15,7 @@ const bounded = (promise) => new Promise((resolve, reject) => {
 export const createRuntime = async (doc, plugin) => {
     const win = doc.defaultView;
     const icons = createIconRenderer();
+    const crossfade = createCrossfade(win);
     const ids = new WeakMap();
     let rejected = new WeakMap();
     const sources = new Map();
@@ -27,6 +29,8 @@ export const createRuntime = async (doc, plugin) => {
     let nextId = 0;
     let revision = 0;
     let acceptedRevision = 0;
+    let updatingRevision;
+    let pendingActivations = [];
     let lastSequence = 0;
     let lastSnapshot = '';
     let viewport = `${win.innerWidth}:${win.innerHeight}`;
@@ -49,11 +53,15 @@ export const createRuntime = async (doc, plugin) => {
         return value;
     };
     const style = doc.createElement('style');
-    style.textContent = `[${marker}], [${marker}] *, [${marker}]::before, [${marker}]::after, [${marker}]::part(native) { visibility: hidden !important; }`;
+    const hidden = `[${marker}]:not([${fadeMarker}])`;
+    style.textContent = `${hidden}, ${hidden} *, ${hidden}::before, ${hidden}::after, ${hidden}::part(native) { visibility: hidden !important; }
+    [${marker}], [${marker}] * { pointer-events: none !important; }`;
     const restore = (element) => {
         lastSnapshot = '';
         search.release(element);
         element.removeAttribute(marker);
+        if (!stopped)
+            crossfade.play(element, false);
         if (element.getAttribute('aria-hidden') === 'true') {
             const previous = sources.get(element);
             if (previous == null)
@@ -187,9 +195,10 @@ export const createRuntime = async (doc, plugin) => {
             const serialized = JSON.stringify(data);
             if (serialized === lastSnapshot && !forceRefresh)
                 return;
-            const snapshot = { ...data, revision: ++revision };
+            const snapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration() };
             forceRefresh = false;
             updates++;
+            updatingRevision = snapshot.revision;
             const result = await bounded(plugin.update(snapshot));
             if (stopped)
                 return;
@@ -224,11 +233,16 @@ export const createRuntime = async (doc, plugin) => {
             for (const element of accepted.flatMap(candidateSources)) {
                 if (!sources.has(element)) {
                     sources.set(element, element.getAttribute('aria-hidden'));
+                    crossfade.play(element, true);
                     element.setAttribute(marker, '');
                     element.setAttribute('aria-hidden', 'true');
                     element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
                 }
             }
+            const received = pendingActivations;
+            pendingActivations = [];
+            received.forEach(activate);
+            await crossfade.settled();
             if (invalidated) {
                 dirty = true;
                 await painted();
@@ -238,6 +252,8 @@ export const createRuntime = async (doc, plugin) => {
             await fail(error);
         }
         finally {
+            updatingRevision = undefined;
+            pendingActivations = [];
             if (forceRefresh)
                 rejected = new WeakMap();
             pending = false;
@@ -250,6 +266,7 @@ export const createRuntime = async (doc, plugin) => {
     const observation = { subtree: true, childList: true, characterData: true, attributes: true };
     const observer = new MutationObserver((records) => {
         if (records.some((record) => record.attributeName !== marker &&
+            record.attributeName !== fadeMarker &&
             !(record.attributeName === 'aria-hidden' &&
                 sources.has(record.target) &&
                 record.target.getAttribute('aria-hidden') === 'true')))
@@ -360,7 +377,9 @@ export const createRuntime = async (doc, plugin) => {
             resize.disconnect();
             observed.clear();
             actions.clear();
+            pendingActivations = [];
             search.destroy();
+            crossfade.destroy();
             restoreAll();
             if (!doc.hidden)
                 await painted();
@@ -380,32 +399,37 @@ export const createRuntime = async (doc, plugin) => {
             finishWaiters();
         },
     };
+    const activate = (event) => {
+        if (stopped ||
+            doc.hidden ||
+            event.revision < acceptedRevision ||
+            event.revision > revision ||
+            event.sequence <= lastSequence ||
+            overlayOpen())
+            return;
+        if (event.revision > acceptedRevision && event.revision === updatingRevision) {
+            pendingActivations.push(event);
+            return;
+        }
+        lastSequence = event.sequence;
+        const element = actions.get(event.id);
+        if (!element)
+            return;
+        const owner = Array.from(sources.keys()).find((source) => source === element || source.contains(element));
+        if (!owner)
+            return;
+        const direct = !blocked(owner) && unprojected(sources.keys(), () => readCandidate(owner, id));
+        const candidate = direct || read().find((candidate) => candidate.actions.has(event.id));
+        const item = candidate?.control.items.find((item) => item.id === event.id);
+        const searchAction = candidate?.control.search && [candidate.control.search.trigger.id, candidate.control.search.closeId].includes(event.id);
+        if (!searchAction && (!item || item.disabled || item.visible === false))
+            return;
+        element.click();
+        lastSnapshot = '';
+        schedule();
+    };
     try {
-        listener = await bounded(plugin.addListener('activate', (event) => {
-            if (stopped ||
-                doc.hidden ||
-                event.revision < acceptedRevision ||
-                event.revision > revision ||
-                event.sequence <= lastSequence ||
-                overlayOpen())
-                return;
-            lastSequence = event.sequence;
-            const element = actions.get(event.id);
-            if (!element)
-                return;
-            const owner = Array.from(sources.keys()).find((source) => source === element || source.contains(element));
-            if (!owner)
-                return;
-            const direct = !blocked(owner) && unprojected(sources.keys(), () => readCandidate(owner, id));
-            const candidate = direct || read().find((candidate) => candidate.actions.has(event.id));
-            const item = candidate?.control.items.find((item) => item.id === event.id);
-            const searchAction = candidate?.control.search && [candidate.control.search.trigger.id, candidate.control.search.closeId].includes(event.id);
-            if (!searchAction && (!item || item.disabled || item.visible === false))
-                return;
-            element.click();
-            lastSnapshot = '';
-            schedule();
-        }));
+        listener = await bounded(plugin.addListener('activate', activate));
         searchListener = await bounded(plugin.addListener('search', (event) => {
             if (stopped || doc.hidden || event.revision < acceptedRevision || event.revision > revision || overlayOpen())
                 return;

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

@@ -1 +1 @@
-{"version":3,"file":"candidate.d.ts","sourceRoot":"","sources":["../../../src/native/shared/candidate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAItF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAA;KAAE,EAAE,CAAC;CACnE;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,EAAE,MAAM,sBAAsB,EAAE,IAAI,QAAQ,KAAG,SAgBlG,CAAC;AAGF,eAAO,MAAM,UAAU,GACrB,WAAW,SAAS,EACpB,OAAO,WAAW,EAClB,IAAI,QAAQ,EACZ,UAAS,UAAkB,EAC3B,cAAmB,KAClB,SAAS,GAAG,SA2Cd,CAAC"}
+{"version":3,"file":"candidate.d.ts","sourceRoot":"","sources":["../../../src/native/shared/candidate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAItF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAA;KAAE,EAAE,CAAC;CACnE;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,EAAE,MAAM,sBAAsB,EAAE,IAAI,QAAQ,KAAG,SAgBlG,CAAC;AAGF,eAAO,MAAM,UAAU,GACrB,WAAW,SAAS,EACpB,OAAO,WAAW,EAClB,IAAI,QAAQ,EACZ,UAAS,UAAkB,EAC3B,cAAmB,KAClB,SAAS,GAAG,SA8Dd,CAAC"}

package/dist/native/shared/candidate.js

@@ -60,6 +60,23 @@ export const appendItem = (candidate, child, id, content = child, label = text(c
         item.iconPosition = (icons[0] ?? svg).getAttribute('slot') === 'end' ? 'trailing' : 'leading';
         candidate.icons.push({ item, source });
     }
+    if (native && child.matches('ion-button, ion-back-button')) {
+        const style = getComputedStyle(native);
+        const icon = icons[0] ?? svg;
+        const iconStyle = icon && getComputedStyle(icon);
+        const leadingMargin = parseFloat(iconStyle?.marginInlineStart ?? '') || 0;
+        const trailingMargin = parseFloat(iconStyle?.marginInlineEnd ?? '') || 0;
+        const trailing = item.iconPosition === 'trailing';
+        const inner = native.querySelector('.button-inner');
+        const gap = inner ? parseFloat(getComputedStyle(inner).columnGap) || 0 : 0;
+        item.contentInsetLeading =
+            (parseFloat(style.paddingInlineStart) || 0) +
+                (parseFloat(style.borderInlineStartWidth) || 0) +
+                (!trailing || !label ? leadingMargin : 0);
+        item.contentInsetTrailing =
+            (parseFloat(style.paddingInlineEnd) || 0) + (parseFloat(style.borderInlineEndWidth) || 0) + (trailing || !label ? trailingMargin : 0);
+        item.imagePadding = label && icon ? gap + (trailing ? leadingMargin : trailingMargin) : 0;
+    }
     if (!label && !svg)
         return undefined;
     candidate.control.items.push(item);

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

@@ -0,0 +1,8 @@
+export declare const fadeMarker = "data-native-ui-shell-fading";
+export declare const createCrossfade: (win: Window) => {
+    duration: () => 0 | 180;
+    play(element: HTMLElement, toNative: boolean): void;
+    settled(): Promise<void>;
+    destroy(): void;
+};
+//# sourceMappingURL=crossfade.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"crossfade.d.ts","sourceRoot":"","sources":["../../../src/native/shared/crossfade.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,gCAAgC,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM;;kBAezB,WAAW,YAAY,OAAO;;;CA8B/C,CAAC"}

package/dist/native/shared/crossfade.js

@@ -0,0 +1,46 @@
+export const fadeMarker = 'data-native-ui-shell-fading';
+export const createCrossfade = (win) => {
+    const active = new Map();
+    const reduced = win.matchMedia('(prefers-reduced-motion: reduce)');
+    const finish = (element, animation) => {
+        if (active.get(element) !== animation)
+            return;
+        active.delete(element);
+        element.removeAttribute(fadeMarker);
+        animation.cancel();
+    };
+    const cancelAll = () => {
+        for (const [element, animation] of active)
+            finish(element, animation);
+    };
+    reduced.addEventListener('change', cancelAll);
+    return {
+        duration: () => (reduced.matches ? 0 : 180),
+        play(element, toNative) {
+            const previous = active.get(element);
+            const current = Number(win.getComputedStyle(element).opacity);
+            previous?.cancel();
+            active.delete(element);
+            const opacity = Number(win.getComputedStyle(element).opacity);
+            if (reduced.matches || !element.isConnected) {
+                element.removeAttribute(fadeMarker);
+                return;
+            }
+            element.setAttribute(fadeMarker, '');
+            const animation = element.animate([{ opacity: previous ? current : toNative ? opacity : 0 }, { opacity: toNative ? 0 : opacity }], {
+                duration: 180,
+                easing: 'ease-in-out',
+                fill: 'both',
+            });
+            active.set(element, animation);
+            void animation.finished.then(() => finish(element, animation), () => finish(element, animation));
+        },
+        async settled() {
+            await Promise.all(Array.from(active.values(), (animation) => animation.finished.catch(() => { })));
+        },
+        destroy() {
+            reduced.removeEventListener('change', cancelAll);
+            cancelAll();
+        },
+    };
+};

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

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

package/dist/native/shared/dom.js

@@ -1,3 +1,4 @@
+import { fadeMarker } from './crossfade';
 export const marker = 'data-native-ui-shell';
 export const isDark = (style) => style.getPropertyValue('--ios27-color-scheme').trim() === 'dark';
 export const excluded = '.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled, .ion-page-hidden, .ion-page-invisible, .ion-cloned-element, [hidden], [inert]';
@@ -18,7 +19,7 @@ export const visible = (element) => {
         return false;
     for (let current = element; current; current = current.parentElement) {
         const style = getComputedStyle(current);
-        if (style.display === 'none' || style.visibility !== 'visible' || Number(style.opacity) === 0)
+        if (style.display === 'none' || style.visibility !== 'visible' || (Number(style.opacity) === 0 && !current.hasAttribute(fadeMarker)))
             return false;
         if (style.transform !== 'none' &&
             !new DOMMatrixReadOnly(style.transform).isIdentity &&

package/dist/popover/animations/ios.enter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ios.enter.d.ts","sourceRoot":"","sources":["../../../src/popover/animations/ios.enter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAK7C,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAMzC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,WAAW,EAAE,OAAO,GAAG,KAAG,SAmInE,CAAC"}
+{"version":3,"file":"ios.enter.d.ts","sourceRoot":"","sources":["../../../src/popover/animations/ios.enter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAMzC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,WAAW,EAAE,OAAO,GAAG,KAAG,SAmPnE,CAAC"}

package/dist/popover/animations/ios.enter.js

@@ -1,6 +1,7 @@
 import { createAnimation } from '@ionic/core';
 import { getElementRoot } from '../../utils';
 import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
+import { createCalloutSurface } from '../callout-surface';
 const POPOVER_IOS_BODY_PADDING = 5;
 export const POPOVER_IOS_BODY_MARGIN = 8;
 export const iosEnterAnimation = (baseEl, opts) => {
@@ -11,10 +12,39 @@ export const iosEnterAnimation = (baseEl, opts) => {
     const bodyHeight = doc.defaultView.innerHeight;
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
+    const arrowEl = root.querySelector('.popover-arrow');
     const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
+    const anchorBounds = referenceSizeEl?.getBoundingClientRect();
+    let paneAnchor = referenceSizeEl;
+    let pane = null;
+    while (paneAnchor && !pane) {
+        pane = paneAnchor.closest('ion-content, .ion-page, ion-menu');
+        paneAnchor = paneAnchor.getRootNode().host;
+    }
+    const paneBounds = pane?.getBoundingClientRect();
+    const scroll = pane?.shadowRoot?.querySelector('[part="scroll"]');
+    const scrollStyle = scroll ? getComputedStyle(scroll) : null;
+    let paneLeft = Math.max(0, (paneBounds?.left ?? 0) + (parseFloat(scrollStyle?.paddingLeft ?? '0') || 0));
+    let paneRight = Math.min(bodyWidth, (paneBounds?.right ?? bodyWidth) - (parseFloat(scrollStyle?.paddingRight ?? '0') || 0));
+    const splitPane = pane?.closest('ion-split-pane.split-pane-visible');
+    if (splitPane && pane?.closest('.split-pane-main')) {
+        for (const menu of Array.from(splitPane.querySelectorAll(':scope > ion-menu.menu-pane-visible'))) {
+            const rect = menu.getBoundingClientRect();
+            if (rect.left <= paneLeft && rect.right > paneLeft)
+                paneLeft = rect.right;
+            if (rect.right >= paneRight && rect.left < paneRight)
+                paneRight = rect.left;
+        }
+    }
+    const paneMargin = size === 'cover' ? 0 : POPOVER_IOS_BODY_MARGIN;
+    const availableWidth = Math.max(0, paneRight - paneLeft - paneMargin * 2);
+    if (pane && availableWidth > 0 && contentEl.getBoundingClientRect().width > availableWidth) {
+        contentEl.dataset['previousMaxWidth'] = contentEl.style.maxWidth;
+        contentEl.style.maxWidth = `${availableWidth}px`;
+    }
     const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
     const isReplace = (() => {
-        if (!['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
+        if (reference === 'event' || !referenceSizeEl || !['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
             return false;
         }
         if (referenceSizeEl.matches('.ios-theme-disabled, .ios26-disabled')) {
@@ -29,13 +59,54 @@ export const iosEnterAnimation = (baseEl, opts) => {
         originY: 'top',
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, reference, side, align, defaultPosition, trigger, ev);
+    const anchor = reference === 'event' ? results.referenceCoordinates : anchorBounds;
     const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
     const margin = size === 'cover' ? 0 : POPOVER_IOS_BODY_MARGIN;
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, addPopoverBottomClass } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, referenceSizeEl.getBoundingClientRect(), isReplace);
+    const { originX, originY, top, left: windowLeft, bottom, checkSafeAreaLeft, checkSafeAreaRight, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, referenceSizeEl?.getBoundingClientRect(), isReplace);
+    const preferredLeft = isReplace && anchorBounds
+        ? anchorBounds.left + anchorBounds.width / 2 <= (paneLeft + paneRight) / 2
+            ? anchorBounds.left
+            : anchorBounds.right - contentWidth
+        : windowLeft;
+    const left = pane ? Math.max(paneLeft + paneMargin, Math.min(paneRight - paneMargin - contentWidth, preferredLeft)) : preferredLeft;
+    const physicalSide = side === 'start' ? (isRTL ? 'right' : 'left') : side === 'end' ? (isRTL ? 'left' : 'right') : side;
+    const horizontal = physicalSide === 'left' || physicalSide === 'right';
+    const above = addPopoverBottomClass || physicalSide === 'top';
+    const hasCallout = !!arrowEl && !isReplace && !!anchor && size !== 'cover' && bottom === undefined;
+    const surfaceTop = hasCallout && !horizontal ? top + (above ? -5 : 5) : top;
+    const contentOrigin = anchor
+        ? `${anchor.left + anchor.width / 2 - left}px ${anchor.top + anchor.height / 2 - surfaceTop}px`
+        : `${originX} ${originY}`;
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const contentAnimation = createAnimation();
     const targetAnimation = createAnimation();
+    const arrowAnimation = createAnimation();
+    const surfaceAnimation = createAnimation();
+    if (arrowEl) {
+        arrowAnimation.addElement(arrowEl).delay(300).duration(200).fromTo('opacity', 0, 1);
+    }
+    if (hasCallout && anchor) {
+        const length = horizontal ? contentHeight : contentWidth;
+        const inset = Math.min(48, length / 2);
+        const center = Math.max(inset, Math.min(length - inset, horizontal ? anchor.top + anchor.height / 2 - top : anchor.left + anchor.width / 2 - left));
+        const arrowSide = horizontal ? (physicalSide === 'left' ? 'right' : 'left') : above ? 'bottom' : 'top';
+        const layers = createCalloutSurface(root, contentWidth, contentHeight, arrowSide, center);
+        baseEl.classList.add('ios-theme-callout');
+        for (const layer of layers) {
+            layer.style.left = `calc(${left - 32}px + var(--offset-x, 0))`;
+            layer.style.top = `calc(${surfaceTop - 32}px + var(--offset-y, 0))`;
+            const [originLeft, originTop] = contentOrigin.split(' ').map(parseFloat);
+            layer.style.transformOrigin = `${originLeft + 32}px ${originTop + 32}px`;
+        }
+        surfaceAnimation
+            .addElement(layers)
+            .delay(100)
+            .duration(400)
+            .easing('cubic-bezier(0, 1, 0.22, 1)')
+            .fromTo('transform', 'scale(0)', 'scale(1)')
+            .fromTo('opacity', 0.01, 1);
+    }
     backdropAnimation
         .delay(100)
         .duration(300)
@@ -50,9 +121,9 @@ export const iosEnterAnimation = (baseEl, opts) => {
         .delay(100)
         .duration(400)
         .addElement(root.querySelector('.popover-content'))
-        .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
+        .beforeStyles({ 'transform-origin': contentOrigin })
         .beforeAddWrite(() => {
-        root.querySelector('.popover-content').dataset['transformOrigin'] = `${originY} ${originX}`;
+        root.querySelector('.popover-content').dataset['transformOrigin'] = contentOrigin;
     })
         .fromTo('transform', 'scale(0)', 'scale(1)')
         .fromTo('opacity', 0.01, 1);
@@ -83,15 +154,40 @@ export const iosEnterAnimation = (baseEl, opts) => {
         const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
         const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
         let leftValue = `${left}px`;
-        if (checkSafeAreaLeft) {
+        if (checkSafeAreaLeft && !pane) {
             leftValue = `${left}px${safeAreaLeft}`;
         }
-        if (checkSafeAreaRight) {
+        if (checkSafeAreaRight && !pane) {
             leftValue = `${left}px${safeAreaRight}`;
         }
-        contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+        contentEl.style.setProperty('top', `calc(${surfaceTop}px + var(--offset-y, 0))`);
         contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
-        contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
+        contentEl.style.setProperty('transform-origin', contentOrigin);
+        if (arrowEl) {
+            arrowEl.style.display = 'none';
+            if (hasCallout && anchor) {
+                const inset = Math.min(48, (horizontal ? contentHeight : contentWidth) / 2);
+                const clamp = (value, length) => Math.max(inset, Math.min(length - inset, value));
+                let arrowLeft;
+                let arrowTop;
+                let rotation;
+                if (horizontal) {
+                    arrowLeft = physicalSide === 'left' ? left + contentWidth - 10 : left - 24;
+                    arrowTop = top + clamp(anchor.top + anchor.height / 2 - top, contentHeight) - 7;
+                    rotation = physicalSide === 'left' ? 90 : -90;
+                }
+                else {
+                    arrowLeft = left + clamp(anchor.left + anchor.width / 2 - left, contentWidth) - 17;
+                    arrowTop = above ? surfaceTop + contentHeight - 1 : surfaceTop - 13;
+                    rotation = above ? 180 : 0;
+                }
+                arrowEl.style.setProperty('display', 'block');
+                arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
+                arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
+                arrowEl.style.setProperty('bottom', 'auto');
+                arrowEl.style.setProperty('transform', `rotate(${rotation}deg)`);
+            }
+        }
     })
-        .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+        .addAnimation([backdropAnimation, contentAnimation, targetAnimation, arrowAnimation, surfaceAnimation]);
 };

package/dist/popover/animations/ios.leave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ios.leave.d.ts","sourceRoot":"","sources":["../../../src/popover/animations/ios.leave.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAK7C,eAAO,MAAM,iBAAiB,GAAI,QAAQ,WAAW,KAAG,SAmEvD,CAAC"}
+{"version":3,"file":"ios.leave.d.ts","sourceRoot":"","sources":["../../../src/popover/animations/ios.leave.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAK7C,eAAO,MAAM,iBAAiB,GAAI,QAAQ,WAAW,KAAG,SAiFvD,CAAC"}

package/dist/popover/animations/ios.leave.js

@@ -8,6 +8,12 @@ export const iosLeaveAnimation = (baseEl) => {
     const backdropAnimation = createAnimation();
     const contentAnimation = createAnimation();
     const targetAnimation = createAnimation();
+    const surfaceAnimation = createAnimation()
+        .addElement(Array.from(root.querySelectorAll('.ios-theme-callout-layer')))
+        .duration(400)
+        .easing('ease')
+        .fromTo('opacity', 0.99, 0)
+        .fromTo('transform', 'scale(1)', 'scale(0)');
     const doc = baseEl.ownerDocument;
     const replaceElement = doc.querySelector('.ios27-replace-element');
     if (replaceElement) {
@@ -45,16 +51,24 @@ export const iosLeaveAnimation = (baseEl) => {
         .afterAddWrite(() => {
         baseEl.style.removeProperty('--width');
         baseEl.classList.remove('popover-bottom');
+        baseEl.classList.remove('ios-theme-callout');
+        root.querySelectorAll('.ios-theme-callout-layer').forEach((layer) => layer.remove());
         contentEl.style.removeProperty('top');
         contentEl.style.removeProperty('left');
         contentEl.style.removeProperty('bottom');
         contentEl.style.removeProperty('transform-origin');
+        if (contentEl.dataset['previousMaxWidth'] !== undefined) {
+            contentEl.style.maxWidth = contentEl.dataset['previousMaxWidth'];
+            delete contentEl.dataset['previousMaxWidth'];
+        }
         if (arrowEl) {
             arrowEl.style.removeProperty('top');
             arrowEl.style.removeProperty('left');
             arrowEl.style.removeProperty('display');
+            arrowEl.style.removeProperty('bottom');
+            arrowEl.style.removeProperty('transform');
         }
     })
         .duration(300)
-        .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+        .addAnimation([backdropAnimation, contentAnimation, targetAnimation, surfaceAnimation]);
 };

package/dist/popover/callout-surface.d.ts

@@ -0,0 +1,2 @@
+export declare const createCalloutSurface: (root: ShadowRoot | HTMLElement, width: number, height: number, side: "top" | "right" | "bottom" | "left", center: number) => HTMLElement[];
+//# sourceMappingURL=callout-surface.d.ts.map

package/dist/popover/callout-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout-surface.d.ts","sourceRoot":"","sources":["../../src/popover/callout-surface.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,oBAAoB,GAC/B,MAAM,UAAU,GAAG,WAAW,EAC9B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EACzC,QAAQ,MAAM,KACb,WAAW,EA8Cb,CAAC"}