@rdlabo/ionic-theme-ios27 0.2.1 → 1.0.1

package/src/native/components/searchable-tabs.ts

@@ -25,7 +25,55 @@ interface SearchState {
 export const createSearchSupport = (doc: Document, id: (element: Element) => string, schedule: () => void) => {
   const states = new Map<NativeSearchBinding, SearchState>();
   let keyboardVisible = false;
+  let heldKeyboardResize: string | null = null;
+  let keyboardResizeGeneration = 0;
+  type KeyboardPlugin = {
+    setResizeMode?: (options: { mode: string }) => Promise<void>;
+    getResizeMode?: () => Promise<{ mode?: string }>;
+  };
+  const keyboardPlugin = (): KeyboardPlugin | undefined =>
+    (
+      doc.defaultView as Window & {
+        Capacitor?: { Plugins?: { Keyboard?: KeyboardPlugin } };
+      }
+    )?.Capacitor?.Plugins?.Keyboard;
   const projected = (binding: NativeSearchBinding) => binding.footer.hasAttribute(marker);
+  // Hold Cap resize at none while search is active so WebView shrink does not fight UISearchTab.
+  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 {
+        /* keep default restore target */
+      }
+      if (generation !== keyboardResizeGeneration) return;
+      heldKeyboardResize = restoreMode;
+      try {
+        await setResizeMode({ mode: 'none' });
+      } catch {
+        if (generation === keyboardResizeGeneration) heldKeyboardResize = null;
+        return;
+      }
+      // Leave raced ahead of setResizeMode(none) — undo the stale none apply.
+      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: SearchState) =>
     state.bar.isConnected &&
     state.binding.footer.querySelector('ion-searchbar') === state.bar &&
@@ -118,7 +166,10 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
   return {
     keyboard(visible: boolean) {
       keyboardVisible = visible;
-      if (!visible) states.forEach((state) => (state.keyboardHidden = false));
+      if (!visible) {
+        states.forEach((state) => (state.keyboardHidden = false));
+        releaseKeyboardResize();
+      }
       schedule();
     },
     keepSearchTabsVisible() {
@@ -142,6 +193,13 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
         }
       }
       const inactive: [Candidate, ShellSearch][] = [];
+      const pageHidden = (element: HTMLElement) => !!element.closest('.ion-page-hidden, .ion-page-invisible');
+      const retainInactive = (candidate: Candidate, state?: SearchState, keepAvailable = false) => {
+        // Keep ShellSearchController across page transitions instead of demoting to UITabBar.
+        // While the searchable page is only blocked mid-transition (not yet hidden), keep
+        // available:true so native chrome does not swap to ordinary idleBar over album content.
+        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') continue;
@@ -153,9 +211,37 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
         )
           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;
+          // First registration during a transition: fall through and measure available:false.
+        }
+        if (binding.active && existing && isCurrent(existing) && existing.last && !pageUnavailable) {
+          const back = binding.footer.querySelector<HTMLIonButtonElement>('ion-buttons[slot=start] ion-button');
+          // Close must stay eligible; otherwise fall through and demote instead of caching active.
+          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<HTMLElement>('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<HTMLIonSearchbarElement>('ion-searchbar');
@@ -168,11 +254,13 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
           !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')
-        )
+        ) {
+          retainInactive(candidate, existing);
           continue;
+        }
         if (
           bar.color ||
           back.fill !== 'default' ||
@@ -187,14 +275,19 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
           bar.spellcheck ||
           bar.showClearButton !== 'always' ||
           bar.clearIcon
-        )
+        ) {
+          retainInactive(candidate, existing);
           continue;
-        if (bar.showCancelButton !== 'never' || bar.type !== 'search' || !getComputedStyle(input).backdropFilter.includes('blur')) continue;
+        }
+        if (bar.showCancelButton !== 'never' || bar.type !== 'search' || !getComputedStyle(input).backdropFilter.includes('blur')) {
+          retainInactive(candidate, existing);
+          continue;
+        }
         const fabButton = binding.trigger as HTMLIonFabButtonElement;
         const nativeTrigger = fabButton.shadowRoot?.querySelector<HTMLElement>('[part=native]');
         if (
-          binding.trigger.closest(excluded) ||
-          back.closest(excluded) ||
+          (!pageUnavailable && binding.trigger.closest(excluded)) ||
+          (!pageUnavailable && back.closest(excluded)) ||
           back.disabled ||
           fabButton.disabled ||
           fabButton.color ||
@@ -203,15 +296,20 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
           !nativeTrigger ||
           getComputedStyle(fabButton).backgroundColor !== 'rgba(0, 0, 0, 0)' ||
           !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<HTMLElement>('.searchbar-search-icon');
         const field = searchIcon && readIcon(searchIcon, bar, candidate);
-        if (!trigger || !field) continue;
+        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,
@@ -231,15 +329,19 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
           bar.placeholder,
           bar.disabled,
         ]);
