@rdlabo/ionic-theme-ios27 0.1.0-0

package/docs/using-ion-item-group.md

@@ -0,0 +1,47 @@
+---
+title: Using ion-item-group
+---
+
+# Using `ion-item-group` in inset lists
+
+Most Ionic markup works without changes. When an `ion-list` uses `inset="true"`, wrap its items in `ion-item-group` and keep `ion-list-header` outside the group.
+
+The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.
+
+```html
+<ion-list inset="true">
+  <ion-list-header><ion-label>Connections</ion-label></ion-list-header>
+  <ion-item-group>
+    <ion-item>...</ion-item>
+    <ion-item>...</ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+No wrapper is required for lists that do not use `inset="true"`.
+
+[Check list structure with ESLint](./eslint.md).
+
+## Why the wrapper is required
+
+Ionic normally gives `ion-list` its background, which makes `ion-list-header` appear inside the same surface as the items. The iOS 26 layout treats the header and item surface separately.
+
+![Inset list background comparison showing why ion-item-group is required](https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios26/v3.0.0/screenshots/why-ion-list-inset.png)
+
+The theme therefore:
+
+- makes the inset `ion-list` background transparent;
+- applies the item surface to `ion-item-group`; and
+- leaves `ion-list-header` outside that surface.
+
+## Sharing the markup with Material Design
+
+`@rdlabo/ionic-theme-md3` supports the same grouped markup, so one template can be used for both Ionic modes.
+
+When an application uses this package without `@rdlabo/ionic-theme-md3`, import the optional stylesheet to apply the same grouped layout in Material mode:
+
+```css
+@import '@rdlabo/ionic-theme-ios27/dist/css/md-ion-list-inset.css';
+```
+
+For two-line items and section-header groups, see [Special markup and classes](./special-markup.md).

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@rdlabo/ionic-theme-ios27",
+  "private": false,
+  "version": "0.1.0-0",
+  "description": "iOS27 Theme for Ionic Framework",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/css/*": "./dist/css/*",
+    "./src/styles/*": "./src/styles/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "package.json",
+    "docs"
+  ],
+  "scripts": {
+    "build": "npm run build:css && npm run build:ts",
+    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
+    "build:ts": "tsc",
+    "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
+    "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
+    "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",
+    "release": "np --no-tests --no-publish",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/rdlabo-dev/ionic-theme-ios27.git"
+  },
+  "keywords": [
+    "ionic",
+    "framework",
+    "theme",
+    "css",
+    "ios27"
+  ],
+  "author": "Masahiko Sakakibara <sakakibara@rdlabo.jp>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rdlabo-dev/ionic-theme-ios27/issues"
+  },
+  "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios26",
+  "devDependencies": {
+    "@ionic/angular": "^9.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.1",
+    "np": "^10.2.0",
+    "prettier": "^3.6.2",
+    "sass": "^1.93.2",
+    "typescript": "^5.9.3",
+    "wrangler": "^4.125.0"
+  },
+  "peerDependencies": {
+    "@ionic/core": ">=8.8.1 <10"
+  }
+}

package/src/focus-controller/index.ts

@@ -0,0 +1,123 @@
+import { config } from '../utils';
+// import { printIonWarning} from '@ionic/core/dist/types/utils/logging';
+
+/**
+ * Moves focus to a specified element. Note that we do not remove the tabindex
+ * because that can result in an unintentional blur. Non-focusables can't be
+ * focused, so the body will get focused again.
+ */
+const moveFocus = (el: HTMLElement) => {
+  el.tabIndex = -1;
+  el.focus();
+};
+
+/**
+ * Elements that are hidden using `display: none` should not be focused even if
+ * they are present in the DOM.
+ */
+const isVisible = (el: HTMLElement) => {
+  return el.offsetParent !== null;
+};
+
+/**
+ * The focus controller allows us to manage focus within a view so assistive
+ * technologies can inform users of changes to the navigation state. Traditional
+ * native apps have a way of informing assistive technology about a navigation
+ * state change. Mobile browsers have this too, but only when doing a full page
+ * load. In a single page app we do not do that, so we need to build this
+ * integration ourselves.
+ */
+export const createFocusController = (): FocusController => {
+  const saveViewFocus = (referenceEl?: HTMLElement) => {
+    const focusManagerEnabled = config.get('focusManagerPriority', false);
+
+    /**
+     * When going back to a previously visited page focus should typically be moved
+     * back to the element that was last focused when the user was on this view.
+     */
+    if (focusManagerEnabled) {
+      const activeEl = document.activeElement;
+      if (activeEl !== null && referenceEl?.contains(activeEl)) {
+        activeEl.setAttribute(LAST_FOCUS, 'true');
+      }
+    }
+  };
+
+  const setViewFocus = (referenceEl: HTMLElement) => {
+    const focusManagerPriorities = config.get('focusManagerPriority', false);
+    /**
+     * If the focused element is a descendant of the referenceEl then it's possible
+     * that the app developer manually moved focus, so we do not want to override that.
+     * This can happen with inputs the are focused when a view transitions in.
+     */
+    if (Array.isArray(focusManagerPriorities) && !referenceEl.contains(document.activeElement)) {
+      /**
+       * When going back to a previously visited view focus should always be moved back
+       * to the element that the user was last focused on when they were on this view.
+       */
+      const lastFocus = referenceEl.querySelector<HTMLElement>(`[${LAST_FOCUS}]`);
+      if (lastFocus && isVisible(lastFocus)) {
+        moveFocus(lastFocus);
+        return;
+      }
+
+      for (const priority of focusManagerPriorities) {
+        /**
+         * For each recognized case (excluding the default case) make sure to return
+         * so that the fallback focus behavior does not run.
+         *
+         * We intentionally query for specific roles/semantic elements so that the
+         * transition manager can work with both Ionic and non-Ionic UI components.
+         *
+         * If new selectors are added, be sure to remove the outline ring by adding
+         * new selectors to rule in core.scss.
+         */
+        switch (priority) {
+          case 'content':
+            const content = referenceEl.querySelector<HTMLElement>('main, [role="main"]');
+            if (content && isVisible(content)) {
+              moveFocus(content);
+              return;
+            }
+            break;
+          case 'heading':
+            const headingOne = referenceEl.querySelector<HTMLElement>('h1, [role="heading"][aria-level="1"]');
+            if (headingOne && isVisible(headingOne)) {
+              moveFocus(headingOne);
+              return;
+            }
+            break;
+          case 'banner':
+            const header = referenceEl.querySelector<HTMLElement>('header, [role="banner"]');
+            if (header && isVisible(header)) {
+              moveFocus(header);
+              return;
+            }
+            break;
+          default:
+            // printIonWarning(`Unrecognized focus manager priority value ${priority}`);
+            break;
+        }
+      }
+
+      /**
+       * If there is nothing to focus then focus the page so focus at least moves to
+       * the correct view. The browser will then determine where within the page to
+       * move focus to.
+       */
+      moveFocus(referenceEl);
+    }
+  };
+
+  return {
+    saveViewFocus,
+    setViewFocus,
+  };
+};
+
+export type FocusController = {
+  saveViewFocus: (referenceEl?: HTMLElement) => void;
+  setViewFocus: (referenceEl: HTMLElement) => void;
+};
+
+const LAST_FOCUS = 'ion-last-focus';

package/src/index.ts

@@ -0,0 +1,33 @@
+import { registeredEffect } from './sheets-of-glass/interfaces';
+import { registerEffect } from './sheets-of-glass';
+export * from './sheets-of-glass/interfaces';
+export { iosEnterAnimation as popoverEnterAnimation } from './popover/animations/ios.enter';
+export { iosLeaveAnimation as popoverLeaveAnimation } from './popover/animations/ios.leave';
+export * from './tab-bar-searchable';
+export * from './transition/ios.transition';
+
+export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffect | undefined => {
+  return registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
+    small: 'scale(1.1, 1)',
+    medium: 'scale(1.2)',
+    large: 'scale(1.3)',
+    xlarge: 'scale(1.15, 1.4)',
+  });
+};
+
+export const registerSegmentEffect = (targetElement: HTMLElement): registeredEffect | undefined => {
+  const scale = !targetElement.classList.contains('segment-expand')
+    ? {
+        small: 'scale(1.35)',
+        medium: 'scale(1.45)',
+        large: 'scale(1.55)',
+        xlarge: 'scale(1.55, 1.65)',
+      }
+    : {
+        small: 'scale(1.02, 1.35)',
+        medium: 'scale(1.03, 1.45)',
+        large: 'scale(1.04, 1.55)',
+        xlarge: 'scale(1.05, 1.65)',
+      };
+  return registerEffect(targetElement, 'ion-segment-button', 'segment-button-checked', scale);
+};

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

@@ -0,0 +1,144 @@
+import { createAnimation } from '@ionic/core';
+import type { Animation } from '@ionic/core';
+import { getElementRoot } from '../../utils';
+import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
+
+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 => {
+  const { event: ev, size, trigger, reference, side, align } = opts;
+  const doc = baseEl.ownerDocument as any;
+  const isRTL = doc.dir === 'rtl';
+  const bodyWidth = doc.defaultView.innerWidth;
+  const bodyHeight = doc.defaultView.innerHeight;
+
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content') as HTMLElement;
+
+  const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
+  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
+
+  const isReplace = ((): boolean => {
+    if (!['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
+      return false;
+    }
+    if (referenceSizeEl.classList.contains('ios26-disabled')) {
+      return false;
+    }
+    return true;
+  })();
+
+  const defaultPosition = {
+    top: bodyHeight / 2 - contentHeight / 2,
+    left: bodyWidth / 2 - contentWidth / 2,
+    originX: isRTL ? 'right' : 'left',
+    originY: 'top',
+  };
+
+  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 : POPOVER_IOS_BODY_MARGIN;
+
+  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();
+  const contentAnimation = createAnimation();
+  const targetAnimation = createAnimation();
+
+  backdropAnimation
+    .delay(100)
+    .duration(300)
+    .addElement(root.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none',
+    })
+    .afterClearStyles(['pointer-events']);
+
+  // 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 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-content')!)
+    .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
+    .beforeAddWrite(() => {
+      /**
+       * 'transformOrigin' use for leave animation.
+       */
+      root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'] = `${originY} ${originX}`;
+    })
+    .fromTo('transform', 'scale(0)', 'scale(1)')
+    .fromTo('opacity', 0.01, 1);
+
+  if (isReplace) {
+    targetAnimation
+      .delay(0)
+      .duration(200)
+      .addElement(referenceSizeEl)
+      .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
+      .beforeAddClass('ios26-replace-element')
+      .fromTo('transform', 'scale(1)', 'scale(1.05)')
+      .fromTo('opacity', 1, 0);
+  }
+
+  return baseAnimation
+    .easing('ease')
+    .delay(100)
+    .duration(100)
+    .beforeAddWrite(() => {
+      if (size === 'cover') {
+        baseEl.style.setProperty('--width', `${contentWidth}px`);
+      }
+
+      if (addPopoverBottomClass) {
+        baseEl.classList.add('popover-bottom');
+      }
+
+      if (bottom !== undefined) {
+        contentEl.style.setProperty('bottom', `${bottom}px`);
+      }
+
+      const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
+      const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
+
+      let leftValue = `${left}px`;
+
+      if (checkSafeAreaLeft) {
+        leftValue = `${left}px${safeAreaLeft}`;
+      }
+      if (checkSafeAreaRight) {
+        leftValue = `${left}px${safeAreaRight}`;
+      }
+
+      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}`);
+    })
+    .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+};

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

