@rdlabo/ionic-theme-ios26 1.1.1 → 1.2.0

package/src/popover/animations/ios.enter.ts

@@ -1,7 +1,7 @@
-import { createAnimation, isPlatform } from '@ionic/core';
+import { createAnimation } from '@ionic/core';
 import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
 import { getElementRoot } from '../../utils';
-import { calculateWindowAdjustment, getArrowDimensions, getPopoverDimensions, getPopoverPosition, shouldShowArrow } from '../utils';
+import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
 
 const POPOVER_IOS_BODY_PADDING = 5;
 export const POPOVER_IOS_BODY_MARGIN = 8;
@@ -19,11 +19,9 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   const root = getElementRoot(baseEl);
   const contentEl = root.querySelector('.popover-content') as HTMLElement;
-  const arrowEl = root.querySelector('.popover-arrow') as HTMLElement | null;
 
   const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
   const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
-  const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
 
   const isReplace = ((): boolean => {
     if (!['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
@@ -42,43 +40,27 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     originY: 'top',
   };
 
-  const results = getPopoverPosition(
-    isRTL,
-    contentWidth,
-    contentHeight,
-    arrowWidth,
-    arrowHeight,
-    reference,
-    side,
-    align,
-    defaultPosition,
-    trigger,
-    ev,
-  );
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, reference, side, align, defaultPosition, trigger, ev);
 
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
   const margin = size === 'cover' ? 0 : 25;
 
-  const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass } =
-    calculateWindowAdjustment(
-      side,
-      results.top,
-      results.left,
-      padding,
-      bodyWidth,
-      bodyHeight,
-      contentWidth,
-      contentHeight,
-      margin,
-      results.originX,
-      results.originY,
-      results.referenceCoordinates,
-      results.arrowTop,
-      results.arrowLeft,
-      arrowHeight,
-      referenceSizeEl.getBoundingClientRect(),
-      isReplace,
-    );
+  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 baseAnimation = createAnimation();
   const backdropAnimation = createAnimation();
@@ -97,13 +79,12 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   // In Chromium, if the wrapper animates, the backdrop filter doesn't work.
   // The Chromium team stated that this behavior is expected and not a bug. The element animating opacity creates a backdrop root for the backdrop-filter.
-  // To get around this, instead of animating the wrapper, animate both the arrow and content.
+  // To get around this, instead of animating the wrapper, animate content.
   // https://bugs.chromium.org/p/chromium/issues/detail?id=1148826
   contentAnimation
     .easing('cubic-bezier(0, 1, 0.22, 1)')
     .delay(100)
     .duration(400)
-    .addElement(root.querySelector('.popover-arrow')!)
     .addElement(root.querySelector('.popover-content')!)
     .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
     .beforeAddWrite(() => {
@@ -114,7 +95,6 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     })
     .fromTo('transform', 'scale(0)', 'scale(1)')
     .fromTo('opacity', 0.01, 1);
-  // TODO(FW-4376) Ensure that arrow also blurs when translucent
 
   if (isReplace) {
     targetAnimation
@@ -159,18 +139,6 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
       contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
       contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
       contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
-
-      if (arrowEl !== null) {
-        const didAdjustBounds = results.top !== top || results.left !== left;
-        const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
-
-        if (showArrow) {
-          arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
-          arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
-        } else {
-          arrowEl.style.setProperty('display', 'none');
-        }
-      }
     })
     .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
 };

package/src/popover/utils.ts

@@ -19,8 +19,6 @@ interface PopoverPosition {
   top: number;
   left: number;
   referenceCoordinates?: ReferenceCoordinates;
-  arrowTop?: number;
-  arrowLeft?: number;
   originX: string;
   originY: string;
 }
@@ -33,25 +31,9 @@ export interface PopoverStyles {
   originY: string;
   checkSafeAreaLeft: boolean;
   checkSafeAreaRight: boolean;
-  arrowTop: number;
-  arrowLeft: number;
   addPopoverBottomClass: boolean;
 }
 
