@rdlabo/ionic-theme-ios26 0.0.3 → 0.0.4

package/demo/src/app/index/pages/segment/segment.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SegmentPage } from './segment.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('SegmentPage', () => {
+  let component: SegmentPage;
+  let fixture: ComponentFixture<SegmentPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(SegmentPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/segment/segment.page.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonSegment,
+  IonSegmentButton,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-segment',
+  templateUrl: './segment.page.html',
+  styleUrls: ['./segment.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonSegment,
+    IonSegmentButton,
+    IonButtons,
+    IonButton,
+  ],
+})
+export class SegmentPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/select/select.page.html

@@ -0,0 +1,74 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>select</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>select</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item>
+        <ion-select label="Default label" placeholder="Favorite Fruit">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Fixed label" label-placement="fixed" placeholder="Favorite fruit">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Stacked label" label-placement="stacked">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Floating label" label-placement="floating">
+          <ion-select-option [value]="'apple'">Apple</ion-select-option>
+          <ion-select-option [value]="'banana'">Banana</ion-select-option>
+          <ion-select-option [value]="'orange'">Orange</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Interfaces</ion-label></ion-list-header>
+    <ion-item-group>
+      @for (item of interfaces; track item) {
+        <ion-item>
+          <ion-select [label]="item" placeholder="Favorite Fruit" [interface]="item">
+            <ion-select-option [value]="'apple'">Apple</ion-select-option>
+            <ion-select-option [value]="'banana'">Banana</ion-select-option>
+            <ion-select-option [value]="'orange'">Orange</ion-select-option>
+          </ion-select>
+        </ion-item>
+      }
+    </ion-item-group>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/select/select.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SelectPage } from './select.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('SelectPage', () => {
+  let component: SelectPage;
+  let fixture: ComponentFixture<SelectPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(SelectPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/select/select.page.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonSelect,
+  IonSelectOption,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-select',
+  templateUrl: './select.page.html',
+  styleUrls: ['./select.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonSelect,
+    IonSelectOption,
+    IonListHeader,
+  ],
+})
+export class SelectPage implements OnInit {
+  readonly interfaces = ['alert', 'action-sheet', 'popover', 'modal'] as ('action-sheet' | 'popover' | 'alert' | 'modal')[];
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/toast/toast.page.html

@@ -0,0 +1,32 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>toast</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>toast</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-item-group>
+      <ion-item (click)="present('top')" [button]="true">present:top</ion-item>
+      <ion-item (click)="present('middle')" [button]="true">present:middle</ion-item>
+      <ion-item (click)="present('bottom')" [button]="true">present:bottom</ion-item>
+      <ion-item (click)="present('anchor')" [button]="true">present:anchor</ion-item>
+    </ion-item-group>
+  </ion-list>
+</ion-content>

package/demo/src/app/index/pages/toast/toast.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ToastPage } from './toast.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('ToastPage', () => {
+  let component: ToastPage;
+  let fixture: ComponentFixture<ToastPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(ToastPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/toast/toast.page.ts

@@ -0,0 +1,66 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  ToastController,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-toast',
+  templateUrl: './toast.page.html',
+  styleUrls: ['./toast.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+  ],
+})
+export class ToastPage implements OnInit {
+  readonly overlayCtrl = inject(ToastController);
+
+  ngOnInit() {}
+
+  async present(type: 'top' | 'middle' | 'bottom' | 'anchor') {
+    const toastDefault = {
+      message: 'Hello World!',
+      buttons: ['Close'],
+    };
+    const applyConfig = ((type) => {
+      if (type === 'anchor') {
+        return {
+          ...toastDefault,
+          positionAnchor: 'tab-bar-bottom',
+          position: 'bottom' as 'top' | 'middle' | 'bottom',
+        };
+      }
+      return {
+        ...toastDefault,
+        position: type as 'top' | 'middle' | 'bottom',
+      };
+    })(type);
+    const actionSheet = await this.overlayCtrl.create(applyConfig);
+    await actionSheet.present();
+  }
+}

package/demo/src/app/index/pages/toggle/toggle.page.html

@@ -0,0 +1,45 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>toggle</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>toggle</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Default styles</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item>
+        <ion-toggle color="success" justify="space-between">Airplane Mode</ion-toggle>
+      </ion-item>
+    </ion-item-group>
+    <ion-note>This component is overwrite.</ion-note>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-toggle>Default Toggle</ion-toggle><br /><br />
+    <ion-toggle [checked]="true">Checked Toggle</ion-toggle><br /><br />
+    <ion-toggle [disabled]="true">Disabled Toggle</ion-toggle><br /><br />
+    <ion-toggle [checked]="true" [disabled]="true">Disabled Checked Toggle</ion-toggle>
+    <ion-toggle enable-on-off-labels="true">Enable Notifications</ion-toggle>
+    <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
+    <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
+    <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+    <ion-toggle label-placement="stacked">Stacked Label</ion-toggle>
+  </section>
+</ion-content>

package/demo/src/app/index/pages/toggle/toggle.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TogglePage } from './toggle.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('TogglePage', () => {
+  let component: TogglePage;
+  let fixture: ComponentFixture<TogglePage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(TogglePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/toggle/toggle.page.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonNote,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-toggle',
+  templateUrl: './toggle.page.html',
+  styleUrls: ['./toggle.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonNote,
+    IonText,
+    IonToggle,
+  ],
+})
+export class TogglePage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/settings/settings-page.component.html

@@ -1,11 +1,9 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/"></ion-back-button>
-    </ion-buttons>
+    <ion-back-button slot="start" defaultHref="/"></ion-back-button>
     <ion-title>Settings</ion-title>