@@ -0,0 +1,76 @@
+import { createAnimation } from '@ionic/core';
+import { getElementRoot } from '../../utils';
+
+import type { Animation } from '@ionic/core';
+
+/**
+ * iOS Popover Leave Animation
+ */
+export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content') as HTMLElement;
+  const arrowEl = root.querySelector('.popover-arrow') as HTMLElement | null;
+
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const contentAnimation = createAnimation();
+  const targetAnimation = createAnimation();
+
+  const doc = baseEl.ownerDocument as any;
+  const replaceElement = doc.querySelector('.ios26-replace-element') as HTMLElement | null;
+
+  if (replaceElement) {
+    const ratio = contentEl.getBoundingClientRect().width / contentEl.getBoundingClientRect().height;
+    const scale = ratio > 1 ? `${Math.min(1.2, 1.05 * ratio)}, 1.05` : `1.05, ${Math.min(1.2, 1.05 * ratio)}`;
+
+    targetAnimation
+      .addElement(replaceElement)
+      .delay(100)
+      .duration(300)
+      .afterRemoveClass('ios26-replace-element')
+      .fromTo('transform', `scale(${scale})`, 'scale(1)')
+      .fromTo('opacity', 0, 0.9);
+  }
+
+  backdropAnimation.addElement(root.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+  contentAnimation
+    .duration(400)
+    .easing('ease')
+    .addElement(root.querySelector('.popover-arrow')!)
+    .addElement(root.querySelector('.popover-content')!)
+    .fromTo('opacity', 0.99, 0);
+
+  const popoverContentDataset = root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'];
+  if (popoverContentDataset) {
+    contentAnimation.beforeStyles({ 'transform-origin': popoverContentDataset }).afterAddRead(() => {
+      root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'] = '';
+    });
+
+    if (replaceElement) {
+      contentAnimation.fromTo('transform', 'scale(1)', 'scale(0.55)');
+    } else {
+      contentAnimation.fromTo('transform', 'scale(1)', 'scale(0)');
+    }
+  }
+
+  return baseAnimation
+    .easing('ease')
+    .afterAddWrite(() => {
+      baseEl.style.removeProperty('--width');
+      baseEl.classList.remove('popover-bottom');
+
+      contentEl.style.removeProperty('top');
+      contentEl.style.removeProperty('left');
+      contentEl.style.removeProperty('bottom');
+      contentEl.style.removeProperty('transform-origin');
+
+      if (arrowEl) {
+        arrowEl.style.removeProperty('top');
+        arrowEl.style.removeProperty('left');
+        arrowEl.style.removeProperty('display');
+      }
+    })
+    .duration(300)
+    .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+};

package/src/popover/popover-interface.ts

@@ -0,0 +1,44 @@
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode, OverlayInterface } from '@ionic/core';
+
+export interface PopoverInterface extends OverlayInterface {
+  present: (event?: MouseEvent | TouchEvent | PointerEvent) => Promise<void>;
+}
+
+export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
+  component: T;
+  componentProps?: ComponentProps<T>;
+  showBackdrop?: boolean;
+  backdropDismiss?: boolean;
+  translucent?: boolean;
+  cssClass?: string | string[];
+  event?: Event;
+  delegate?: FrameworkDelegate;
+  animated?: boolean;
+  focusTrap?: boolean;
+
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+
+  size?: PopoverSize;
+  dismissOnSelect?: boolean;
+  reference?: PositionReference;
+  side?: PositionSide;
+  alignment?: PositionAlign;
+  arrow?: boolean;
+
+  trigger?: string;
+  triggerAction?: string;
+}
+
+export type PopoverSize = 'cover' | 'auto';
+
+export type TriggerAction = 'click' | 'hover' | 'context-menu';
+
+export type PositionReference = 'trigger' | 'event';
+export type PositionSide = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
+export type PositionAlign = 'start' | 'center' | 'end';