@rdlabo/ionic-theme-ios26 0.0.3 → 0.0.4

package/demo/util/mocks/angular/ion-router-outlet.ts

@@ -0,0 +1,39 @@
+import { BaseMock } from '../util/base.mock';
+
+const METHODS = [
+  'nativeEl',
+  // 'tabsPrefix',
+  // 'stackEvents',
+  // 'activateEvents',
+  // 'deactivateEvents',
+  // 'animated',
+  // 'ngOnDestroy',
+  // 'getContext',
+  // 'ngOnInit',
+  // 'isActivated',
+  // 'component',
+  // 'activatedRoute',
+  // 'activatedRouteData',
+  // 'detach',
+  // 'attach',
+  // 'deactivate',
+  // 'activateWith',
+  // 'canGoBack',
+  // 'pop',
+  // 'getLastUrl',
+  // 'getLastRouteView',
+  // 'getRootView',
+  // 'getActiveStackId',
+];
+
+export class IonRouterOutletMock extends BaseMock {
+  constructor() {
+    super('NavController', METHODS);
+
+    this.spyObj.nativeEl.and.returnValue();
+  }
+
+  public static instance(): any {
+    return new IonRouterOutletMock();
+  }
+}

package/demo/util/mocks/angular/modal-controller.ts

@@ -0,0 +1,7 @@
+import { Overlay } from '../util/overlay';
+
+export class ModalControllerMock extends Overlay {
+  public static instance(): any {
+    return new ModalControllerMock();
+  }
+}

package/demo/util/mocks/angular/nav-controller.ts

@@ -0,0 +1,22 @@
+import { BaseMock } from '../util/base.mock';
+
+const METHODS = ['navigateForward', 'navigateBack', 'navigateRoot', 'back', 'pop', 'setDirection', 'setTopOutlet', 'consumeTransition'];
+
+export class NavControllerMock extends BaseMock {
+  constructor() {
+    super('NavController', METHODS);
+
+    this.spyObj.navigateForward.and.returnValue(Promise.resolve());
+    this.spyObj.navigateBack.and.returnValue(Promise.resolve());
+    this.spyObj.navigateRoot.and.returnValue(Promise.resolve());
+    this.spyObj.back.and.returnValue(Promise.resolve());
+    this.spyObj.pop.and.returnValue(Promise.resolve());
+    this.spyObj.setDirection.and.returnValue();
+    this.spyObj.setTopOutlet.and.returnValue();
+    this.spyObj.consumeTransition.and.returnValue();
+  }
+
+  public static instance(): any {
+    return new NavControllerMock();
+  }
+}

package/demo/util/mocks/angular/popover-controller.ts

@@ -0,0 +1,7 @@
+import { Overlay } from '../util/overlay';
+
+export class PopoverControllerMock extends Overlay {
+  public static instance(): any {
+    return new PopoverControllerMock();
+  }
+}

package/demo/util/mocks/util/base.mock.ts

@@ -0,0 +1,13 @@
+export abstract class BaseMock {
+  protected spyObj: any;
+
+  // eslint-disable-next-line
+  constructor(baseName: string, methodNames: any[]) {
+    this.spyObj = jasmine.createSpyObj(baseName, methodNames);
+
+    methodNames.forEach((methodName) => {
+      // @ts-ignore
+      this[methodName] = this.spyObj[methodName];
+    });
+  }
+}

package/demo/util/mocks/util/overlay.ts

@@ -0,0 +1,13 @@
+import { BaseMock } from './base.mock';
+
+const METHODS = ['create', 'dismiss', 'getTop'];
+
+export class Overlay extends BaseMock {
+  constructor() {
+    super('Overlay', METHODS);
+
+    this.spyObj.create.and.returnValue(Promise.resolve());
+    this.spyObj.dismiss.and.returnValue(Promise.resolve());
+    this.spyObj.getTop.and.returnValue(Promise.resolve());
+  }
+}

package/demo/util/test.config.ts