-        if (state.rejectedLayout === state.layout) continue;
+        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,
@@ -247,19 +349,36 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
           valueVersion: state.valueVersion,
         };
         state.last = candidate.control.search;
-        candidate.sources = [binding.tabBar, binding.trigger.closest<HTMLElement>('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<HTMLElement>('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) candidate.control.search ??= configuration;
       const groups = candidates.filter((c) => c.control.search);
       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: NativeSearchBinding, revision: number) {
       const state = states.get(binding);
       if (state) state.minimumRevision = revision;
     },
+    /** Enter / focus / leave. `focused` is ignored when leaving. */
+    setStatus(binding: NativeSearchBinding, active: boolean, focused = false) {
+      if (!active) {
+        this.retire(binding);
+        return;
+      }
+      binding.active = true;
+      // Projection intent only. Ionic focus/blur events still wait for the native phase.
+      binding.focused = focused;
+      holdKeyboardResize();
+    },
     release(element: HTMLElement) {
       for (const binding of states.keys()) if (binding.footer === element) this.retire(binding);
     },
@@ -267,8 +386,7 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
       states.forEach((state) => {
         if (ids.includes(id(state.binding.tabBar))) {
           state.rejectedLayout = state.layout;
-          // A rejected search surface has been removed by UIKit. Do not reuse its
-          // cached configuration on an inactive page; project ordinary tabs instead.
+          // UIKit removed the search surface — do not reuse its cache; project ordinary tabs.
           state.last = undefined;
         }
       });
@@ -319,6 +437,7 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
         state.input.dispatchEvent(new FocusEvent('blur'));
       }
       binding.active = binding.focused = false;
+      releaseKeyboardResize();
     },
     destroy() {
       states.forEach((state) => {
@@ -326,6 +445,7 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
         state.restore();
       });
       states.clear();
+      releaseKeyboardResize();
     },
   };
 };

package/src/native/runtime.ts

@@ -148,8 +148,8 @@ export const createRuntime = async (
     search.keepSearchTabsVisible();
     for (const page of pages) if (!page.isConnected) pages.delete(page);
     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)))
