@rdlabo/ionic-theme-ios27 0.1.0-0

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

@@ -0,0 +1,120 @@
+import type { Animation, AnimationKeyFrames } from '@ionic/core';
+import { AnimationPosition, EffectScales } from './interfaces';
+import { createAnimation, GestureDetail } from '@ionic/core';
+import { getStep } from '../utils';
+
+export const getScaleAnimation = (effectElement: Element): Animation => {
+  return createAnimation().addElement(effectElement.shadowRoot!.querySelector<HTMLElement>('[part="native"]')!).easing('ease-out');
+};
+
+export const createPreMoveAnimation = (
+  effectElement: Element,
+  tabSelectedElement: Element,
+  currentTouchedElement: Element,
+  animationPosition: AnimationPosition,
+): Animation => {
+  const diff = Math.max(
+    Math.abs(tabSelectedElement.getBoundingClientRect().left - currentTouchedElement.getBoundingClientRect().left),
+    140,
+  );
+  return createAnimation()
+    .duration(diff * 2.1)
+    .easing('ease-out')
+    .addElement(effectElement)
+    .beforeStyles({
+      width: `${tabSelectedElement.clientWidth}px`,
+      height: `${tabSelectedElement.clientHeight}px`,
+      display: 'block',
+      opacity: '1',
+      transform: 'none',
+    })
+    .keyframes([
+      {
+        offset: 0,
+        transform: `translate3d(${tabSelectedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`,
+      },
+      {
+        offset: 1,
+        transform: `translate3d(${currentTouchedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`,
+      },
+    ]);
+};
+
+export const createMoveAnimation = (
+  effectElement: Element,
+  detail: GestureDetail,
+  tabSelectedElement: Element,
+  animationPosition: AnimationPosition,
+): Animation => {
+  return createAnimation()
+    .duration(500)
+    .addElement(effectElement)
+    .beforeStyles({
+      width: `${tabSelectedElement.clientWidth}px`,
+      height: `${tabSelectedElement.clientHeight}px`,
+      display: 'block',
+      opacity: '1',
+      transform: 'none',
+    })
+    .fromTo(
+      'transform',
+      `translate3d(${animationPosition.minPositionX}px, ${animationPosition.positionY}px, 0)`,
+      `translate3d(${animationPosition.maxPositionX}px, ${animationPosition.positionY}px, 0)`,
+    )
+    .progressStep(getStep(detail.currentX, animationPosition));
+};
+
+export const getMoveAnimationKeyframe = (type: 'moveRight' | 'moveLeft' | 'slowly', scales: EffectScales): AnimationKeyFrames => {
+  return {
+    moveRight: [
+      {
+        offset: 0,
+        transform: scales.large,
+      },
+      {
+        offset: 0.4,
+        transform: scales.small,
+      },
+      {
+        offset: 0.75,
+        transform: scales.xlarge,
+      },
+      {
+        offset: 1,
+        transform: scales.large,
+      },
+    ],
+    moveLeft: [
+      {
+        offset: 0,
+        transform: scales.large,
+      },
+      {
+        offset: 0.1,
+        transform: scales.xlarge,
+      },
+      {
+        offset: 0.6,
+        transform: scales.small,
+      },
+      {
+        offset: 1,
+        transform: scales.large,
+      },
+    ],
+    slowly: [
+      {
+        offset: 0,
+        transform: scales.large,
+      },
+      {
+        offset: 0.4,
+        transform: scales.medium,
+      },
+      {
+        offset: 1,
+        transform: scales.large,
+      },
+    ],
+  }[type];
+};

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