@@ -0,0 +1,54 @@
+/* eslint @rdlabo/rules/deny-import-from-ionic-module: off */
+
+import { ApplicationConfig, importProvidersFrom, provideZonelessChangeDetection } from '@angular/core';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonNav, IonRouterOutlet, ModalController, NavController, NavParams, PopoverController } from '@ionic/angular/standalone';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+import { IonRouterOutletMock } from './mocks/angular/ion-router-outlet';
+import { ModalControllerMock } from './mocks/angular/modal-controller';
+import { NavControllerMock } from './mocks/angular/nav-controller';
+import { PopoverControllerMock } from './mocks/angular/popover-controller';
+import { MockAngularDelegate } from './mocks/angular/angular-delegate';
+
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { AngularDelegate } from '@ionic/angular';
+
+/**
+ * Standalone configuration for Angular tests
+ *
+ * This is the recommended approach for new tests and for migrating existing tests.
+ * It aligns with Angular's direction towards standalone components.
+ */
+export const testConfig: ApplicationConfig = {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideRouter([], withComponentInputBinding()),
+    importProvidersFrom(FormsModule, ReactiveFormsModule),
+    NavParams,
+    IonNav,
+    {
+      provide: AngularDelegate,
+      useClass: MockAngularDelegate,
+    },
+    {
+      provide: IonRouterOutlet,
+      useFactory: () => IonRouterOutletMock.instance(),
+    },
+    {
+      provide: ModalController,
+      useFactory: () => ModalControllerMock.instance(),
+    },
+    {
+      provide: NavController,
+      useFactory: () => NavControllerMock.instance(),
+    },
+    {
+      provide: PopoverController,
+      useFactory: () => PopoverControllerMock.instance(),
+    },
+    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClientTesting(),
+  ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "iOS26 CSS Theme for Ionic Framework",
   "exports": {
     "./src/*": {
@@ -14,9 +14,10 @@
     }
   },
   "scripts": {
-    "build": "node build-sass.js",
+    "build": "rm -rf dist/css && sass src:dist/css --style=compressed --no-source-map",
     "build:demo": "cd demo && npm install && npm run build -- --configuration=production",
     "prepare": "husky install",
+    "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
     "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",
     "release": "np --no-tests"
   },

package/src/components/ion-action-sheet.scss

@@ -1,12 +1,13 @@
 @use '../utils/api';
 
-ion-action-sheet.ios {
-  --button-color: var(--ion-text-color);
-  --button-background-selected: transparent;
+ion-action-sheet.ios:not(.ios26-disabled) {
   --backdrop-opacity: 0.2;
 
   .action-sheet-container {
     @include api.glass-background(0.9);
+    &:has(.ion-activated) {
+      @include api.glass-background(0.95);
+    }
     margin: 0 8px 8px;
     border-radius: 32px;
 
@@ -18,8 +19,26 @@ ion-action-sheet.ios {
       background: transparent;
 
       button {
+        --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
+        &.ion-activated {
+          --button-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+        }
+        &::after {
+          content: none;
+        }
+        &:not(.action-sheet-destructive) {
+          --button-color: var(--ion-text-color);
+          --button-color-hover: var(--ion-text-color);
+        }
+        &.action-sheet-destructive {
+          --button-color: var(--ion-color-danger, #c5000f);
+          --button-color-hover: var(--ion-color-danger, #c5000f);
+        }
+        &.action-sheet-cancel {
+          margin-top: auto;
+          font-weight: normal;
+        }
         border-radius: 32px;
-        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
         padding: 0 14px;
         min-height: 52px;
         span.action-sheet-button-inner {

package/src/components/ion-alert.scss

@@ -1,15 +1,26 @@
 @use '../utils/api';
 
-ion-alert.ios {
+ion-alert.ios:not(.ios26-disabled) {
   --backdrop-opacity: 0.2;
-
   .alert-wrapper {
     @include api.glass-background(0.9);
+    &:has(.ion-activated) {
+      @include api.glass-background(0.95);
+    }
     border-radius: 32px;
 
     .alert-head,
     .alert-message {
       text-align: left;
+      padding: 12px 20px;
+    }
+
+    .alert-radio-group {
+      padding: 0;
+      margin-bottom: 12px;
+      button {
+        padding: 0 8px;
+      }
     }
 
     .alert-button-group {
@@ -21,6 +32,10 @@ ion-alert.ios {
         min-width: calc(50% - 8px);
         background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
         color: var(--ion-text-color);
+
+        &.ion-activated {
+          background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+        }
       }
     }
 

package/src/components/ion-breadcrumbs.scss

@@ -0,0 +1,24 @@
+/**
+ * Since there is no official Apple version,
+ * and this style is not stylish as iOS 26. it will be removed.
+ */
+
+//@use '../utils/api';
+//
+//ion-breadcrumbs.ios:not(.ios26-disabled) {
+//  ion-breadcrumb {
+//    &::part(native) {
+//      transition: transform 100ms ease-out;
+//      @include api.glass-background;
+//      border-radius: 24px;
+//      margin-inline: 12px;
+//
+//      padding-inline: 12px;
+//      padding-top: 6px;
+//      padding-bottom: 6px;
+//    }
+//    &.ion-activated::part(native) {
+//      transform: scale(1.18);
+//    }
+//  }
+//}

package/src/components/ion-button.scss

@@ -1,111 +1,154 @@
 @use '../utils/api';
 
-@mixin theme-button {
-  max-height: inherit;
-  margin: 8px 4px;
-  &:first-child {
-    margin-left: 12px;
+/**
+ * Note: ion-back-button should not put inner ion-button.
+ * feat(): ion-config new property for disable ion-back-button Animation
+ */
+
+@mixin theme-buttons {
+  @include api.glass-background;
+  border-radius: 25px;
+  overflow: hidden;
+  transition: transform 100ms ease-out !important;
+
+  &:has(.ion-activated) {
+    transform: scale(1.28);
+  }
+
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    transform: none;
+    opacity: 1;
+
+    &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+    }
+
+    &::part(native) {
+      /**
+       * TODO: remove !important.
+       */
+      box-shadow: none !important;
+      border: none !important;
+      background: transparent !important;
+      backdrop-filter: none !important;
+    }
+  }
+
+  ion-button:not(.ios26-disabled) {
+    margin: 0;
+    :first-child {
+      margin-left: -8px;
+    }
+    :last-child {
+      margin-right: -8px;
+    }
+    :only-child {
+      margin: 0;
+    }
   }
-  &:last-child {
-    margin-right: 12px;
+
+  :has(ion-back-button) {
+    margin: 0;
   }
+}
+
+@mixin theme-button() {
+  max-height: inherit;
 
   transition:
     transform 100ms ease-out,
     color 50ms ease;
   will-change: transform;
 
-  &.ion-activated {
-    transform: scale(1.2);
-    box-shadow: none;
-    ion-icon {
-      // 色を指定しなくても半透明に
-      //color: var(--ion-color-medium-tint);
-    }
-  }
-
   // button size default
-  font-size: 1.05rem;
-  &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
-    padding: 0 16px;
-    min-height: 44px;
-  }
-
-  &.button-small {
-    font-size: 1.04rem;
+  &:not(.button-small):not(.button-large) {
+    font-size: 1.05rem;
     &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
-      padding: 0 12px;
-      min-height: 36px;
+      padding: 0 16px;
+      min-height: 44px;
     }
   }
 
+  --border-radius: 24px !important;
   &.button-large {
-    font-size: 1.06rem;
-    &:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
-      padding: 0 20px;
-      min-height: 52px;
-    }
+    --border-radius: 30px !important;
   }
 
-  &::part(native) {
-    border-radius: 25px;
+  &:not(.button-clear):not(.ios26-button-clear) {
+    &.ion-activated {
+      transform: scale(0.95);
+      &.button-small {
+        transform: scale(0.94);
+      }
+      &.button-large {
+        transform: scale(0.96);
+      }
+    }
   }
 
+  // fill:default only
   &:not(.button-solid):not(.ios26-button-solid):not(.button-outline):not(.ios26-button-outline):not(.button-clear):not(
       .ios26-button-clear
-    )::part(native) {
-    @include api.glass-background;
-    border-radius: 25px;
-  }
+    ) {
+    --background-hover: transparent;
+    --background-activated: transparent;
+    &::part(native) {
+      @include api.glass-background;
+    }
+    opacity: 1; // for ion-back-button
 
-  &:not(.button-solid):not(.ios26-button-solid):not(.button-clear):not(.ios26-button-clear) {
-    color: var(--color);
+    --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
+    &.ion-color {
+      --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 1);
+    }
     &.ion-activated {
+      --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+      &.ion-color {
+        --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
+      }
+      transform: scale(1.28);
+      &.button-large {
+        transform: scale(1.18);
+      }
       &::part(native) {
-        &::after {
-          background: transparent !important;
-        }
+        opacity: 1; // for ion-back-button
       }
     }
   }
 
   &.button-has-icon-only,
   &.back-button-has-icon-only {
-    &::part(native) {
-      border-radius: 50%;
+    border-radius: 50%;
+    &:not(.button-small):not(.button-large)::part(native) {
       width: 44px;
       height: 44px;
       padding: 2px;
     }
 
     ion-icon {
-      font-size: 1.4rem !important;
+      font-size: 1.4rem;
       &[name='close-outline'] {
-        font-size: 2rem !important;
+        font-size: 2rem;
       }
     }
   }
 }
 
-/**
- * .ios26-no-liquid-glass を適用しない限り、デフォルトスタイル
- */
-ion-header.ios,
-ion-footer.ios {
-  ion-buttons:not(.ios26-no-liquid-glass) ion-button:not(.ios26-no-liquid-glass),
-  ion-buttons:not(.ios26-no-liquid-glass) ion-back-button:not(.ios26-no-liquid-glass),
-  /* collapseのanimateBackButton対策 */
-  ion-back-button:not(.ios26-no-liquid-glass) {
+ion-buttons.ios:not(.ios26-disabled) {
+  @include theme-buttons;
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
     @include theme-button;
   }
 }
 
-/**
- * .ios26-liquid-glass を任意で適用した場合のスタイル
- */
-ion-buttons.ios.ios26-liquid-glass ion-button:not(.ios26-no-liquid-glass),
-ion-buttons.ios.ios26-liquid-glass ion-back-button:not(.ios26-no-liquid-glass),
-ion-button.ios.ios26-liquid-glass,
-ion-back-button.ios.ios26-liquid-glass {
+ion-button.ios:not(.ios26-disabled) {
+  @include theme-button;
+}
+ion-back-button.ios:not(.ios26-disabled) {
   @include theme-button;
 }

package/src/components/ion-card.scss

@@ -1,3 +1,7 @@
-ion-card.ios {
+ion-card.ios:not(.ios26-disabled) {
   border-radius: 24px;
+
+  ion-list ion-item {
+    --padding-start: 0;
+  }
 }

package/src/components/ion-chip.scss

@@ -0,0 +1,10 @@
+@use '../utils/api';
+
+ion-chip.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+
+  transition: transform 100ms ease-out;
+  &.ion-activated {
+    transform: scale(1.18);
+  }
+}

package/src/components/ion-content.scss

@@ -0,0 +1,13 @@
+.ios:not(.ios26-disabled) {
+  /**
+   * iOS26から上下のセーフエリアいっぱいまでコンテンツを表示するようになったため、
+   * コンテンツのmarginとpaddingを調整します。なお、Angular CDK Scrollingにも対応しています。
+   */
+  .ion-page:not(:has(ion-footer)) ion-content cdk-virtual-scroll-viewport {
+    margin-bottom: calc(calc(56px + var(--ios26-floating-safe-area-bottom)) * -1);
+    padding-bottom: calc(56px + var(--ios26-floating-safe-area-bottom));
+  }
+  ion-content:not(:has(cdk-virtual-scroll-viewport)) {
+    --padding-bottom: calc(56px + var(--ios26-floating-safe-area-bottom));
+  }
+}

package/src/components/ion-datetime.scss

@@ -0,0 +1,9 @@
+@use '../utils/api';
+
+ion-datetime.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  border-radius: 24px;
+
+  --wheel-highlight-background: transparent !important;
+  --wheel-highlight-border-radius: 24px !important;
+}

package/src/components/ion-fab.scss

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-fab.ios {
+ion-fab.ios:not(.ios26-disabled) {
   ion-fab-button {
     &::part(native) {
       @include api.glass-background;
@@ -8,9 +8,15 @@ ion-fab.ios {
     }
     --background-activated: rgba(var(--ios26-color-light-rgb), 0.3);
   }
-  // TODO: これはUtility Classにマイグレートする必要があります
-  &.inner-tab-bar {
-    right: calc(16px + var(--ion-safe-area-right, 0px));
+  &.fab-vertical-bottom {
     bottom: var(--ios26-floating-safe-area-bottom);
   }
+
+  &.fab-horizontal-start {
+    right: calc(16px + var(--ion-safe-area-left, 0px));
+  }
+
+  &.fab-horizontal-end {
+    right: calc(16px + var(--ion-safe-area-right, 0px));
+  }
 }

package/src/components/ion-list.scss

@@ -1,10 +1,15 @@
 @use '../utils/theme-list-inset';
 
-ion-list.list-inset.ios {
+ion-list.list-inset.ios:not(.ios26-disabled) {
   @include theme-list-inset.ion-list-inset();
 
+  ion-radio-group {
+    display: block;
+  }
+
   ion-item-group,
-  ion-reorder-group {
+  ion-reorder-group,
+  ion-radio-group {
     border-radius: 24px;
     overflow: hidden;
 

package/src/components/ion-loading.scss

@@ -0,0 +1,9 @@
+@use '../utils/api';
+
+ion-loading.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
+  .loading-wrapper {
+    @include api.glass-background;
+    border-radius: 24px;
+  }
+}

package/src/components/ion-modal.scss

@@ -1,6 +1,31 @@
-ion-modal.ios {
+@use '../utils/api';
+
+ion-modal.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
   ion-toolbar {
     padding-right: calc(var(--ion-safe-area-right) + 4px) !important;
     padding-left: calc(var(--ion-safe-area-left) + 4px) !important;
   }
+  &::part(handle) {
+    width: 80px;
+  }
+
+  &.modal-card {
+    /**
+     * IonicでCardModalのborder-radiusはハードコーディングされています。
+     * また、iOS26のドキュメントで見つからないため、サポートは行いません。
+     * https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/components/modal/animations/ios.enter.ts#L82-L83
+     */
+  }
+
+  &:has(.ion-delegate-host):has(ion-datetime) {
+    --border-radius: 24px;
+  }
+
+  &.modal-sheet {
+    --border-radius: 30px;
+    &::part(content) {
+      @include api.glass-background(1);
+    }
+  }
 }

package/src/components/ion-picker.scss

@@ -0,0 +1,4 @@
+@use '../utils/api';
+
+ion-picker.ios:not(.ios26-disabled) {
+}