-/**
- * Returns the dimensions of the popover
- * arrow on `ios` mode. If arrow is disabled
- * returns (0, 0).
- */
-export const getArrowDimensions = (arrowEl: HTMLElement | null) => {
-  if (!arrowEl) {
-    return { arrowWidth: 0, arrowHeight: 0 };
-  }
-  const { width, height } = arrowEl.getBoundingClientRect();
-
-  return { arrowWidth: width, arrowHeight: height };
-};
-
 /**
  * Returns the recommended dimensions of the popover
  * that takes into account whether or not the width
@@ -324,119 +306,6 @@ const focusItem = (item: HTMLIonItemElement) => {
   }
 };
 
-/**
- * Returns `true` if `el` has been designated
- * as a trigger element for an ion-popover.
- */
-export const isTriggerElement = (el: HTMLElement) => el.hasAttribute('data-ion-popover-trigger');
-
-export const configureKeyboardInteraction = (popoverEl: HTMLIonPopoverElement) => {
-  const callback = async (ev: KeyboardEvent) => {
-    const activeElement = document.activeElement as HTMLElement | null;
-    let items: HTMLIonItemElement[] = [];
-
-    const targetTagName = (ev.target as HTMLElement)?.tagName;
-    /**
-     * Only handle custom keyboard interactions for the host popover element
-     * and children ion-item elements.
-     */
-    if (targetTagName !== 'ION-POPOVER' && targetTagName !== 'ION-ITEM') {
-      return;
-    }
-    /**
-     * Complex selectors with :not() are :not supported
-     * in older versions of Chromium so we need to do a
-     * try/catch here so errors are not thrown.
-     */
-    try {
-      /**
-       * Select all ion-items that are not children of child popovers.
-       * i.e. only select ion-item elements that are part of this popover
-       */
-      items = Array.from(
-        popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])') as NodeListOf<HTMLIonItemElement>,
-      );
-      /* eslint-disable-next-line */
-    } catch {}
-
-    switch (ev.key) {
-      /**
-       * If we are in a child popover
-       * then pressing the left arrow key
-       * should close this popover and move
-       * focus to the popover that presented
-       * this one.
-       */
-      case 'ArrowLeft':
-        const parentPopover = await popoverEl.getParentPopover();
-        if (parentPopover) {
-          popoverEl.dismiss(undefined, undefined, false);
-        }
-        break;
-      /**
-       * ArrowDown should move focus to the next focusable ion-item.
-       */
-      case 'ArrowDown':
-        // Disable movement/scroll with keyboard
-        ev.preventDefault();
-        const nextItem = getNextItem(items, activeElement);
-        if (nextItem !== undefined) {
-          focusItem(nextItem);
-        }
-        break;
-      /**
-       * ArrowUp should move focus to the previous focusable ion-item.
-       */
-      case 'ArrowUp':
-        // Disable movement/scroll with keyboard
-        ev.preventDefault();
-        const prevItem = getPrevItem(items, activeElement);
-        if (prevItem !== undefined) {
-          focusItem(prevItem);
-        }
-        break;
-      /**
-       * Home should move focus to the first focusable ion-item.
-       */
-      case 'Home':
-        ev.preventDefault();
-        const firstItem = items[0];
-        if (firstItem !== undefined) {
-          focusItem(firstItem);
-        }
-        break;
-      /**
-       * End should move focus to the last focusable ion-item.
-       */
-      case 'End':
-        ev.preventDefault();
-        const lastItem = items[items.length - 1];
-        if (lastItem !== undefined) {
-          focusItem(lastItem);
-        }
-        break;
-      /**
-       * ArrowRight, Spacebar, or Enter should activate
-       * the currently focused trigger item to open a
-       * popover if the element is a trigger item.
-       */
-      case 'ArrowRight':
-      case ' ':
-      case 'Enter':
-        if (activeElement && isTriggerElement(activeElement)) {
-          const rightEvent = new CustomEvent('ionPopoverActivateTrigger');
-          activeElement.dispatchEvent(rightEvent);
-        }
-        break;
-      default:
-        break;
-    }
-  };
-
-  popoverEl.addEventListener('keydown', callback);
-  return () => popoverEl.removeEventListener('keydown', callback);
-};
-
 /**
  * Positions a popover by taking into account
  * the reference point, preferred side, alignment
@@ -446,8 +315,6 @@ export const getPopoverPosition = (
   isRTL: boolean,
   contentWidth: number,
   contentHeight: number,
-  arrowWidth: number,
-  arrowHeight: number,
   reference: PositionReference,
   side: PositionSide,
   align: PositionAlign,
@@ -524,7 +391,7 @@ export const getPopoverPosition = (
    * popover to be positioned on the
    * preferred side of the reference.
    */
