@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.4

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,22 +1,50 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.0.2",
+  "version": "0.0.4",
+  "description": "iOS26 CSS Theme for Ionic Framework",
   "exports": {
+    "./src/*": {
+      "style": "./src/*"
+    },
     "./css/*": {
       "style": "./css/*"
     },
     "./package.json": {
       "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/rdlabo-ionic-theme-ios26.mjs"
     }
   },
-  "sideEffects": false,
-  "module": "fesm2022/rdlabo-ionic-theme-ios26.mjs",
-  "typings": "index.d.ts",
-  "dependencies": {
-    "tslib": "^2.3.0"
+  "scripts": {
+    "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/rdlabo-team/ionic-theme-ios26.git"
+  },
+  "keywords": [
+    "ionic",
+    "framework",
+    "theme",
+    "css",
+    "ios26"
+  ],
+  "author": "Masahiko Sakakibara <sakakibara@rdlabo.jp>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rdlabo-team/ionic-theme-ios26/issues"
+  },
+  "homepage": "https://github.com/rdlabo-team/ionic-theme-ios26#readme",
+  "devDependencies": {
+    "@ionic/angular": "^8.7.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.1",
+    "np": "^10.2.0",
+    "prettier": "^3.6.2",
+    "sass": "^1.93.2",
+    "typescript": "^5.9.2"
   }
-}
+}

package/prettier.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  /**
+   * Default value is 80. 80 is too small in wide screen.
+   */
+  printWidth: 140,
+  /**
+   * Why: Preferred in us.
+   */
+  singleQuote: true,
+  /**
+   * Why: ES compatibility is handled by TypeScript compilation.
+   */
+  trailingComma: 'all',
+  /**
+   * Why: Follow Angular tslint-rule
+   */
+  arrowParens: 'always',
+};

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

@@ -0,0 +1,61 @@
+@use '../utils/api';
+
+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;
+
+    .action-sheet-title {
+      padding-top: 8px;
+    }
+
+    .action-sheet-group {
+      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;
+        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;
+        }
+      }
+    }
+
+    button.action-sheet-cancel {
+      margin-top: 12px;
+    }
+  }
+}

package/src/components/ion-alert.scss

@@ -0,0 +1,46 @@
+@use '../utils/api';
+
+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 {
+      padding: 0 8px 12px;
+      .alert-button {
+        border: none;
+        border-radius: 32px;
+        margin: 0 4px;
+        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);
+        }
+      }
+    }
+
+    button.action-sheet-cancel {
+      margin-top: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,154 @@
+@use '../utils/api';
+
+/**
+ * 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;
+    }
+  }
+
+  :has(ion-back-button) {
+    margin: 0;
+  }
+}
+
+@mixin theme-button() {
+  max-height: inherit;
+
+  transition:
+    transform 100ms ease-out,
+    color 50ms ease;
+  will-change: transform;
+
+  // button size default
+  &: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 16px;
+      min-height: 44px;
+    }
+  }
+
+  --border-radius: 24px !important;
+  &.button-large {
+    --border-radius: 30px !important;
+  }
+
+  &: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
+    ) {
+    --background-hover: transparent;
+    --background-activated: transparent;
+    &::part(native) {
+      @include api.glass-background;
+    }
+    opacity: 1; // for ion-back-button
+
+    --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) {
+        opacity: 1; // for ion-back-button
+      }
+    }
+  }
+
+  &.button-has-icon-only,
+  &.back-button-has-icon-only {
+    border-radius: 50%;
+    &:not(.button-small):not(.button-large)::part(native) {
+      width: 44px;
+      height: 44px;
+      padding: 2px;
+    }
+
+    ion-icon {
+      font-size: 1.4rem;
+      &[name='close-outline'] {
+        font-size: 2rem;
+      }
+    }
+  }
+}
+
+ion-buttons.ios:not(.ios26-disabled) {
+  @include theme-buttons;
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    @include theme-button;
+  }
+}
+
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,22 @@
+@use '../utils/api';
+
+ion-fab.ios:not(.ios26-disabled) {
+  ion-fab-button {
+    &::part(native) {
+      @include api.glass-background;
+      color: rgb(var(--ios26-color-dark-rgb));
+    }
+    --background-activated: rgba(var(--ios26-color-light-rgb), 0.3);
+  }
+  &.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

@@ -0,0 +1,38 @@
+@use '../utils/theme-list-inset';
+
+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-radio-group {
+    border-radius: 24px;
+    overflow: hidden;
+
+    ion-item {
+      // To draw lines inside
+      --inner-padding-end: 0;
+      &::part(native) {
+        padding-right: 18px;
+      }
+      &::part(detail-icon) {
+        //padding-right: 18px;
+        margin-inline-end: 0;
+      }
+
+      --min-height: 52px;
+
+      & > ion-input[labelplacement='floating'] {
+        transition: transform 0.2s ease;
+
+        &:not(.label-floating) {
+          transform: translateY(-2px);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+@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) {
+}

package/src/components/ion-popover.scss

@@ -0,0 +1,13 @@
+@use '../utils/api';
+
+ion-popover.ios:not(.ios26-disabled) {
+  --backdrop-opacity: 0.2;
+  &::part(arrow)::after {
+    @include api.glass-background;
+  }
+  &::part(content) {
+    @include api.glass-background;
+    border-radius: 24px;
+    padding: 0;
+  }
+}

package/src/components/ion-range.scss

@@ -0,0 +1,21 @@
+@use '../utils/api';
+
+ion-range.ios:not(.ios26-disabled) {
+  --knob-size: 20px;
+  --knob-border-radius: 24px;
+  padding-right: 36px;
+
+  &::part(knob) {
+    width: 38px;
+    transition: transform 0.3s ease;
+  }
+  &.range-pressed::part(knob) {
+    transform: scale(1.4, 1.6) translateX(calc(38px * -0.1));
+    @include api.glass-background(0.1, 0.5px, 120%);
+    box-shadow:
+      inset 0 8px 8px -8px var(--bar-background),
+      inset 0 -8px 8px -8px var(--bar-background),
+      inset 8px 0 8px -8px var(--bar-background),
+      inset -8px 0 8px -8px var(--bar-background);
+  }
+}

package/src/components/ion-searchbar.scss

@@ -0,0 +1,37 @@
+@use '../utils/api';
+
+ion-modal.ios {
+  ion-searchbar:not(.ios26-disabled) {
+    .searchbar-input-container {
+      margin: 0 6px;
+      input.searchbar-input {
+        // Modal表示でのアイコン非表示の不具合の対応
+        backdrop-filter: none;
+      }
+    }
+  }
+}
+
+ion-searchbar.ios:not(.ios26-disabled) {
+  min-height: 60px;
+  padding: 0;
+
+  ion-icon.searchbar-search-icon {
+    inset-inline-start: 12px;
+  }
+
+  .searchbar-input-container {
+    margin: 0 8px 0 16px;
+    align-self: center;
+    justify-self: center;
+    input.searchbar-input {
+      min-height: 44px;
+      @include api.glass-background;
+      border-radius: 20px;
+      padding-inline-start: 2.4rem !important;
+    }
+    .searchbar-clear-button {
+      padding-inline-end: 2rem !important;
+    }
+  }
+}