@@ -0,0 +1,214 @@
+import { AnimationPosition, EffectScales, registeredEffect } from './interfaces';
+import { createAnimation, createGesture } from '@ionic/core';
+import type { Animation, Gesture, GestureDetail } from '@ionic/core';
+import { changeSelectedElement, cloneElement, getStep } from '../utils';
+import { createMoveAnimation, createPreMoveAnimation, getMoveAnimationKeyframe, getScaleAnimation } from './animations';
+
+const GESTURE_NAME = 'ios26-enable-gesture';
+const ANIMATED_NAME = 'ios26-animated';
+
+export const registerEffect = (
+  targetElement: HTMLElement,
+  effectTagName: string,
+  selectedClassName: string,
+  scales: EffectScales,
+): registeredEffect | undefined => {
+  if (!targetElement.classList.contains('ios')) {
+    return undefined;
+  }
+
+  let gesture!: Gesture;
+  let moveAnimation: Animation | undefined;
+  let currentTouchedElement: HTMLElement | undefined;
+  let clearActivatedTimer: ReturnType<typeof setTimeout> | undefined;
+  let animationPosition: AnimationPosition | undefined = undefined;
+  let scaleAnimationPromise: Promise<void> | undefined;
+  let startAnimationPromise: Promise<void> | undefined;
+  let maxVelocity = 0;
+  const effectElement = cloneElement(effectTagName);
+
+  /**
+   * These event listeners fix a bug where gestures don't complete properly.
+   * They terminate the gesture using native events as a fallback.
+   */
+  const onPointerDown = (event: PointerEvent) => {
+    clearActivated();
+    gesture.destroy();
+    createAnimationGesture();
+    const onPointerUp = async (e: PointerEvent) => {
+      clearActivatedTimer = setTimeout(async () => {
+        await onEndGesture();
+        gesture.destroy();
+        createAnimationGesture();
+      });
+      document.removeEventListener('pointerup', onPointerUp);
+    };
+    document.addEventListener('pointerup', onPointerUp);
+  };
+  targetElement.addEventListener('pointerdown', onPointerDown);
+
+  const createAnimationGesture = () => {
+    targetElement.classList.add(GESTURE_NAME);
+    gesture = createGesture({
+      el: targetElement,
+      threshold: 0,
+      gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
+      onStart: (event) => onStartGesture(event),
+      onMove: (event) => onMoveGesture(event),
+      onEnd: () => {
+        onEndGesture().then();
+      },
+    });
+    gesture.enable(true);
+  };
+  createAnimationGesture();
+
+  const clearActivated = (isEndGesture: boolean = false) => {
+    if (!currentTouchedElement) {
+      return;
+    }
+    if (!isEndGesture && !currentTouchedElement.classList.contains(selectedClassName)) {
+      currentTouchedElement!.click();
+      currentTouchedElement.classList.add(selectedClassName);
+    }
+    currentTouchedElement.classList.remove('ion-activated');
+    currentTouchedElement = undefined;
+    effectElement.style.display = 'none';
+    maxVelocity = 0;
+    targetElement.classList.remove(ANIMATED_NAME);
+  };
+
+  const onStartGesture = (detail: GestureDetail): boolean | undefined => {
+    currentTouchedElement = ((detail.event.target as HTMLElement).closest(effectTagName) as HTMLElement) || undefined;
+    const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
+    if (currentTouchedElement === undefined || tabSelectedElement === null) {
+      return false;
+    }
+    animationPosition = {
+      minPositionX: targetElement.getBoundingClientRect().left,
+      maxPositionX: targetElement.getBoundingClientRect().right - tabSelectedElement.clientWidth,
+      width: tabSelectedElement.clientWidth,
+      positionY: tabSelectedElement.getBoundingClientRect().top,
+    };
+    targetElement.classList.add(ANIMATED_NAME);
+    changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+
+    const startAnimation = (() => {
+      if (tabSelectedElement === currentTouchedElement) {
+        return new Promise<void>((resolve) => resolve());
+      } else {
+        const preMoveAnimation = createPreMoveAnimation(effectElement, tabSelectedElement, currentTouchedElement, animationPosition!);
+        return preMoveAnimation.play().finally(() => preMoveAnimation.destroy());
+      }
+    })();
+    startAnimationPromise = startAnimation;
+    startAnimation.then(() => {
+      if (!currentTouchedElement) {
+        return;
+      }
+      moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition!);
+      moveAnimation.progressStart(
+        true,
+        getStep(currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2, animationPosition!),
+      );
+    });
+    getScaleAnimation(effectElement).duration(200).to('opacity', 1).to('transform', scales.large).play();
+    return true;
+  };
+
+  const onMoveGesture = (detail: GestureDetail): boolean | undefined => {
+    if (currentTouchedElement === undefined || !moveAnimation) {
+      return false; // Skip Animation
+    }
+    if (scaleAnimationPromise === undefined) {
+      if (Math.abs(detail.velocityX) > maxVelocity) {
+        maxVelocity = Math.abs(detail.velocityX);
+      }
+      if (Math.abs(detail.velocityX) > 0.2) {
+        scaleAnimationPromise = getScaleAnimation(effectElement)
+          .duration(720)
+          .keyframes(getMoveAnimationKeyframe('slowly', scales))
+          .play()
+          .finally(() => (scaleAnimationPromise = undefined));
+      }
+      if (maxVelocity > 0.2 && Math.abs(detail.velocityX) < 0.15 && Math.abs(detail.startX - detail.currentX) > 100) {
+        scaleAnimationPromise = getScaleAnimation(effectElement)
+          .duration(720)
+          .keyframes(getMoveAnimationKeyframe(detail.velocityX > 0 ? 'moveRight' : 'moveLeft', scales))
+          .play()
+          .finally(() => (scaleAnimationPromise = undefined));
+        maxVelocity = 0;
+      }
+    }
+
+    const currentX = detail.currentX;
+    const previousY = targetElement.getBoundingClientRect().top + targetElement.getBoundingClientRect().height / 2;
+    const nextEl = (targetElement.getRootNode() as Document | ShadowRoot).elementFromPoint(currentX, previousY);
+    const latestTouchedElement = (nextEl?.closest(effectTagName) as HTMLElement) || undefined;
+
+    if (latestTouchedElement && currentTouchedElement !== latestTouchedElement) {
+      currentTouchedElement = latestTouchedElement;
+      changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+    }
+    moveAnimation.progressStep(getStep(detail.currentX, animationPosition!));
+    return true;
+  };
+
+  const onEndGesture = async (): Promise<boolean | undefined> => {
+    // タイマーをクリア（正常にonEndGestureが実行された場合）
+    if (clearActivatedTimer !== undefined) {
+      clearTimeout(clearActivatedTimer);
+      clearActivatedTimer = undefined;
+    }
+
+    if (currentTouchedElement && !currentTouchedElement.classList.contains(selectedClassName)) {
+      currentTouchedElement.click();
+      currentTouchedElement.classList.add(selectedClassName);
+    }
+
+    if (startAnimationPromise) {
+      await startAnimationPromise;
+    }
+
+    if (currentTouchedElement === undefined || !moveAnimation) {
+      return false;
+    }
+
+    setTimeout(() => {
+      if (!currentTouchedElement) {
+        return;
+      }
+      const targetX = currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2;
+      const step = getStep(targetX, animationPosition!);
+      moveAnimation!.progressStep(step);
+    });
+    await getScaleAnimation(effectElement).duration(120).to('transform', `scale(1, 0.92)`).play();
+    moveAnimation!.destroy();
+
+    clearActivated(true);
+    return true;
+  };
+
+  return {
+    destroy: () => {
+      // Remove event listeners
+      targetElement.removeEventListener('pointerdown', onPointerDown);
+
+      // Clear any pending timer
+      if (clearActivatedTimer !== undefined) {
+        clearTimeout(clearActivatedTimer);
+        clearActivatedTimer = undefined;
+      }
+
+      // Clear activated state
+      clearActivated();
+
+      // Destroy gesture
+      if (gesture) {
+        gesture.destroy();
+      }
+      // Remove gesture class
+      targetElement.classList.remove(GESTURE_NAME);
+    },
+  };
+};