-      return [];
+    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(
@@ -246,6 +246,7 @@ export const createRuntime = async (
       }
       if (result.rejectedSearches?.length) {
         search.reject(result.rejectedSearches);
+        lastSnapshot = '';
         dirty = true;
       }
       for (const candidate of candidates) {
@@ -496,10 +497,14 @@ export const createRuntime = async (
     setNativeUIShellIntegration(doc, {
       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/src/styles/components/ion-list.scss

@@ -1,4 +1,4 @@
-@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
+@use '../utils/structured-list';
 
 ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --ion-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e8e8e8));

package/src/styles/md-ion-list-inset.scss

@@ -1,4 +1,4 @@
-@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
+@use './utils/structured-list';
 
 ion-list.md {
   @include structured-list.support-text;

package/src/styles/utils/dark/ion-list.scss

@@ -1,4 +1,4 @@
-@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
+@use '../structured-list';
 
 @mixin ion-list {
   ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {

package/src/styles/utils/structured-list.scss

@@ -0,0 +1,310 @@
+$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
+
+@function _disabled-suffix($disabled-selector) {
+  @if $disabled-selector {
+    @return ':not(#{$disabled-selector})';
+  }
+
+  @return '';
+}
+
+// Derive neutral list colors from the application's Ionic medium palette.
+@mixin colors($supporting-opacity, $detail-opacity) {
+  ion-item {
+    --detail-icon-color: rgb(var(--ion-color-medium-rgb));
+    --detail-icon-opacity: #{$detail-opacity};
+  }
+
+  &.list-inset {
+    ion-list-header ion-label:not(.ion-color) {
+      color: rgba(var(--ion-color-medium-rgb), $supporting-opacity);
+    }
+
+    ion-list-header ion-note:not(.ion-color),
+    > ion-note:not(.ion-color) {
+      --color: rgba(var(--ion-color-medium-rgb), #{$supporting-opacity});
+    }
+  }
+}
+
+@mixin support-text($disabled-selector: null) {
+  $d: _disabled-suffix($disabled-selector);
+
+  ion-item#{$d} {
+    &:has(ion-input.input-fill-outline),
+    &:has(ion-textarea.textarea-fill-outline),
+    &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))),
+    &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))),
+    &: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-input#{$d} .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))),
+    ion-textarea#{$d} .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))) {
+      display: none;
+    }
+  }
+}
+
+@mixin layout($outer-note-inset, $group-border-radius, $variant: classic, $disabled-selector: null) {
+  $d: _disabled-suffix($disabled-selector);
+  $is-ios27: $variant == ios27;
+
+  background: transparent;
+
+  ion-list-header#{$d} {
+    display: flex;
+    align-items: center;
+
+    ion-label#{$d} {
+      @if $is-ios27 {
+        font-size: 1rem;
+        line-height: 1.29rem;
+        font-weight: 600;
+      } @else {
+        font-size: 0.9rem;
+      }
+      margin: 8px 4px 4px;
+
+      &:not(.ion-color) {
+        color: var(--ion-color-medium-tint);
+      }
+    }
+
+    ion-button#{$d} {
+      margin-top: 8px;
+    }
+
+    ion-note#{$d} {
+      @if $is-ios27 {
+        font-size: 0.76rem;
+        line-height: 1.06rem;
+        font-weight: 400;
+        margin-block: 8px 4px;
+        margin-inline: 0 16px;
+
+        &:not(.ion-color) {
+          --color: var(--ion-color-medium-tint);
+        }
+      } @else {
+        font-size: 0.9rem;
+        margin-block: 8px 4px;
+        margin-inline: 0 16px;
+      }
+    }
+  }
+
+  @if $is-ios27 {
+    ion-item-group.item-group-header#{$d} {
+      border-radius: $group-border-radius;
+
+      > ion-item#{$d} {
+        --inner-padding-end: 0;
+        --inner-border-width: 0;
+
+        &::part(native) {
+          padding-inline: 0;
+        }
+      }
+
+      & > ion-item#{$d} > ion-label#{$d} {
+        width: 100%;
+        margin: 0;
+        text-align: start;
+        white-space: normal;
+        padding: 16px 20px;
+
+        /**
+         * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+         */
+        ion-header.header-collapse-condense > ion-toolbar {
+          --min-height: 0;
+          visibility: hidden;
+        }
+
+        ion-icon#{$d} {
+          font-size: 2.82rem;
+          border-radius: 20%;
+          padding: 6px;
+          vertical-align: top;
+
+          &:not(.ion-color) {
+            color: #ffffff;
+          }
+        }
+
+        h2 {
+          font-size: 1.29rem;
+          font-weight: 700;
+          line-height: 1.53rem;
+          margin: 20px 0 8px;
+        }
+
+        ion-text#{$d} {
+          display: block;
+          font-size: 1rem;
+          line-height: 1.29rem;
+
+          &:not(.ion-color) {
+            color: var(--ion-color-step-500, var(--ion-text-color-step-500, #808080));
+          }
+        }
+      }
+    }
+  } @else {
+    ion-item-group.item-group-header#{$d} {
+      & > ion-item#{$d} > ion-label#{$d} {
+        width: 100%;
+        text-align: center;
+        padding: 32px 16px 16px;
+        transform: translateX(5px);
+
+        &:dir(rtl) {
+          transform: translateX(-5px);
+        }
+
+        /**
+         * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+         */
+        ion-header.header-collapse-condense > ion-toolbar {
+          --min-height: 0;
+          visibility: hidden;
+        }
+
+        ion-icon#{$d} {
+          font-size: 2.8rem;
+          border-radius: 20%;
+          padding: 6px;
+
+          &:not(.ion-color) {
+            color: #ffffff;
+          }
+        }
+
+        h2 {
+          font-size: 1.2rem;
+          font-weight: bold;
+          margin-top: 8px;
+        }
+
+        ion-text#{$d} {
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+
+  > :is(#{$groups})#{$d} {
+    display: block;
+    border-radius: $group-border-radius;
+    overflow: hidden;
+
+    &:has(> .radio-group-top) {
+      display: flex;
+      flex-direction: column;
+      border-radius: 0;
+      overflow: visible;
+
+      > .radio-group-top {
+        order: 1;
+        font-size: 0.9rem;
+        padding-block-start: 8px;
+      }
+
+      > ion-item#{$d}:first-of-type {
+        --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
+      }
+
+      > ion-item#{$d}:last-of-type {
+        --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius};
+      }
+    }
+
+    &:not(:first-of-type) {
+      margin-top: 16px;
+    }
+
+    ion-item#{$d} {
+      &: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-label#{$d},
+        & > ion-note#{$d} {
+          width: auto;
+          align-self: flex-start;
+        }
+        & > ion-label#{$d} {
+          margin: 0;
+          font-weight: 500;
+          @if $is-ios27 {
+            font-size: 1rem;
+            line-height: 1.29rem;
+          } @else {
+            font-size: 1.15rem;
+            line-height: 0.9rem;
+          }
+        }
+        & > ion-note#{$d} {
+          @if $is-ios27 {
+            font-size: 0.88rem;
+            line-height: 1.18rem;
+          } @else {
+            font-size: 0.85rem;
+          }
+        }
+      }
+
+      ion-text[slot='end']#{$d} {
+        padding-inline-start: 8px;
+      }
+
+      &.item-disabled {
+        --detail-icon-opacity: 0.1;
+        opacity: 1;
+
+        & > * {
+          opacity: 0.4;
+        }
+      }
+
+      ion-button[slot='end']#{$d} {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only']#{$d} {
+          font-size: 1.2rem;
+          transform: translateY(4px);
+        }
+      }
+    }
+  }
+
+  & > ion-note#{$d} {
+    margin-block: 8px;
+    margin-inline: calc(var(--ion-safe-area-left, 0) + $outer-note-inset) calc(var(--ion-safe-area-right, 0) + $outer-note-inset);
+
+    &:dir(rtl) {
+      margin-inline: calc(var(--ion-safe-area-right, 0) + $outer-note-inset) calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
+    }
+
+    @if $is-ios27 {
+      font-size: 0.76rem;
+      line-height: 1.06rem;
+      font-weight: 400;
+      display: block;
+      &:not(.ion-color) {
+        --color: var(--ion-color-medium-tint);
+      }
+    } @else {
+      --color: var(--ion-color-medium-tint);
+      font-size: 0.9rem;
+      display: block;
+    }
+  }
+}