-    <ion-buttons slot="end">
-      <ion-button color="dark" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+    <ion-buttons class="ios26-disabled" slot="end">
+      <ion-button fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26"
         ><ion-icon name="logo-github" slot="icon-only"></ion-icon
       ></ion-button>
     </ion-buttons>
@@ -33,8 +31,7 @@
     <ion-item-group>
       <ion-item>
         <ion-icon name="airplane" slot="start" style="background: linear-gradient(#f8b250, #f79407)"></ion-icon>
-        <ion-label>Airplane Mode</ion-label>
-        <ion-toggle slot="end" color="success"></ion-toggle>
+        <ion-toggle color="success" justify="space-between">Airplane Mode</ion-toggle>
       </ion-item>
       <ion-item [detail]="true">
         <ion-icon name="wifi" slot="start" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>

package/demo/src/app/settings/settings-page.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SettingsPage } from './settings-page.component';
-import { testConfig } from '../../../../util/test.config';
+import { testConfig } from '../../../util/test.config';
 
-describe('VirtualScrollHeaderPage', () => {
+describe('SettingsPage', () => {
   let component: SettingsPage;
   let fixture: ComponentFixture<SettingsPage>;
 

package/demo/src/app/tabs/tabs.page.html

@@ -1,7 +1,7 @@
 <ion-tabs>
-  <ion-tab-bar slot="bottom">
+  <ion-tab-bar id="tab-bar-bottom" slot="bottom">
     <ion-tab-button tab="index" href="/main/index">
-      <ion-icon aria-hidden="true" name="documents-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="documents"></ion-icon>
       <ion-label>Index</ion-label>
     </ion-tab-button>
 
@@ -11,12 +11,12 @@
     </ion-tab-button>
 
     <ion-tab-button tab="settings" href="/main/settings">
-      <ion-icon aria-hidden="true" name="cog-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="cog"></ion-icon>
       <ion-label>Settings</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="health" href="/main/health">
-      <ion-icon aria-hidden="true" name="list-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="list"></ion-icon>
       <ion-label>Health</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

package/demo/src/app/tabs/tabs.page.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabsPage } from './tabs.page';
-import { testConfig } from '../../../../util/test.config';
+import { testConfig } from '../../../util/test.config';
 
 describe('TabsPage', () => {
   let component: TabsPage;

package/demo/src/app/tabs/tabs.routes.ts

@@ -1,6 +1,5 @@
 import { Routes } from '@angular/router';
 import { TabsPage } from './tabs.page';
-import { IndexPageComponent } from '../index/index-page.component';
 import { AlbumPage } from '../album/album-page.component';
 import { SettingsPage } from '../settings/settings-page.component';
 import { HealthPage } from '../health/health-page.component';

package/demo/src/global.scss

@@ -32,16 +32,34 @@
  * https://ionicframework.com/docs/theming/dark-mode
  */
 
-@use 'theme/theme-ios26';
-
 //@use "@ionic/angular/css/palettes/dark.always.css";
+//@use '@ionic/angular/css/palettes/dark.system.css';
+@use '@ionic/angular/css/palettes/dark.class.css';
 
-//@use "@ionic/angular/css/palettes/dark.class.css";
-/**
- * 任意でダークモードを使うことができて便利なため、インポートしています（Library）。
- * 一般的な用途では不要です。
- */
-@use '../../src/ionic-theme-dark-class';
+@use '../../src/default-variables';
+@use '../../src/ionic-theme-ios26';
+@use '../../src/ionic-theme-ios26-dark-class';
+
+:root {
+  --ios26-color-background-rgb: var(--ion-color-light-rgb);
+}
+
+ion-header.ios,
+ion-footer.ios {
+  ion-buttons:not(.ios26-disabled),
+  ion-button:not(.ios26-disabled),
+  ion-back-button:not(.ios26-disabled) {
+    --color: var(--ion-text-color, #000);
+  }
+}
+
+section.section-example {
+  background: var(--ion-background-color, #fff);
+  border-radius: 24px;
+  padding: 16px;
+  margin: 16px;
+}
 
-@use '@ionic/angular/css/palettes/dark.system.css';
-@use '../../src/ionic-theme-dark-system';
+ion-searchbar .searchbar-input-container {
+  margin: 0 20px !important;
+}

package/demo/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Demo of ionic-theme-ios26</title>
+    <title>Demo for ionic-theme-ios26</title>
     <base href="/" />
     <meta name="color-scheme" content="light dark" />
     <meta

package/demo/src/test.ts

@@ -0,0 +1,7 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

package/demo/src/theme/variables.scss

@@ -1,2 +1,20 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+
+:root {
+  --ion-color-light: #f2f2f7;
+  --ion-color-light-rgb: 242, 242, 247;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d5d5d9;
+  --ion-color-light-tint: #f3f3f8;
+}
+
+.ion-palette-dark {
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #fff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}

package/demo/util/mocks/angular/angular-delegate.ts

@@ -0,0 +1,18 @@
+import { ApplicationRef, NgZone, Injector, EnvironmentInjector, ComponentRef } from '@angular/core';
+import { FrameworkDelegate } from '@ionic/core/components';
+
+export class MockAngularDelegate {
+  create(environmentInjector: EnvironmentInjector, injector: Injector, elementReferenceKey?: string): MockAngularFrameworkDelegate {
+    return new MockAngularFrameworkDelegate();
+  }
+}
+
+export class MockAngularFrameworkDelegate implements FrameworkDelegate {
+  async attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
+    // no-op
+  }
+
+  async removeViewFromDom(_container: any, component: any): Promise<void> {
+    // no-op
+  }
+}