@rdlabo/ionic-theme-ios27 0.1.0 → 0.2.1

package/{src → node_modules/@rdlabo/ionic-theme-utils/src}/popover/animations/ios.enter.ts

@@ -1,17 +1,16 @@
 import { createAnimation } from '@ionic/core';
 import type { Animation } from '@ionic/core';
-import { getElementRoot } from '../../utils';
-import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
+import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition, POPOVER_IOS_BODY_MARGIN } from '../utils';
 import { createCalloutSurface } from '../callout-surface';
+import { getElementRoot } from '../../dom';
 
 const POPOVER_IOS_BODY_PADDING = 5;
-export const POPOVER_IOS_BODY_MARGIN = 8;
 
 /**
  * iOS Popover Enter Animation
  */
 // TODO(FW-2832): types
-export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => {
+export const iosEnterAnimation = (baseEl: HTMLElement, opts: any = {}): Animation => {
   const { event: ev, size, trigger, reference, side, align } = opts;
   const doc = baseEl.ownerDocument as any;
   const isRTL = doc.dir === 'rtl';
@@ -49,6 +48,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   const availableWidth = Math.max(0, paneRight - paneLeft - paneMargin * 2);
   if (pane && availableWidth > 0 && contentEl.getBoundingClientRect().width > availableWidth) {
     contentEl.dataset['previousMaxWidth'] = contentEl.style.maxWidth;
+    contentEl.dataset['previousMaxWidthPriority'] = contentEl.style.getPropertyPriority('max-width');
     contentEl.style.maxWidth = `${availableWidth}px`;
   }
   const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
@@ -189,7 +189,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
       .duration(200)
       .addElement(referenceSizeEl)
       .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
-      .beforeAddClass('ios27-replace-element')
+      .beforeAddClass('ios-theme-replace-element')
       .fromTo('transform', 'scale(1)', 'scale(1.05)')
       .fromTo('opacity', 1, 0);
   }
@@ -200,6 +200,8 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     .duration(100)
     .beforeAddWrite(() => {
       if (size === 'cover') {
+        baseEl.dataset['iosThemePreviousWidth'] = baseEl.style.getPropertyValue('--width');
+        baseEl.dataset['iosThemePreviousWidthPriority'] = baseEl.style.getPropertyPriority('--width');
         baseEl.style.setProperty('--width', `${contentWidth}px`);
       }
 

package/{src → node_modules/@rdlabo/ionic-theme-utils/src}/popover/animations/ios.leave.ts

@@ -1,5 +1,5 @@
 import { createAnimation } from '@ionic/core';
-import { getElementRoot } from '../../utils';
+import { getElementRoot } from '../../dom';
 
 import type { Animation } from '@ionic/core';
 
@@ -23,7 +23,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
     .fromTo('transform', 'scale(1)', 'scale(0)');
 
   const doc = baseEl.ownerDocument as any;
-  const replaceElement = doc.querySelector('.ios27-replace-element') as HTMLElement | null;
+  const replaceElement = doc.querySelector('.ios-theme-replace-element') as HTMLElement | null;
 
   if (replaceElement) {
     const ratio = contentEl.getBoundingClientRect().width / contentEl.getBoundingClientRect().height;
@@ -33,7 +33,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
       .addElement(replaceElement)
       .delay(100)
       .duration(300)
-      .afterRemoveClass('ios27-replace-element')
+      .afterRemoveClass('ios-theme-replace-element')
       .fromTo('transform', `scale(${scale})`, 'scale(1)')
       .fromTo('opacity', 0, 0.9);
   }
@@ -63,7 +63,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
   return baseAnimation
     .easing('ease')
     .afterAddWrite(() => {
-      baseEl.style.removeProperty('--width');
+      if (baseEl.dataset['iosThemePreviousWidth'] !== undefined) {
+        baseEl.style.setProperty('--width', baseEl.dataset['iosThemePreviousWidth'], baseEl.dataset['iosThemePreviousWidthPriority'] ?? '');
+        delete baseEl.dataset['iosThemePreviousWidth'];
+        delete baseEl.dataset['iosThemePreviousWidthPriority'];
+      }
       baseEl.classList.remove('popover-bottom');
       baseEl.classList.remove('ios-theme-callout');
       root.querySelectorAll('.ios-theme-callout-layer').forEach((layer) => layer.remove());
@@ -73,8 +77,13 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
       contentEl.style.removeProperty('bottom');
       contentEl.style.removeProperty('transform-origin');
       if (contentEl.dataset['previousMaxWidth'] !== undefined) {
-        contentEl.style.maxWidth = contentEl.dataset['previousMaxWidth'];
+        contentEl.style.setProperty(
+          'max-width',
+          contentEl.dataset['previousMaxWidth'],
+          contentEl.dataset['previousMaxWidthPriority'] ?? '',
+        );
         delete contentEl.dataset['previousMaxWidth'];
+        delete contentEl.dataset['previousMaxWidthPriority'];
       }
 
       if (arrowEl) {

package/node_modules/@rdlabo/ionic-theme-utils/src/popover/utils.spec.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+
+import { calculateWindowAdjustment, getIndexOfItem, getNextItem, getPopoverPosition, getPrevItem } from './utils';
+
+describe('popover utilities', () => {
+  it('navigates only relative to ion-item elements', () => {
+    const items = [document.createElement('ion-item'), document.createElement('ion-item')] as HTMLIonItemElement[];
+
+    expect(getIndexOfItem(items, items[0])).toBe(0);
+    expect(getIndexOfItem(items, document.createElement('div'))).toBe(-1);
+    expect(getNextItem(items, items[0])).toBe(items[1]);
+    expect(getPrevItem(items, items[1])).toBe(items[0]);
+  });
+
+  it('keeps a popover inside the left safe-area boundary', () => {
+    expect(calculateWindowAdjustment('bottom', 20, -10, 16, 390, 844, 280, 140, 8, 'center', 'top')).toMatchObject({
+      top: 28,
+      left: 16,
+      originX: 'left',
+      checkSafeAreaLeft: true,
+      checkSafeAreaRight: false,
+    });
+  });
+
+  it('keeps a popover inside the right safe-area boundary', () => {
+    expect(calculateWindowAdjustment('bottom', 20, 150, 16, 390, 844, 280, 140, 8, 'center', 'top')).toMatchObject({
+      top: 28,
+      left: 94,
+      originX: 'right',
+      checkSafeAreaLeft: false,
+      checkSafeAreaRight: true,
+    });
+  });
+
+  it.each([
+    { isRTL: false, side: 'start' as const, left: 60, originX: 'right' },
+    { isRTL: false, side: 'end' as const, left: 140, originX: 'left' },
+    { isRTL: true, side: 'start' as const, left: 140, originX: 'left' },
+    { isRTL: true, side: 'end' as const, left: 60, originX: 'right' },
+  ])('maps the logical $side side in RTL=$isRTL', ({ isRTL, side, left, originX }) => {
+    const trigger = document.createElement('button');
+    trigger.getBoundingClientRect = () => ({
+      top: 20,
+      left: 100,
+      width: 40,
+      height: 30,
+      right: 140,
+      bottom: 50,
+      x: 100,
+      y: 20,
+      toJSON: () => ({}),
+    });
+
+    expect(
+      getPopoverPosition(isRTL, 40, 20, 'trigger', side, 'start', { top: 0, left: 0, originX: 'left', originY: 'top' }, trigger),
+    ).toMatchObject({ left, originX });
+  });
+});

package/{src → node_modules/@rdlabo/ionic-theme-utils/src}/popover/utils.ts

@@ -1,7 +1,9 @@
-import { getElementRoot, raf } from '../utils';
+import { getElementRoot, raf } from '../dom';
 
 import type { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from './popover-interface';
-import { POPOVER_IOS_BODY_MARGIN } from './animations/ios.enter';
+
+/** Shared with theme popover enter animations (iOS body margin). */
+export const POPOVER_IOS_BODY_MARGIN = 8;
 
 interface InteractionCallback {
   eventName: string;

package/node_modules/@rdlabo/ionic-theme-utils/src/sheets-of-glass.ts

@@ -0,0 +1,17 @@
+export interface EffectScales {
+  small: string;
+  medium: string;
+  large: string;
+  xlarge: string;
+}
+
+export interface registeredEffect {
+  destroy: () => void;
+}
+
+export interface AnimationPosition {
+  minPositionX: number;
+  maxPositionX: number;
+  width: number;
+  positionY: number;
+}

package/node_modules/@rdlabo/ionic-theme-utils/src/styles/index.scss

@@ -0,0 +1 @@
+@forward 'structured-list';

package/node_modules/@rdlabo/ionic-theme-utils/src/styles/md-ion-list-inset.scss

@@ -0,0 +1,20 @@
+@use 'structured-list';
+
+@mixin theme($variant: classic, $disabled-selector: null) {
+  ion-list.md {
+    @include structured-list.support-text($disabled-selector: $disabled-selector);
+
+    &.list-inset {
+      @include structured-list.layout(8px, 16px, $variant: $variant, $disabled-selector: $disabled-selector);
+      :is(#{structured-list.$groups}) ion-item > ion-input[labelplacement='floating'] {
+        transition: transform 200ms ease;
+        &:not(.label-floating) {
+          transform: translateY(-7px);
+        }
+        &.label-floating {
+          transform: translateY(-4px);
+        }
+      }
+    }
+  }
+}

package/node_modules/@rdlabo/ionic-theme-utils/src/styles/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;
+    }
+  }
+}

package/node_modules/@rdlabo/ionic-theme-utils/src/tab-bar-searchable/utils.spec.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { getElement, getElementReferences, getElementSizes } from './utils';
+
+const rect = (width: number, height: number, top = 0, left = 0) => ({ width, height, top, left }) as DOMRect;
+
+describe('tab bar searchable utilities', () => {
+  it('reports a missing required element with its selector', () => {
+    expect(() => getElement(document.createElement('div'), '.missing')).toThrow('Expected click element to be inside `.missing`');
+  });
+
+  it('collects the elements used by the searchable animation', () => {
+    const tabBar = document.createElement('ion-tab-bar');
+    tabBar.innerHTML = '<ion-tab-button class="tab-selected"><ion-icon></ion-icon></ion-tab-button>';
+    const footer = document.createElement('ion-footer');
+    footer.innerHTML =
+      '<ion-searchbar><div class="searchbar-input-container"></div></ion-searchbar><ion-buttons slot="start"><ion-button><ion-icon></ion-icon></ion-button></ion-buttons>';
+
+    const references = getElementReferences(tabBar, footer);
+
+    expect(references.selectedTabButton).toBe(tabBar.querySelector('.tab-selected'));
+    expect(references.searchContainer).toBe(footer.querySelector('.searchbar-input-container'));
+    expect(references.closeButtonIcon.tagName).toBe('ION-ICON');
+  });
+
+  it('normalizes bounding rectangles to the shared size model', () => {
+    const tabBar = document.createElement('ion-tab-bar');
+    const fab = document.createElement('ion-fab-button');
+    const closeButtons = document.createElement('ion-buttons');
+    const searchContainer = document.createElement('div');
+    const selectedTabButtonIcon = document.createElement('ion-icon');
+    const selectedTabButton = document.createElement('ion-tab-button');
+    const closeButtonIcon = document.createElement('ion-icon');
+    vi.spyOn(tabBar, 'getBoundingClientRect').mockReturnValue(rect(390, 80));
+    vi.spyOn(fab, 'getBoundingClientRect').mockReturnValue(rect(56, 56));
+    vi.spyOn(closeButtons, 'getBoundingClientRect').mockReturnValue(rect(44, 44));
+    vi.spyOn(searchContainer, 'getBoundingClientRect').mockReturnValue(rect(270, 44));
+    vi.spyOn(selectedTabButtonIcon, 'getBoundingClientRect').mockReturnValue(rect(24, 24, 12, 18));
+
+    expect(
+      getElementSizes(tabBar, fab, {
+        closeButtons,
+        searchContainer,
+        selectedTabButton,
+        selectedTabButtonIcon,
+        closeButtonIcon,
+      }),
+    ).toEqual({
+      tabBar: { width: 390, height: 80 },
+      closeButton: { width: 44, height: 44 },
+      fabButton: { width: 56, height: 56 },
+      searchContainer: { width: 270, height: 44 },
+      selectedTabButtonIcon: { width: 24, height: 24, top: 12, left: 18 },
+    });
+  });
+});

package/node_modules/@rdlabo/ionic-theme-utils/src/theme.ts

@@ -0,0 +1,51 @@
+import type { IonicConfig } from '@ionic/core';
+import type { AnimationPosition } from './sheets-of-glass';
+
+export const cloneElement = (tagName: string, useCache: boolean = true): HTMLElement => {
+  if (useCache) {
+    const cachedElement = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (cachedElement !== null) return cachedElement as HTMLElement;
+  }
+  const clonedEl = document.createElement(tagName);
+  clonedEl.classList.add('ion-cloned-element');
+  clonedEl.style.setProperty('display', 'none');
+  document.body.appendChild(clonedEl);
+  return clonedEl;
+};
+
+export const getStep = (targetX: number, position: AnimationPosition) => {
+  const currentX = targetX - position.width / 2;
+  return Math.max(0, Math.min(1, (currentX - position.minPositionX) / (position.maxPositionX - position.minPositionX)));
+};
+
+export const changeSelectedElement = (target: HTMLElement, selected: HTMLElement, tagName: string, selectedClass: string): void => {
+  target.querySelectorAll(tagName).forEach((element) => {
+    element.classList.remove(selectedClass, 'ion-activated');
+  });
+  selected.classList.add('ion-activated');
+};
+
+export class Config {
+  private values = new Map<keyof IonicConfig, unknown>();
+  reset(config: IonicConfig) {
+    this.values = new Map(Object.entries(config) as [keyof IonicConfig, unknown][]);
+  }
+  get<T = unknown>(key: keyof IonicConfig, fallback?: T): T {
+    const value = this.values.get(key);
+    return (value !== undefined ? value : fallback) as T;
+  }
+  getBoolean(key: keyof IonicConfig, fallback = false): boolean {
+    const value = this.values.get(key);
+    if (value === undefined) return fallback;
+    return typeof value === 'string' ? value === 'true' : !!value;
+  }
+  getNumber(key: keyof IonicConfig, fallback?: number): number {
+    const value = Number.parseFloat(String(this.values.get(key)));
+    return Number.isNaN(value) ? (fallback ?? Number.NaN) : value;
+  }
+  set(key: keyof IonicConfig, value: unknown) {
+    this.values.set(key, value);
+  }
+}
+
+export const config = /* @__PURE__ */ new Config();

package/node_modules/@rdlabo/ionic-theme-utils/src/transition/ios.transition.spec.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+
+import { createIosTransitionAnimation } from './ios.transition';
+
+const createPage = (translucent = false) => {
+  const page = document.createElement('div');
+  const header = document.createElement('ion-header');
+  if (translucent) {
+    header.classList.add('header-translucent');
+  }
+  page.append(header, document.createElement('ion-content'));
+  return page;
+};
+
+const createTransition = (radius?: number) => {
+  const nav = document.createElement('ion-router-outlet');
+  const enteringEl = createPage(true);
+  const leavingEl = createPage();
+  nav.append(leavingEl, enteringEl);
+  document.body.append(nav);
+
+  const animation = createIosTransitionAnimation({
+    offLeftPercent: 30,
+    radius,
+    getIonPageElement: (element) => element,
+  })(nav, { enteringEl, leavingEl });
+
+  return { animation, enteringEl, nav };
+};
+
+describe('createIosTransitionAnimation radius', () => {
+  it('does not apply a page clip when radius is omitted', () => {
+    const { animation, enteringEl, nav } = createTransition();
+
+    animation.progressStart(true);
+
+    expect(enteringEl.style.clipPath).toBe('');
+    animation.destroy();
+    nav.remove();
+  });
+
+  it('applies the configured radius', () => {
+    const { animation, enteringEl, nav } = createTransition(48);
+    enteringEl.style.clipPath = 'inset(1px)';
+
+    animation.progressStart(true);
+
+    expect(enteringEl.style.clipPath).toBe('inset(0 round 48px)');
+    animation.destroy();
+    nav.remove();
+  });
+});