-  const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL);
+  const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, isRTL);
 
   /**
    * Get the top/left adjustments that
@@ -536,11 +403,9 @@ export const getPopoverPosition = (
   const top = coordinates.top + alignedCoordinates.top;
   const left = coordinates.left + alignedCoordinates.left;
 
-  const { arrowTop, arrowLeft } = calculateArrowPosition(side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL);
-
   const { originX, originY } = calculatePopoverOrigin(side, align, isRTL);
 
-  return { top, left, referenceCoordinates, arrowTop, arrowLeft, originX, originY };
+  return { top, left, referenceCoordinates, originX, originY };
 };
 
 /**
@@ -589,55 +454,6 @@ const getOriginYAlignment = (align: PositionAlign) => {
   }
 };
 
-/**
- * Calculates where the arrow positioning
- * should be relative to the popover content.
- */
-const calculateArrowPosition = (
-  side: PositionSide,
-  arrowWidth: number,
-  arrowHeight: number,
-  top: number,
-  left: number,
-  contentWidth: number,
-  contentHeight: number,
-  isRTL: boolean,
-) => {
-  /**
-   * Note: When side is left, right, start, or end, the arrow is
-   * been rotated using a `transform`, so to move the arrow up or down
-   * by its dimension, you need to use `arrowWidth`.
-   */
-  const leftPosition = {
-    arrowTop: top + contentHeight / 2 - arrowWidth / 2,
-    arrowLeft: left + contentWidth - arrowWidth / 2,
-  };
-
-  /**
-   * Move the arrow to the left by arrowWidth and then
-   * again by half of its width because we have rotated
-   * the arrow using a transform.
-   */
-  const rightPosition = { arrowTop: top + contentHeight / 2 - arrowWidth / 2, arrowLeft: left - arrowWidth * 1.5 };
-
-  switch (side) {
-    case 'top':
-      return { arrowTop: top + contentHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
-    case 'bottom':
-      return { arrowTop: top - arrowHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
-    case 'left':
-      return leftPosition;
-    case 'right':
-      return rightPosition;
-    case 'start':
-      return isRTL ? rightPosition : leftPosition;
-    case 'end':
-      return isRTL ? leftPosition : rightPosition;
-    default:
-      return { arrowTop: 0, arrowLeft: 0 };
-  }
-};
-
 /**
  * Calculates the required top/left
  * values needed to position the popover
@@ -649,30 +465,28 @@ const calculatePopoverSide = (
   triggerBoundingBox: ReferenceCoordinates,
   contentWidth: number,
   contentHeight: number,
-  arrowWidth: number,
-  arrowHeight: number,
   isRTL: boolean,
 ) => {
   const sideLeft = {
     top: triggerBoundingBox.top,
-    left: triggerBoundingBox.left - contentWidth - arrowWidth,
+    left: triggerBoundingBox.left - contentWidth,
   };
   const sideRight = {
     top: triggerBoundingBox.top,
-    left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth,
+    left: triggerBoundingBox.left + triggerBoundingBox.width,
   };
 
   switch (side) {
     case 'top':
       return {
-        top: triggerBoundingBox.top - contentHeight - arrowHeight,
+        top: triggerBoundingBox.top - contentHeight,
         left: triggerBoundingBox.left,
       };
     case 'right':
       return sideRight;
     case 'bottom':
       return {
-        top: triggerBoundingBox.top + triggerBoundingBox.height + arrowHeight,
+        top: triggerBoundingBox.top + triggerBoundingBox.height,
         left: triggerBoundingBox.left,
       };
     case 'left':
@@ -794,14 +608,9 @@ export const calculateWindowAdjustment = (
   contentOriginX: string,
   contentOriginY: string,
   triggerCoordinates?: ReferenceCoordinates,
-  coordArrowTop = 0,
-  coordArrowLeft = 0,
-  arrowHeight = 0,
   eventElementRect?: DOMRect,
   isReplace: boolean = false,
 ): PopoverStyles => {
-  let arrowTop = coordArrowTop;
-  const arrowLeft = coordArrowLeft;
   const triggerTop = triggerCoordinates ? triggerCoordinates.top + triggerCoordinates.height : bodyHeight / 2 - contentHeight / 2;
   const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
   let left = coordLeft;
@@ -852,11 +661,10 @@ export const calculateWindowAdjustment = (
        * it is not right up against the edge of the screen.
        */
       if (!isReplace) {
-        top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1)) - POPOVER_IOS_BODY_MARGIN;
+        top = Math.max(12, triggerTop - contentHeight - triggerHeight) - POPOVER_IOS_BODY_MARGIN;
       } else {
-        top = Math.max(12, triggerTop - contentHeight - (arrowHeight - 1));
+        top = Math.max(12, triggerTop - contentHeight);
       }
