@rdlabo/ionic-theme-ios27 1.2.0-beta.pr246.sha237333ceac21 → 1.2.0

package/src/styles/utils/searchable.scss

@@ -0,0 +1,80 @@
+// UISearchTab keeps a compact selected-tab button until editing starts.
+ion-footer.ios.ios-theme-searchable:not(.ios-theme-disabled, .ios26-disabled):has(
+    ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled, .searchbar-classic)
+  ) {
+  > ion-toolbar {
+    --ios-theme-searchable-padding-start: 16px;
+    --ios-theme-searchable-padding-end: 20px;
+    --padding-start: var(--ios-theme-searchable-padding-start);
+    --padding-end: var(--ios-theme-searchable-padding-end);
+  }
+
+  ion-buttons[slot='start'],
+  .ios-theme-searchable-dismiss {
+    margin-inline: 0;
+
+    ion-button {
+      width: 48px;
+      height: 48px;
+      --border-radius: 50%;
+      margin: 0;
+    }
+  }
+
+  &.ios-theme-searchable-editing {
+    > ion-toolbar {
+      // Searchbar padding (8px) and container margin (4px) complete the 16px tab-bar inset.
+      --ios-theme-searchable-padding-start: 4px;
+      --ios-theme-searchable-padding-end: 8px;
+    }
+
+    ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled, .searchbar-classic) {
+      padding-inline: 8px 12px;
+    }
+
+    ion-buttons[slot='start'] {
+      display: none;
+    }
+
+    .ios-theme-searchable-dismiss {
+      display: flex !important;
+    }
+  }
+
+  ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled, .searchbar-classic) {
+    --border-radius: 24px;
+    padding-inline: 12px;
+
+    input.searchbar-input {
+      min-height: 48px;
+      padding-inline-end: 40px;
+    }
+
+    // Clear edits the value; the separate close button dismisses without clearing.
+    .searchbar-clear-button {
+      position: absolute;
+      inset-inline-end: 12px;
+      width: 20px;
+      height: 20px;
+      min-width: 20px;
+      min-height: 20px;
+      background: none;
+      box-shadow: none;
+      backdrop-filter: none;
+
+      ion-icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+
+// The hidden trigger's container must not cover the focused dismissal button.
+ion-fab.ios-theme-searchable-trigger {
+  pointer-events: none;
+
+  > ion-fab-button {
+    pointer-events: auto;
+  }
+}

package/src/styles/vertical-bars.scss

@@ -417,3 +417,35 @@ ion-tab-button.ios.ion-cloned-element.ios27-vertical-tab-effect {
     height: 100%;
   }
 }
+
+// Search shares the Web rail before Native UI Shell takes ownership.
+:is(ion-app.ios-theme-vertical-bars, ion-modal.ios-theme-vertical-bars-modal) > ion-fab.ios-theme-vertical-bars-search-projection {
+  position: fixed;
+  left: auto;
+  right: 25px;
+  top: auto;
+  bottom: 24px;
+  z-index: 3;
+  width: 46px;
+  height: 46px;
+  margin: 0;
+  > ion-fab-button {
+    width: 46px;
+    height: 46px;
+    margin: 0;
+  }
+}
+
+ion-app.ios-theme-vertical-bars ion-fab > ion-fab-button[data-native-ui-shell] {
+  visibility: hidden !important;
+}
+
+.ios-theme-vertical-bars-search-projection[hidden] {
+  display: none !important;
+}
+
+ion-app.ios-theme-vertical-bars-left > ion-fab.ios-theme-vertical-bars-search-projection,
+ion-app.ios-theme-vertical-bars-left ion-modal.ios-theme-vertical-bars-modal > ion-fab.ios-theme-vertical-bars-search-projection {
+  left: 25px;
+  right: auto;
+}

package/src/tab-bar-searchable/dismiss-button.ts

@@ -0,0 +1,33 @@
+import { close } from 'ionicons/icons';
+
+/** Keep the application's original dismissal handler for the focused search layout. */
+export const addSearchDismissButton = (footer: HTMLElement): void => {
+  if (footer.querySelector('.ios-theme-searchable-dismiss')) return;
+  const original = footer.querySelector<HTMLElement>('ion-buttons[slot=start] ion-button');
+  if (!original) return;
+  const buttons = footer.ownerDocument.createElement('ion-buttons');
+  buttons.slot = 'end';
+  // Remain hidden when the full theme is absent or opted out.
+  buttons.style.display = 'none';
+  buttons.classList.add('ios-theme-searchable-dismiss', 'ios-theme-horizontal-only');
+  const button = footer.ownerDocument.createElement('ion-button');
+  button.fill = 'default';
+  button.type = 'button';
+  button.setAttribute('aria-label', original.getAttribute('aria-label') ?? 'Close');
+  // Keep the field focused until click; blur would hide this button before dismissal.
+  button.addEventListener('pointerdown', (event) => event.preventDefault());
+  button.addEventListener('click', () => original.click());
+  const icon = footer.ownerDocument.createElement('ion-icon');
+  icon.slot = 'icon-only';
+  icon.icon = close;
+  button.append(icon);
+  buttons.append(button);
+  // Keep the editing layout while focus moves from clear to the slotted close button.
+  footer.addEventListener('focusin', (event) => {
+    if ((event.target as HTMLElement).closest('ion-searchbar')) footer.classList.add('ios-theme-searchable-editing');
+  });
+  footer.addEventListener('focusout', (event) => {
+    if (!footer.contains(event.relatedTarget as Node | null)) footer.classList.remove('ios-theme-searchable-editing');
+  });
+  original.closest('ion-toolbar')?.append(buttons);
+};

package/src/tab-bar-searchable/index.ts

@@ -1,4 +1,5 @@
 import { createAnimation } from '@ionic/core';
+import { addSearchDismissButton } from './dismiss-button';
 import {
   ANIMATION_DELAY_BASE,
   ANIMATION_DURATION,
@@ -62,6 +63,9 @@ export const attachTabBarSearchable = (
     throw new Error('TabBarSearchable should be defined with props');
   }
   // Initialize
+  ionFooter.classList.add('ios-theme-searchable');
+  ionFabButton.closest('ion-fab')?.classList.add('ios-theme-searchable-trigger');
+  addSearchDismissButton(ionFooter);
   ionFooter.style.pointerEvents = 'none';
   ionFooter.style.opacity = '0';
   // Search dismissal belongs beside the Web search field, never in the vertical rail.
@@ -191,6 +195,8 @@ const leaveEvent = async (
     throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');
   }
 
+  const focused = ionFooter.ownerDocument.activeElement;
+  if (focused instanceof HTMLElement && ionFooter.contains(focused)) focused.blur();
   const references = getElementReferences(ionTabBar, ionFooter);
 
   const tabAnimations = verticalSearch