package/src/sheets-of-glass/interfaces.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/src/styles/components/ion-action-sheet.scss

@@ -0,0 +1,85 @@
+@use '../utils/api';
+
+ion-action-sheet.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
+  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+
+  .action-sheet-wrapper {
+    padding-bottom: 0;
+    bottom: var(--ios26-floating-safe-area-bottom);
+  }
+
+  .action-sheet-container {
+    @include api.glass-background-overlay;
+    transition: transform 200ms ease;
+    &:has(.ion-activated) {
+      transform: scale(1.016);
+      @include api.glass-background-overlay-activated;
+    }
+    margin: 0 12px;
+    border-radius: 32px;
+
+    .action-sheet-title,
+    .action-sheet-has-sub-title {
+      background: none;
+    }
+    .action-sheet-title {
+      padding-top: 8px;
+    }
+    .action-sheet-has-sub-title {
+    }
+
+    .action-sheet-group {
+      background: transparent;
+
+      button {
+        @include api.glass-background-overlay-button-variable;
+        &::after {
+          content: none;
+        }
+        &:not(.action-sheet-destructive):not(.action-sheet-selected) {
+          --button-color: var(--ion-text-color, #000);
+          --button-color-hover: var(--ion-text-color, #000);
+          --button-color-activated: var(--ion-text-color, #000);
+        }
+        &.action-sheet-destructive {
+          --button-color: var(--ion-color-danger, #c5000f);
+          --button-color-hover: var(--ion-color-danger, #c5000f);
+        }
+        font-weight: 550;
+        &.action-sheet-cancel {
+          margin-top: 12px;
+          font-weight: 550;
+        }
+        border-radius: 32px;
+        padding: 0 14px;
+        min-height: 52px;
+        span.action-sheet-button-inner {
+          font-size: 1rem;
+          ion-icon {
+            font-size: 1.2rem;
+          }
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 8px;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * For ion-select[interface=action-sheet].
+ * ios26, action-sheet should not has 'cancel'.
+ * It is recommend to use Popover.
+ */
+ion-action-sheet.ios.select-action-sheet:not(.ios26-disabled) {
+  .action-sheet-container {
+    .action-sheet-group {
+      button.action-sheet-cancel {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@use '../utils/api';
+
+ion-alert.ios:not(.ios26-disabled) {
+  --min-width: 280px;
+  --backdrop-opacity: 0.2;
+
+  // --max-width: clamp(270px, 16.875rem, 324px);
+  --max-width: 322px;
+
+  transition: transform 200ms ease;
+  &:has(.ion-activated) {
+    transform: scale(1.016);
+  }
+
+  .alert-wrapper {
+    @include api.glass-background-overlay;
+    &:has(.ion-activated) {
+      @include api.glass-background-overlay-activated;
+    }
+    border-radius: 32px;
+
+    .alert-head,
+    .alert-message {
+      text-align: left;
+      margin-left: 14px;
+      margin-right: 14px;
+    }
+
+    .alert-message {
+      font-size: 0.98rem;
+      line-height: 1.2rem;
+      color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+    }
+
+    .alert-radio-group {
+      padding: 0;
+      margin-bottom: 12px;
+      button {
+        padding: 0 8px;
+      }
+    }
+
+    .alert-button-group {
+      padding: 0 8px 12px;
+      gap: 8px 0;
+      .alert-button {
+        @include api.glass-background-overlay-button;
+        border: none;
+        border-radius: 32px;
+        margin: 0 6px;
+        min-width: calc(50% - 12px);
+        // height: max(44px, 2.75rem);
+        height: 48px;
+
+        &:not(.alert-button-role-destructive) {
+          color: var(--ion-text-color, #000);
+        }
+        font-weight: 550;
+      }
+    }
+
+    button.action-sheet-cancel {
+      margin-top: 12px;
+    }
+  }
+}