-      arrowTop = top + contentHeight;
       originY = 'bottom';
       addPopoverBottomClass = true;
 
@@ -877,36 +685,6 @@ export const calculateWindowAdjustment = (
     originY,
     checkSafeAreaLeft,
     checkSafeAreaRight,
-    arrowTop,
-    arrowLeft,
     addPopoverBottomClass,
   };
 };
-
-export const shouldShowArrow = (side: PositionSide, didAdjustBounds = false, ev?: Event, trigger?: HTMLElement) => {
-  /**
-   * If no event provided and
-   * we do not have a trigger,
-   * then this popover was likely
-   * presented via the popoverController
-   * or users called `present` manually.
-   * In this case, the arrow should not be
-   * shown as we do not have a reference.
-   */
-  if (!ev && !trigger) {
-    return false;
-  }
-
-  /**
-   * If popover is on the left or the right
-   * of a trigger, but we needed to adjust the
-   * popover due to screen bounds, then we should
-   * hide the arrow as it will never be pointing
-   * at the trigger.
-   */
-  if (side !== 'top' && side !== 'bottom' && didAdjustBounds) {
-    return false;
-  }
-
-  return true;
-};

package/src/sheets-of-glass/index.ts

@@ -26,6 +26,7 @@ export const registerEffect = (
   let scaleAnimationPromise: Promise<void> | undefined;
   let startAnimationPromise: Promise<void> | undefined;
   let maxVelocity = 0;
+  let wasRealUserClick = false;
   const effectElement = cloneElement(effectTagName);
 
   /**
@@ -38,6 +39,7 @@ export const registerEffect = (
     createAnimationGesture();
   };
   const onPointerUp = (event: PointerEvent) => {
+    wasRealUserClick = true;
     clearActivatedTimer = setTimeout(async () => {
       await onEndGesture();
       gesture.destroy();
@@ -68,12 +70,15 @@ export const registerEffect = (
     if (!currentTouchedElement) {
       return;
     }
-    currentTouchedElement!.click();
+    if (!wasRealUserClick) {
+      currentTouchedElement!.click();
+    }
     currentTouchedElement?.classList.remove('ion-activated');
     currentTouchedElement = undefined;
     effectElement.style.display = 'none';
     maxVelocity = 0;
     targetElement.classList.remove(ANIMATED_NAME);
+    wasRealUserClick = false;
   };
 
   const onStartGesture = (detail: GestureDetail): boolean | undefined => {

package/src/styles/components/ion-fab.scss

@@ -1,5 +1,9 @@
 @use '../utils/api';
 
+$scaleup-small-icon-only: 1.18;
+$scaleup-default-icon-only: 1.2;
+$scaleup-large-icon-only: 1.12;
+
 ion-fab.ios:not(.ios26-disabled) {
   ion-fab-button {
     --transition:
@@ -25,6 +29,22 @@ ion-fab.ios:not(.ios26-disabled) {
 
     &.ion-activated {
       --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &::part(native) {
+        transform: scale($scaleup-default-icon-only) translateZ(0);
+        -webkit-transform: scale($scaleup-default-icon-only) translateZ(0);
+      }
+      &.fab-button-large {
+        &::part(native) {
+          transform: scale($scaleup-large-icon-only) translateZ(0);
+          -webkit-transform: scale($scaleup-large-icon-only) translateZ(0);
+        }
+      }
+      &.fab-button-small {
+        &::part(native) {
+          transform: scale($scaleup-small-icon-only) translateZ(0);
+          -webkit-transform: scale($scaleup-small-icon-only) translateZ(0);
+        }
+      }
       &.ion-color {
         --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
       }
@@ -44,10 +64,20 @@ ion-fab.ios:not(.ios26-disabled) {
   }
 
   &.fab-horizontal-start {
-    right: calc(16px + var(--ion-safe-area-left, 0px));
+    left: calc(16px + var(--ion-safe-area-left, 0px));
   }
 
   &.fab-horizontal-end {
     right: calc(16px + var(--ion-safe-area-right, 0px));
   }
+
+  &:has(.fab-button-small) {
+    &.fab-horizontal-start {
+      left: calc(10px + var(--ion-safe-area-left, 0px));
+    }
+
+    &.fab-horizontal-end {
+      right: calc(10px + var(--ion-safe-area-right, 0px));
+    }
+  }
 }

package/src/styles/components/ion-searchbar.scss

@@ -34,3 +34,13 @@ ion-searchbar.ios:not(.ios26-disabled) {
     }
   }
 }
+
+/**
+ * This is an override for a class where cascading is specified too heavily.
+ */
+ion-toolbar.ios:not(.ios26-disabled).ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,
+ion-toolbar:not(.ios26-disabled).ion-color
+  :not(.ios26-disabled).sc-ion-searchbar-ios-h:not(.ion-color)
+  .searchbar-input.sc-ion-searchbar-ios {
+  background: rgba(var(--ios26-glass-background-rgb), 0.72);
+}

package/src/styles/components/ion-toolbar.scss

@@ -30,6 +30,26 @@ ion-toolbar.ios:not(.ios26-disabled).toolbar-searchbar {
   *[slot='end'] {
     align-self: center;
   }
+  &:has(ion-buttons[slot='start']) {
+    ion-buttons[slot='start'] {
+      margin-right: 6px;
+    }
+    ion-searchbar.ios:not(.ios26-disabled) {
+      .searchbar-input-container {
+        margin: 0 12px 0 6px;
+      }
+    }
+  }
+  &:has(ion-buttons[slot='end']) {
+    ion-buttons[slot='end'] {
+      margin-left: 6px;
+    }
+    ion-searchbar.ios:not(.ios26-disabled) {
+      .searchbar-input-container {
+        margin: 0 6px 0 12px;
+      }
+    }
+  }
 }
 
 ion-header.ios:not(.ios26-disabled),

package/src/tab-bar-searchable/animations/enter.ts

@@ -0,0 +1,92 @@
+import { ElementReferences, ElementSizes } from '../interfaces';
+import { Animation, createAnimation } from '@ionic/core';
+import { cloneElement } from '../../utils';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
+
+export const createEffectAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  const effectElement = cloneElement('ion-icon');
+  const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();
+  const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+  const selectedTabButtonIconRect = references.selectedTabButtonIcon?.getBoundingClientRect();
+
+  return createAnimation()
+    .addElement(effectElement)
+    .beforeAddWrite(() => {
+      effectElement.style.display = 'inline-block';
+      references.closeButtonIcon.style.opacity = '0';
+      if (iconName && closeButtonRect) {
+        effectElement.setAttribute('name', iconName);
+        effectElement.style.width = `${closeButtonRect.width}px`;
+        effectElement.style.height = `${closeButtonRect.height}px`;
+      }
+    })
+    .afterAddWrite(() => {
+      effectElement.style.display = 'none';
+      references.closeButtonIcon.style.opacity = '1';
+    })
+    .fromTo(
+      'transform',
+      `translate3d(${selectedTabButtonIconRect.left}px, ${selectedTabButtonIconRect.top}px, 0)`,
+      `translate3d(${closeButtonRect.left}px, ${closeButtonRect.top}px, 0)`,
+    );
+};
+
+export const createSearchContainerAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(references.searchContainer)
+    .beforeAddWrite(() => (references.searchContainer.style.transformOrigin = 'right center'))
+    .fromTo(
+      'transform',
+      `scale(${sizes.fabButton.width / sizes.searchContainer.width}, ${sizes.fabButton.height / sizes.searchContainer.height})`,
+      'scale(1)',
+    )
+    .fromTo('opacity', '0.2', '1');
+};
+
+export const createCloseButtonsAnimation = (references: ElementReferences): Animation => {
+  return createAnimation()
+    .delay(ANIMATION_DELAY_CLOSE_BUTTONS)
+    .addElement(references.closeButtons)
+    .beforeAddWrite(() => (references.closeButtons.style.transformOrigin = 'left center'))
+    .afterClearStyles(['transform', 'transform-origin'])
+    .fromTo('transform', 'scale(1.5, 1)', 'scale(1)');
+};
+
+export const createTabBarAnimation = (ionTabBar: HTMLElement, references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(ionTabBar)
+    .beforeAddWrite(() => {
+      ionTabBar.querySelectorAll<HTMLElement>('ion-tab-button').forEach((element: HTMLElement) => {
+        element.style.transition = OPACITY_TRANSITION;
+        element.style.opacity = '0';
+      });
+      references.selectedTabButton.classList.remove('tab-selected');
+      const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+      if (iconName) {
+        references.closeButtonIcon?.setAttribute('name', iconName);
+      }
+    })
+    .afterAddWrite(() => {
+      references.selectedTabButton.classList.add('tab-selected');
+      ionTabBar.style.pointerEvents = 'none';
+    })
+    .fromTo(
+      'transform',
+      'scale(1)',
+      `scale(${sizes.closeButton.width / sizes.tabBar.width}, ${sizes.closeButton.height / sizes.tabBar.height})`,
+    )
+    .fromTo('opacity', '1', '0');
+};
+
+export const createFabButtonAnimation = (ionFabButton: HTMLElement): Animation => {
+  return createAnimation()
+    .addElement(ionFabButton)
+    .beforeAddWrite(() => {
+      ionFabButton.style.transformOrigin = 'center right';
+      ionFabButton.querySelector<HTMLElement>('ion-icon')?.style.setProperty('opacity', '0');
+    })
+    .afterAddWrite(() => {
+      ionFabButton.style.pointerEvents = 'none';
+    })
+    .fromTo('opacity', '1', '0');
+};