@rdlabo/ionic-theme-ios27 0.2.1 → 1.0.1-beta.pr194.sha00da872ba249

package/dist/css/utils/structured-list.css

@@ -0,0 +1 @@
+

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

@@ -6,7 +6,9 @@ export declare const createSearchSupport: (doc: Document, id: (element: Element)
     keepSearchTabsVisible(): void;
     decorate(candidates: Candidate[], blocked: (element: HTMLElement) => boolean): Candidate[];
     projected: (binding: NativeSearchBinding) => boolean;
+    hasActive(): boolean;
     begin(binding: NativeSearchBinding, revision: number): void;
+    setStatus(binding: NativeSearchBinding, active: boolean, focused?: boolean): void;
     release(element: HTMLElement): void;
     reject(ids: string[]): void;
     event(event: ShellSearchEvent): void;

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;mBAuO9B,mBAAmB,YAAY,MAAM;qBAInC,WAAW;gBAGhB,MAAM,EAAE;iBAUP,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;sBA8InF,OAAO;;yBAmBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBAlJhE,mBAAmB;;mBAuU9B,mBAAmB,YAAY,MAAM;uBAKjC,mBAAmB,UAAU,OAAO;qBAUtC,WAAW;gBAGhB,MAAM,EAAE;iBASP,gBAAgB;oBAqCb,mBAAmB;;CAoBtC,CAAC"}

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

@@ -4,7 +4,52 @@ import { iconSource } from '../shared/icons';
 export const createSearchSupport = (doc, id, schedule) => {
     const states = new Map();
     let keyboardVisible = false;
+    let heldKeyboardResize = null;
+    let keyboardResizeGeneration = 0;
+    const keyboardPlugin = () => doc.defaultView?.Capacitor?.Plugins?.Keyboard;
     const projected = (binding) => binding.footer.hasAttribute(marker);
+    const holdKeyboardResize = () => {
+        const keyboard = keyboardPlugin();
+        if (!keyboard?.setResizeMode || heldKeyboardResize !== null)
+            return;
+        const setResizeMode = keyboard.setResizeMode.bind(keyboard);
+        const generation = ++keyboardResizeGeneration;
+        heldKeyboardResize = 'native';
+        void (async () => {
+            let restoreMode = 'native';
+            try {
+                const current = await keyboard.getResizeMode?.();
+                if (typeof current?.mode === 'string')
+                    restoreMode = current.mode;
+            }
+            catch {
+            }
+            if (generation !== keyboardResizeGeneration)
+                return;
+            heldKeyboardResize = restoreMode;
+            try {
+                await setResizeMode({ mode: 'none' });
+            }
+            catch {
+                if (generation === keyboardResizeGeneration)
+                    heldKeyboardResize = null;
+                return;
+            }
+            if (generation !== keyboardResizeGeneration)
+                void setResizeMode({ mode: restoreMode }).catch(() => undefined);
+        })();
+    };
+    const hasActiveProjection = () => [...states.keys()].some((binding) => binding.active && projected(binding));
+    const releaseKeyboardResize = () => {
+        if (hasActiveProjection())
+            return;
+        keyboardResizeGeneration++;
+        const mode = heldKeyboardResize;
+        heldKeyboardResize = null;
+        if (!mode)
+            return;
+        void keyboardPlugin()?.setResizeMode?.({ mode });
+    };
     const isCurrent = (state) => state.bar.isConnected &&
         state.binding.footer.querySelector('ion-searchbar') === state.bar &&
         state.bar.querySelector('input.searchbar-input') === state.input;
@@ -105,8 +150,10 @@ export const createSearchSupport = (doc, id, schedule) => {
     return {
         keyboard(visible) {
             keyboardVisible = visible;
-            if (!visible)
+            if (!visible) {
                 states.forEach((state) => (state.keyboardHidden = false));
+                releaseKeyboardResize();
+            }
             schedule();
         },
         keepSearchTabsVisible() {
@@ -130,6 +177,11 @@ export const createSearchSupport = (doc, id, schedule) => {
                 }
             }
             const inactive = [];
+            const pageHidden = (element) => !!element.closest('.ion-page-hidden, .ion-page-invisible');
+            const retainInactive = (candidate, state, keepAvailable = false) => {
+                if (state?.last)
+                    inactive.push([candidate, { ...state.last, active: false, available: keepAvailable, focused: false }]);
+            };
             for (const binding of bindings) {
                 const candidate = candidates.find((c) => c.element === binding.tabBar);
                 if (!candidate || candidate.control.search || binding.tabBar.getAttribute('slot') !== 'bottom')
@@ -140,10 +192,36 @@ export const createSearchSupport = (doc, id, schedule) => {
                     continue;
                 if (isShellDisabled(fab) || isShellDisabled(binding.footer))
                     continue;
-                if (blocked(binding.footer) || !visible(binding.trigger) || binding.footer.closest(excluded)) {
-                    const state = states.get(binding);
-                    if (state?.last)
-                        inactive.push([candidate, { ...state.last, active: false, available: false, focused: false }]);
+                const pageUnavailable = blocked(binding.footer) || !!binding.footer.closest(excluded);
+                const existing = states.get(binding);
+                if (pageUnavailable) {
+                    retainInactive(candidate, existing, !!existing?.last?.available && !pageHidden(binding.footer));
+                    if (existing?.last)
+                        continue;
+                }
+                if (binding.active && existing && isCurrent(existing) && existing.last && !pageUnavailable) {
+                    const back = binding.footer.querySelector('ion-buttons[slot=start] ion-button');
+                    if (back && !back.disabled && !back.closest(excluded)) {
+                        candidate.control.search = {
+                            ...existing.last,
+                            active: true,
+                            available: true,
+                            focused: binding.focused,
+                            value: existing.bar.value ?? '',
+                            placeholder: existing.bar.placeholder ?? '',
+                            disabled: existing.bar.disabled,
+                            editSequence: existing.editSequence,
+                            valueVersion: existing.valueVersion,
+                        };
+                        existing.last = candidate.control.search;
+                        candidate.sources = [binding.tabBar, binding.trigger.closest('ion-fab') ?? binding.trigger, binding.footer];
+                        candidate.actions.set(existing.last.trigger.id, binding.trigger);
+                        candidate.actions.set(existing.last.closeId, back);
+                        continue;
+                    }
+                }
+                if (!visible(binding.trigger) && !pageUnavailable) {
+                    retainInactive(candidate, existing);
                     continue;
                 }
                 const bar = binding.footer.querySelector('ion-searchbar');
@@ -155,10 +233,12 @@ export const createSearchSupport = (doc, id, schedule) => {
                     !binding.footer.matches('ion-footer') ||
                     !inFixedToolbar(bar) ||
                     !inFixedToolbar(back) ||
-                    bar.closest(excluded) ||
+                    (!pageUnavailable && bar.closest(excluded)) ||
                     !bar.classList.contains('ios') ||
-                    bar.classList.contains('searchbar-classic'))
+                    bar.classList.contains('searchbar-classic')) {
+                    retainInactive(candidate, existing);
                     continue;
+                }
                 if (bar.color ||
                     back.fill !== 'default' ||
                     back.color ||
@@ -171,14 +251,18 @@ export const createSearchSupport = (doc, id, schedule) => {
                     ![false, 'off', undefined].includes(bar.autocorrect) ||
                     bar.spellcheck ||
                     bar.showClearButton !== 'always' ||
-                    bar.clearIcon)
+                    bar.clearIcon) {
+                    retainInactive(candidate, existing);
                     continue;
-                if (bar.showCancelButton !== 'never' || bar.type !== 'search' || !getComputedStyle(input).backdropFilter.includes('blur'))
+                }
+                if (bar.showCancelButton !== 'never' || bar.type !== 'search' || !getComputedStyle(input).backdropFilter.includes('blur')) {
+                    retainInactive(candidate, existing);
                     continue;
+                }
                 const fabButton = binding.trigger;
                 const nativeTrigger = fabButton.shadowRoot?.querySelector('[part=native]');
-                if (binding.trigger.closest(excluded) ||
-                    back.closest(excluded) ||
+                if ((!pageUnavailable && binding.trigger.closest(excluded)) ||
+                    (!pageUnavailable && back.closest(excluded)) ||
                     back.disabled ||
                     fabButton.disabled ||
                     fabButton.color ||
@@ -186,16 +270,20 @@ export const createSearchSupport = (doc, id, schedule) => {
                     fabButton.href ||
                     !nativeTrigger ||
                     getComputedStyle(fabButton).backgroundColor !== 'rgba(0, 0, 0, 0)' ||
-                    !getComputedStyle(nativeTrigger).backdropFilter.includes('blur'))
+                    !getComputedStyle(nativeTrigger).backdropFilter.includes('blur')) {
+                    retainInactive(candidate, existing);
                     continue;
+                }
+                const state = existing ?? install(binding, bar, input);
                 const trigger = readIcon(binding.trigger, binding.trigger, candidate);
                 const searchIcon = bar.querySelector('.searchbar-search-icon');
                 const field = searchIcon && readIcon(searchIcon, bar, candidate);
-                if (!trigger || !field)
+                if (!trigger || !field) {
+                    retainInactive(candidate, state);
                     continue;
+                }
                 field.label = '';
                 field.accessibilityLabel = bar.getAttribute('aria-label') ?? input.getAttribute('aria-label') ?? 'Search';
-                const state = states.get(binding) ?? install(binding, bar, input);
                 state.layout = JSON.stringify([
                     innerWidth,
                     innerHeight,
@@ -215,16 +303,19 @@ export const createSearchSupport = (doc, id, schedule) => {
                     bar.placeholder,
                     bar.disabled,
                 ]);
-                if (state.rejectedLayout === state.layout)
+                if (state.rejectedLayout === state.layout) {
+                    retainInactive(candidate, state);
                     continue;
+                }
+                const available = !pageUnavailable && visible(binding.trigger);
                 candidate.control.search = {
                     id: id(input),
                     field,
                     trigger,
                     closeId: id(back),
-                    active: binding.active,
-                    available: true,
-                    focused: binding.focused,
+                    active: available && binding.active,
+                    available,
+                    focused: available && binding.focused,
                     value: bar.value ?? '',
                     placeholder: bar.placeholder ?? '',
                     disabled: bar.disabled,
@@ -232,9 +323,11 @@ export const createSearchSupport = (doc, id, schedule) => {
                     valueVersion: state.valueVersion,
                 };
                 state.last = candidate.control.search;
-                candidate.sources = [binding.tabBar, binding.trigger.closest('ion-fab') ?? binding.trigger, binding.footer];
-                candidate.actions.set(id(binding.trigger), binding.trigger);
-                candidate.actions.set(id(back), back);
+                if (available) {
+                    candidate.sources = [binding.tabBar, binding.trigger.closest('ion-fab') ?? binding.trigger, binding.footer];
+                    candidate.actions.set(id(binding.trigger), binding.trigger);
+                    candidate.actions.set(id(back), back);
+                }
             }
             for (const [candidate, configuration] of inactive)
                 (_a = candidate.control).search ?? (_a.search = configuration);
@@ -242,11 +335,26 @@ export const createSearchSupport = (doc, id, schedule) => {
             return candidates.filter((c) => !groups.some((group) => group !== c && group.sources?.some((source) => source.contains(c.element))));
         },
         projected,
+        hasActive() {
+            for (const [binding] of states)
+                if (binding.active && projected(binding))
+                    return true;
+            return false;
+        },
         begin(binding, revision) {
             const state = states.get(binding);
             if (state)
                 state.minimumRevision = revision;
         },
+        setStatus(binding, active, focused = false) {
+            if (!active) {
+                this.retire(binding);
+                return;
+            }
+            binding.active = true;
+            binding.focused = focused;
+            holdKeyboardResize();
+        },
         release(element) {
             for (const binding of states.keys())
                 if (binding.footer === element)
@@ -309,6 +417,7 @@ export const createSearchSupport = (doc, id, schedule) => {
                 state.input.dispatchEvent(new FocusEvent('blur'));
             }
             binding.active = binding.focused = false;
+            releaseKeyboardResize();
         },
         destroy() {
             states.forEach((state) => {
@@ -316,6 +425,7 @@ export const createSearchSupport = (doc, id, schedule) => {
                 state.restore();
             });
             states.clear();
+            releaseKeyboardResize();
         },
     };
 };

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,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AAkBvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,KACjC,OAAO,CAAC,mBAAmB,CA+e7B,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AAkBvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,KACjC,OAAO,CAAC,mBAAmB,CAof7B,CAAC"}

package/dist/native/runtime.js

@@ -137,7 +137,9 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         for (const surface of moving.keys())
             if (!surface.isConnected)
                 moving.delete(surface);
-        if (doc.hidden || overlayOpen() || (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetTop !== 0)))
+        if (doc.hidden || overlayOpen())
+            return [];
+        if (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetTop !== 0) && !search.hasActive())
             return [];
         return unprojected(sources.keys(), () => search
             .decorate(Array.from(doc.querySelectorAll(selector))
@@ -230,6 +232,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             }
             if (result.rejectedSearches?.length) {
                 search.reject(result.rejectedSearches);
+                lastSnapshot = '';
                 dirty = true;
             }
             for (const candidate of candidates) {
@@ -480,12 +483,16 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             async search(binding, active, focus) {
                 if (!getNativeSearchBindings(doc).includes(binding) || !search.projected(binding))
                     return false;
-                if (active && !binding.active)
-                    search.begin(binding, revision + 1);
-                binding.active = active;
-                binding.focused = focus ?? (active && binding.focused);
-                if (!active)
-                    search.retire(binding);
+                if (!active) {
+                    search.setStatus(binding, false);
+                }
+                else {
+                    const entering = !binding.active;
+                    if (entering)
+                        search.begin(binding, revision + 1);
+                    const nextFocused = focus === true ? true : focus === false ? false : entering ? false : binding.focused;
+                    search.setStatus(binding, true, nextFocused);
+                }
                 await flush();
                 return !stopped && search.projected(binding);
             },

package/docs/migration.md

@@ -4,9 +4,111 @@ title: Migration
 
 # Migration
 
+## From the iOS 26 theme
+
+For an app using `@rdlabo/ionic-theme-ios26`, the recommended migration keeps that package and adds `@rdlabo/ionic-theme-ios27`. The [README setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27#get-started) selects iOS 27 or iOS 26 styles by browser capability and leaves Ionic's default iOS appearance on older browsers.
+
+### 1. Add the new package
+
+Keep the iOS 26 package and add iOS 27. The new theme requires `@ionic/core` 8.8.1 or later (Ionic 8 or 9).
+
+```bash
+npm install @rdlabo/ionic-theme-ios27
+```
+
+### 2. Make the styles adaptive
+
+Replace unconditional iOS 26 imports in your global Sass stylesheet with two mutually exclusive branches. This example uses class-based dark mode:
+
+```diff
++ @use 'sass:meta';
++
+- @use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';
++ @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');
++ }
+```
+
+Keep Ionic's matching dark palette. For system or always-dark mode, replace both `-dark-class` imports with the matching variant. If you use `md-ion-list-inset`, load the corresponding package's stylesheet inside each branch. Browsers without either feature retain Ionic's default styling.
+
+### 3. Switch the animations
+
+Replace the iOS 26 animation import and gate the iOS 27 animations on the same browser features. Resolve the options before Ionic initializes:
+
+```diff
+- import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios26';
++ 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({
+-  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
+-  popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,
+-  popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,
++  ...(isPlatform('ios') ? loadIOSAnimations() : {}),
+  });
+```
+
+The iOS 27 page transition and popover animations serve both styled generations. Older browsers keep Ionic's defaults. The example uses Angular; pass the same options to React's `setupIonicReact` or Vue's `IonicVue`.
+
+### 4. Update customizations
+
+Rename theme variables and opt-out classes used by your app. For example:
+
+```diff
+  ion-content {
+-  --ios26-content-box-shadow-rgb: 0, 0, 0;
++  --ios-theme-content-box-shadow-rgb: 0, 0, 0;
+  }
+
+- <ion-button class="ios26-disabled">Standard Ionic button</ion-button>
++ <ion-button class="ios-theme-disabled">Standard Ionic button</ion-button>
+```
+
+The old names remain as deprecated fallbacks. Check the resulting screens in light and dark modes on the browsers you support.
+
+### iOS 27 only
+
+To switch entirely to iOS 27, remove the iOS 26 package and replace its stylesheet and animation imports. The stylesheet changes are:
+
+```diff
+- @use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/default-variables.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect.scss';
+```
+
+Change the animation import from `@rdlabo/ionic-theme-ios26` to `@rdlabo/ionic-theme-ios27`; the existing `isPlatform('ios')` configuration can stay. See the README's [iOS 27-only setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27#use-only-the-ios-27-theme). Unconditional imports apply the new styles on every browser using Ionic iOS mode.
+
 ## iOS 27 naming
 
-Use `@rdlabo/ionic-theme-ios27` for the current theme. Update stylesheet imports to `ionic-theme-ios27.scss` or `ionic-theme-ios27.css`, including the `-dark-always`, `-dark-system`, and `-dark-class` variants.
+For the iOS 27 branch or an iOS 27-only app, use `@rdlabo/ionic-theme-ios27`. Its stylesheets are `ionic-theme-ios27.scss` or `ionic-theme-ios27.css`, including the `-dark-always`, `-dark-system`, and `-dark-class` variants. Keep the iOS 26 stylesheet names in the iOS 26 branch of an adaptive setup.
 
 Use the version-independent `--ios-theme-*` CSS variables. The corresponding `--ios26-*` variables remain supported as deprecated fallbacks. When both are set, the new name takes precedence. For example, use `--ios-theme-content-box-shadow-rgb` instead of `--ios26-content-box-shadow-rgb`.
 
@@ -22,7 +124,7 @@ Submit buttons now use each Ionic color's standard contrast value and an iOS 27
 
 ```diff
   :root {
--   --ion-color-primary-brightness-rgb: 130, 255, 255;
--   --ion-color-primary-brightness: #96feff;
+-  --ion-color-primary-brightness-rgb: 130, 255, 255;
+-  --ion-color-primary-brightness: #96feff;
   }
 ```

package/docs/native-ui-shell.md

@@ -46,7 +46,7 @@ Native appearance follows the applied class, system or always-dark theme CSS. Sy
 | `ion-buttons`                                 | Fixed toolbar, two or more direct clear `ion-button` / `ion-menu-button` children sharing the theme glass | One `UIGlassEffect` surface with independent native buttons           |
 | `ion-back-button`                             | Standard icon and color in a fixed header/footer toolbar                                                  | Glass `UIButton`, using the resolved Ionic label/icon                 |
 | `ion-menu-button`                             | Fixed toolbar, inside the theme glass `ion-buttons`                                                       | Glass `UIButton`; original Ionic menu toggle                          |
-| `ion-tab-bar`                                 | Fixed tabs, icon-only/label-only items, one icon per item, dot/text badges, selection and disabled state                          | `UITabBar` and `UITabBarItem`                                         |
+| `ion-tab-bar`                                 | Fixed tabs, icon-only/label-only items, one icon per item, dot/text badges, selection and disabled state  | `UITabBar` and `UITabBarItem`                                         |
 | `ion-segment`                                 | Fixed toolbar, non-scrollable, text **or** one icon per item                                              | `UISegmentedControl`                                                  |
 | `ion-fab` / `ion-fab-button` / `ion-fab-list` | Glass FAB in an `ion-content` fixed slot; one main button and optional directional lists                  | Persistent glass `UIButton` per button; one FAB synchronization group |
 
@@ -92,7 +92,9 @@ Existing `attachTabBarSearchable(tabBar, fabButton, footer)` registrations autom
 
 Search registration does not bypass placement restrictions. Its searchbar and close button must be in fixed footer toolbars. Its trigger must belong to an `ion-fab[slot="fixed"]` directly inside `ion-content`, or directly on the existing non-scrolling `.ion-page` layout. A wrapper inside scrolling content is not a fixed slot.
 
-Opening search preserves the selected Ionic tab and does not automatically show the keyboard. Tap the search field or call the existing `ion-searchbar.setFocus()`. UIKit owns the search expansion, keyboard placement and return to the ordinary tabs. The trigger's resolved SVG and the search icon are projected from Ionic, including `ion-icon name`. The resting layout is measured against `ion-tab-bar` and both coordinates of the original FAB's center. A layout that cannot preserve those origins uses Web search.
+While a registration is alive, Native UI Shell keeps the searchable controller even when the page is transitioning or temporarily unavailable (`available: false`), instead of demoting back to a separate ordinary control identity. Resting chrome (including Album before search opens) uses the same `UITabBar` + `ShellTabBar.fit` path as ordinary tabs, with the search trigger pinned to the FAB when available; `UISearchTab` is shown only while the search session is active. Flipping availability or entering/leaving search crossfades between those layers. Register before the destination page finishes entering (for example in `ionViewWillEnter`) so the first visit does not paint ordinary tabs and then swap.
+
+Opening search preserves the selected Ionic tab and does not automatically show the keyboard (`automaticallyActivatesSearch` stays off). Tap the field or call `ion-searchbar.setFocus()` for the keyboard. While search is active, Native UI Shell freezes Web layout projection and holds Capacitor Keyboard resize at `none`; UIKit owns tab/search chrome (no Ionic `fit` mid-session). Leave re-fits ordinary tabs to `ion-tab-bar` and search to the FAB. Ordinary native tabs keep an optimistic selection until the Web `selected` state catches up. Input events and application `value` updates continue across the bridge until search closes. The trigger's resolved SVG and the search icon are projected from Ionic, including `ion-icon name`.
 
 Native edits pass through Ionic's input handlers, preserving `ionInput` debounce, `ionChange`, `ionFocus`, `ionBlur`, and `ionClear`. Programmatic `value` changes do not emit `ionInput`; synchronous application corrections and stale native input are distinguished. Native editing owns marked text and the caret. Returning through the footer's close action retains the value and does not emit `ionCancel` or `ionClear`.
 
@@ -245,7 +247,17 @@ On iOS, [`Components`](../ios/Sources/IonicNativeUIShellPlugin/Components) owns
 
 ## Demo and verification
 
-See the [demo and verification guide](../demo/native-ui-shell.md) for browser tests, Simulator tests and an independent SPM consumer built from the npm package.
+The demo includes a `native-ui-shell` page for exercising fixed controls. From the repository root, build the library and run the browser tests:
+
+```sh
+npm ci
+npm run build
+cd demo
+npm ci
+npx --no-install playwright install chromium
+npx --no-install playwright test e2e/native-ui-shell.spec.ts e2e/native-ui-shell-edge.spec.ts
+```
 
+For native interaction and placement tests, use Xcode 26 or later, XcodeGen and a booted iOS 26+ Simulator. From the repository root, run `sh scripts/verify-native-ui-shell.sh SIMULATOR_UDID`. This also builds an independent Swift Package Manager consumer from the npm package. Run `sh scripts/verify-native-search.sh SIMULATOR_UDID` for searchable-tab integration, or add `edge` to that command for placement, navigation and keyboard edge cases. The scripts print the location of their local test artifacts.
 
 Search controllers retain their UIKit-managed transition and are excluded from the ordinary control acquisition crossfade.

package/docs/special-markup.md

@@ -92,6 +92,15 @@ This is an introductory group. Place regular list items in a separate `ion-item-
 
 ## Full-width segments
 
+Add `.segment-style-glass` to give a segment the same glass surface and selected indicator treatment as the tab bar. The class preserves the segment's existing dimensions and text colors, supports scrollable segments, and respects Ionic's public `--background` property.
+
+```html
+<ion-segment class="segment-style-glass" value="available">
+  <ion-segment-button value="available">Available</ion-segment-button>
+  <ion-segment-button value="away">Away</ion-segment-button>
+</ion-segment>
+```
+
 For colored segments, use Ionic's `color` property (for example, `color="primary"` or `color="secondary"`). The selected surface uses the palette's base color and the selected label uses its contrast color. The optional moving glass inherits the same surface color; custom Ionic palettes work without additional registration.
 
 Add `.segment-expand` when segment buttons should divide the available width evenly. The class also changes the Liquid Glass effect sizing when `registerSegmentEffect` is used.