@rdlabo/ionic-theme-ios26 0.0.3 → 0.1.0

package/.github/workflows/lint.yml

@@ -0,0 +1,40 @@
+name: Lint
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+    types: [opened]
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm install
+      - run: npm run lint
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm install
+        working-directory: './demo'
+      - run: npm run lint
+        working-directory: './demo'

package/FEEDBACK.md

@@ -1,18 +1,58 @@
-## feat(): ion-config new property for disable ion-back-button Animation
+# Feature Requests for Ionic Framework
 
-遷移前画面で `collapse` を使っており、遷移後画面で `ion-buttons ion-back-button` を指定している場合、iOS18以前のアニメーション処理が行われます。これは、iOS26以降では不要なので、無効化できるプロパティが必要です。
+## docs(): Naming conventions for Ionic theme classes
+
+After the Ionic Modular release, I expect many themes to be distributed through community activities. Therefore, I would like to establish naming conventions for theme application classes. I would appreciate the Ionic team's opinion on this matter.
+
+- Classes for manually applying themes
+  - .theme-[theme-name] (ex: .theme-ios26)
+  - .theme-[theme-name]-enabled (ex: .theme-ios26-enabled)
+  - .[theme-name]-enabled (ex: .ios26-enabled)
+  - .ion-[theme-name]-enabled (ex: .ion-ios26-enabled)
+- Classes for manually removing themes
+  - .theme-no-[theme-name] (ex: .theme-no-ios26)
+  - .theme-[theme-name]-disabled (ex: .theme-ios26-disabled)
+  - .[theme-name]-disabled (ex: .ios26-disabled)
+  - .ion-[theme-name]-disabled (ex: .ion-ios26-disabled)
+
+
+## feat(): ion-config new property for `collapse`
+
+Currently, `collapse` behavior is automatically enabled in iOS mode, but this should be configurable through `ion-config` for better control.
+
+ex:
+```typescript
+export interface IonicConfig {
+    ...,
+    collapseLargeTitle: {
+        ios: boolean;
+        md: boolean;
+        ionic: boolean;
+    },
+    collapseBackButtonAnimation: {
+        ios: boolean;
+        md: boolean;
+        ionic: boolean;
+    },
+}
+```
+
+### should disable ion-back-button Animation
+
+When using `collapse` on the previous screen and specifying `ion-buttons ion-back-button` on the next screen, iOS 18 and earlier animation processing occurs. Since this is unnecessary for iOS 26+, a property to disable this would be beneficial.
 
 https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/utils/transition/ios.transition.ts#L333C31-L337
 - enteringBackButtonTextAnimation
 - enteringBackButtonIconAnimation 
 - enteringBackButtonAnimation
 
-現在、 `ion-buttons > ion-back-button` をセレクタする関係上、 `ion-back-button` を `ion-buttons` の中にいれない対応をとっています。。
+Currently, I work around this by not placing `ion-back-button` inside `ion-buttons` due to the selector relationship `ion-buttons > ion-back-button`.
+
 
-# feat(): ion-content[fullscreen=true] will have .content-fullscreen class
+## feat(): ion-content[fullscreen=true] will have .content-fullscreen class
 
-iOS26の上下セーフエリアのぼかしを入れるため、ion-contentがfullscreen設定されているかのclassが必要です。
-以下のようなセレクターの指定を行いたいです。
+For implementing iOS 26's blurred safe area effects, a class indicating whether `ion-content` has fullscreen configuration is needed.
+I would like to use selectors like the following:
 
 ```css
 .ion-page:has(ion-header.header-translucent) ion-content.content-fullscreen {
@@ -22,4 +62,57 @@ iOS26の上下セーフエリアのぼかしを入れるため、ion-contentがf
 }
 ```
 
-現在、 `translucent` な要素を使っている場合はfullscreenを指定している前提で実装していますが、これは確実ではありません。
+Currently, I assume fullscreen is specified when using `translucent` elements, but this is not guaranteed.
+
+
+## feat(): add .range-knob-min and .range-knob-max directly to ion-range
+
+Currently, `.range-knob-min` and `.range-knob-max` are applied to DOM elements inside ShadowDOM, but since these represent the state of `ion-range` itself, they should be applied directly to the component.
+This would provide more flexibility for knob styling.
+
+Current:
+```html
+<ion-range>
+  #shadow-root
+  ...
+  <div class="range-knob-handle ... range-knob-min">...</div>
+</ion-range>
+```
+
+After:
+```html
+<ion-range class="range-knob-min">
+  #shadow-root
+  ...
+  <div class="range-knob-handle ... range-knob-min">...</div>
+</ion-range>
+```
+
+
+## feat(): add native shadow-part for design
+
+### native-inner(or item-inner) part to ion-item
+The styling for `ion-item[lines=inset]` is applied to `.item-inner`, which cannot be styled directly. This limitation means that for iOS 26 styling, I can only modify the border-bottom style through `::part(native)` with padding-right, preventing me from utilizing the full right side of `ion-item`. Adding `::part(native-inner)` would increase styling flexibility.
+
+```diff
+  <ion-item>
+    <button type="button" class="item-native" part="native">
+-     <div class="item-inner">
++     <div class="item-inner" part="native-inner">
+      ...
+      </div>
+    </button>
+  </ion-item>
+```
+
+### native part to ion-toast
+The default styling for `ion-toast` is applied to `div.toast-wrapper`, and CSS Custom Properties overrides work similarly. However, there's no way to directly override `div.toast-wrapper`. Currently, I disable this styling using CSS Custom Properties and then apply new styles to `::part(container)`. This is not ideal for styling, so adding `::part(native)` to allow direct override of `div.toast-wrapper` would be preferable.
+
+```diff
+  <ion-toast>
+-   <div class="toast-wrapper">...</div>
++   <div class="toast-wrapper" part="native">...</div>
+  </ion-toast>
+```
+
+

package/FEEDBACK2.md

@@ -0,0 +1,45 @@
+# Feature Requests for Ionic Framework
+## feat(): native container add at ion-segment
+
+現在、`ion-segment` はShadowDOMであるにもかかわらず、container DOMをもっていない。このため、 `ion-segment` にスタイルをあてるためには、`ion-segment` 自身にあてるしか方法がない。このため、子孫要素である `ion-segment-button` のタップエフェクトを、 `ion-segment` の外に表示することができない。
+
+Current:
+
+```html
+<ion-segment>
+  ::shadow-root
+    // Put child element
+    <ion-segment-button></ion-segment-button>
+    <ion-segment-button></ion-segment-button>
+</ion-segment>
+```
+
+After:
+
+```html
+<ion-segment>
+  ::shadow-root
+    <div class="segment-container" part="container">
+      // Put child element
+      <ion-segment-button></ion-segment-button>
+      <ion-segment-button></ion-segment-button>
+    </div>
+</ion-segment>
+```
+
+このことで、以下のようにスタイリングしたい。
+
+```scss
+ion-segment {
+  &::part(container) {
+    overflow: visible;
+    margin: 12px;     // Enable Effect Area
+    background: var(255, 255, 255, 0.7);
+  }
+  ion-segment-button {
+    &.segment-button-checked {
+      transform: scale(1.1);   // Enable overflow effect
+    }
+  }
+}
+```

package/README.md

@@ -27,41 +27,31 @@ Sponsoring means you directly contribute to new features, improvements, and main
 npm install @rdlabo/ionic-theme-ios26
 ```
 
-And import the theme in your project's main CSS file (e.g., `src/styles.scss`) and set the `--ios26-floating-safe-area-bottom` variable:
+And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
 
-```scss
+```css
+@import '@rdlabo/ionic-theme-ios26/dist/css/default-variables.css';
 @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.min.css';
 
-:root {
-  /*
-   * This is default value. If you should change value, update this variable.
-   * ex) Using admob banner ad.
-   *   --ios26-floating-safe-area-bottom: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
-   */
-  --ios26-floating-safe-area-bottom: max(10px, var(--ion-safe-area-bottom, 0px));
-}
+/*
+ * Support Dark Mode
+ * We support Ionic Dark Mode. More information is here: https://ionicframework.com/docs/theming/dark-mode
+ * use Always:    @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-always.min.css'
+ * use System:    @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-system.min.css'
+ * use CSS Class: @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-class.min.css'
+ */
 ```
 
 ## Important Notes
 
-### Support Dark Mode
-
-We support Ionic Dark Mode. More information is here: https://ionicframework.com/docs/theming/dark-mode
-
-| Mode      | Code                                                                         |
-|-----------|------------------------------------------------------------------------------|
-| Always    | Overwrite library colors on the :root selector.                              |
-| System    | @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-system.min.css' |
-| CSS Class | @import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-dark-class.min.css'  |
+### `ion-back-button` must be used without `ion-buttons`
 
-### `ion-back-button` は `ion-buttons` に入れないで使う必要があります
+When the following conditions are met, the Ionic Framework programmatically generates and animates the `ion-back-button`:
 
-以下の条件を満たす時、Ionic Frameworkは `ion-back-button` をプログラムで生成して、アニメーションで表示します。
+- The previous page uses `ion-header[collapse='condense']`
+- The navigated page has `ion-buttons ion-back-button`
 
-- 遷移前のページに `ion-header[collapse='condense']` を使用している
-- 遷移後のページに、 `ion-buttons ion-back-button` がある
-
-これはiOS26のUIではなく、このプログラムを避けるために以下の実装を行う必要があります。
+This is not the iOS26 UI behavior. To avoid this programmatic behavior, you need to implement it as follows:
 
 ```diff
   <ion-header>
@@ -74,7 +64,19 @@ We support Ionic Dark Mode. More information is here: https://ionicframework.com
 
 ### Using `ion-item-group`
 
-Under specific conditions, you need to use `ion-item-group`. For details, please refer to [USING_ION_ITEM_GROUP.md](./USING_ION_ITEM_GROUP.md).
+Under specific conditions, you need to use `ion-item-group`.
+
+```diff
+  <ion-list inset=true>
+    <ion-list-header><ion-label>Label</ion-label></ion-list-header>
++   <ion-item-group>
+      <ion-item>...</ion-item>
+      <ion-item>...</ion-item>
++   </ion-item-group>
+  </ion-list>
+```
+
+For details, please refer to [USING_ION_ITEM_GROUP.md](./USING_ION_ITEM_GROUP.md).
 
 ### You can also use the liquid glass mixin
 
@@ -88,23 +90,82 @@ ion-textarea label.textarea-wrapper {
 }
 ```
 
-## CSS Utility Classes
+## Selective Theme Application
 
-### .ios26-liquid-glass
+You may want to apply the iOS26 theme to your Ionic project but find it difficult to apply it to all components. We provide two approaches to selectively control theme application.
 
-Apply this class to components where you want to use the iOS26 design that is not automatically applied. Supported selectors are as follows:
+You can use `1. Import Components Individually` or `2. Using the .ios26-disabled Class`
 
-- `ion-button`
-  - `ion-buttons.ios26-liquid-glass ion-button`
-  - `ion-button.ios26-liquid-glass`
+### 1. Import Components Individually
 
-### .ios26-no-liquid-glass
+**Recommended for**: When you want to apply the iOS26 theme only to specific components, or when you want to minimize bundle size.
+
+While `@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.min.css'` applies styling to all components at once, you can also import them individually.
+
+```css
+@import '@rdlabo/ionic-theme-ios26/dist/css/utils/translucent';
+@import '@rdlabo/ionic-theme-ios26/dist/css/components/ion-action-sheet';
+@import '@rdlabo/ionic-theme-ios26/dist/css/components/ion-alert';
+@import '@rdlabo/ionic-theme-ios26/dist/css/components/ion-breadcrumbs';
+@import '@rdlabo/ionic-theme-ios26/dist/css/components/ion-button';
+...
+```
+
+#### Individual Import for Dark Mode Components
+
+If you're using dark mode, you need to use SCSS because the selectors differ between `Always`, `System`, and `Class` modes, which cannot be handled with CSS files alone.
+
+> **Note**: Currently, only `ion-button` has separate dark mode styling applied.
+
+Always (Always Dark Mode):
+```scss
+@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
+
+:root {
+    @include theme-dark.default-variables;
+}
+@include theme-dark.ion-button;
+```
+
+System (Follow System Settings):
+```scss
+@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        @include theme-dark.default-variables;
+    }
+    @include theme-dark.ion-button;
+}
+```
+
+Class (Toggle with CSS Class):
+```scss
+@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
+
+.ion-palette-dark {
+    @include theme-dark.default-variables;
+    @include theme-dark.ion-button;
+}
+```
+
+
+### 2. Using the `.ios26-disabled` Class
+
+**Recommended for**: When you want to apply the iOS26 theme to all components in general, but use standard Ionic styling in specific places.
+
+After importing all components, you can disable the iOS26 theme for specific component instances by adding the `.ios26-disabled` class.
+
+```html
+<!-- iOS26 theme applied -->
+<ion-button>iOS26 Design</ion-button>
+
+<!-- Standard Ionic styling -->
+<ion-button class="ios26-disabled">Standard Ionic Design</ion-button>
+```
 
-Many components automatically have the iOS26 design applied, but apply this class when you don't want it. Supported selectors are as follows:
+This method is useful in the following scenarios:
 
-- `ion-button`
-  - `ion-header > ion-toolbar > ion-buttons.ios26-no-liquid-glass > ion-button`
-  - `ion-header > ion-toolbar > ion-buttons.ios26-no-liquid-glass > ion-back-button`
-  - `ion-header > ion-toolbar > ion-buttons > ion-button.ios26-no-liquid-glass`
-  - `ion-header > ion-toolbar > ion-buttons > ion-back-button.ios26-no-liquid-glass`
-- `ion-popover.ios26-no-liquid-glass`
+- When you want to use standard styling only within specific modals or popovers
+- When you want to perform a gradual migration (add `.ios26-disabled` to some screens and remove it later)
+- When you want to conduct A/B testing for designs

package/USING_ION_ITEM_GROUP.md

@@ -13,15 +13,13 @@ Only when these conditions apply, you need to wrap your list items with `ion-ite
 ## Implementation Example
 
 ```diff
-  <ion-content color="light">
-    <ion-list inset=true>
-      <ion-list-header><ion-label>Label</ion-label></ion-list-header>
-+     <ion-item-group>
-        <ion-item>...</ion-item>
-        <ion-item>...</ion-item>
-+     </ion-item-group>
-    </ion-list>
-  </ion-content>
+  <ion-list inset=true>
+    <ion-list-header><ion-label>Label</ion-label></ion-list-header>
++   <ion-item-group>
+      <ion-item>...</ion-item>
+      <ion-item>...</ion-item>
++   </ion-item-group>
+  </ion-list>
 ```
 
 ## Why is this change necessary?

package/demo/eslint.config.js

@@ -22,6 +22,8 @@ module.exports = tseslint.config(
       "@typescript-eslint/no-unused-vars": "off",
       "@angular-eslint/directive-selector": "off",
       "@angular-eslint/component-selector": "off",
+      "@angular-eslint/no-empty-lifecycle-method": "off",
+      "@typescript-eslint/no-empty-function": "off",
       '@rdlabo/rules/deny-constructor-di': 'error',
       '@rdlabo/rules/deny-import-from-ionic-module': 'error',
       '@rdlabo/rules/implements-ionic-lifecycle': 'error',

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

@@ -1,8 +1,8 @@
-<ion-header [translucent]="true" class="ion-palette-dark">
+<ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title size="large" style="margin-top: 8px">Library</ion-title>
-    <ion-buttons slot="end">
-      <ion-button fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+    <ion-buttons class="ios26-disabled" slot="end" style="margin-top: 6px">
+      <ion-button fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26" style="margin-right: 8px"
         ><ion-icon name="logo-github" slot="icon-only"></ion-icon
       ></ion-button>
       <ion-button fill="default">Select</ion-button>

package/demo/src/app/album/album-page.component.scss

@@ -1,21 +1,7 @@
-:host {
-  --ios26-color-background-rgb: var(--ion-color-dark-rgb);
-}
-
 ion-header {
   position: absolute;
   top: 0;
   left: 0;
-  ion-title,
-  ion-button::part(native) {
-    color: var(--ion-text-color, #fff);
-  }
-  &.header-translucent::after {
-    // Overwrite default settings
-    box-shadow:
-      inset 0 0 0 0 rgba(0, 0, 0, 0),
-      inset 0 calc(66px + var(--ion-safe-area-top)) 20px -20px rgba(0, 0, 0, 0.4);
-  }
 }
 
 ion-content {

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

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

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

@@ -2,15 +2,15 @@
   <ion-toolbar>
     <ion-title>Health</ion-title>
     <ion-buttons slot="end">
-      <ion-button fill="default" color="dark" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+      <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>
   </ion-toolbar>
 </ion-header>
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" color="light">
   <ion-header collapse="condense">
-    <ion-toolbar>
+    <ion-toolbar color="light">
       <ion-title size="large">Health(WIP)</ion-title>
     </ion-toolbar>
   </ion-header>

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

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

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

@@ -2,9 +2,10 @@
   <ion-toolbar>
     <ion-title>Index</ion-title>
     <ion-buttons slot="end">
-      <ion-button color="dark" fill="default" href="https://github.com/rdlabo-team/ionic-theme-ios26"
+      <ion-button href="https://github.com/rdlabo-team/ionic-theme-ios26"
         ><ion-icon name="logo-github" slot="icon-only"></ion-icon
       ></ion-button>
+      <ion-button href="https://ionicframework.com/"><ion-icon name="logo-ionic" slot="icon-only"></ion-icon></ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
@@ -15,10 +16,17 @@
     </ion-toolbar>
   </ion-header>
   <ion-list [inset]="true">
-    <ion-list-header><ion-label>Enable Demo</ion-label></ion-list-header>
+    <ion-list-header><ion-label>Settings</ion-label></ion-list-header>
+    <ion-item-group>
+      <ion-item><ion-toggle (ionChange)="changeColorMode($event)">Dark Mode</ion-toggle></ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <ion-list [inset]="true">
+    <ion-list-header><ion-label>Ready</ion-label></ion-list-header>
     <ion-item-group>
       @for (item of enableComponents(); track item.name) {
-        <ion-item [disabled]="!item.enable" [button]="item.enable" (click)="navigateComponent(item)">
+        <ion-item [button]="true" (click)="navigateComponent(item)">
           <ion-label>{{ item.name }}</ion-label>
         </ion-item>
       }
@@ -27,15 +35,17 @@
   </ion-list>
 
   <ion-list [inset]="true">
-    <ion-list-header><ion-label>Disable Demo</ion-label></ion-list-header>
+    <ion-list-header><ion-label>Spec Limitation</ion-label></ion-list-header>
     <ion-item-group>
       @for (item of disableComponents(); track item.name) {
-        <ion-item [disabled]="!item.enable" [button]="item.enable">
+        <ion-item [button]="true" (click)="navigateComponent(item)">
           <ion-label>{{ item.name }}</ion-label>
-          <ion-text>WIP</ion-text>
         </ion-item>
       }
     </ion-item-group>
-    <ion-note>These components are under development. However, that doesn't mean they can't be used.</ion-note>
+    <ion-note
+      >Some HTML elements or APIs are missing, which limits what can be implemented. This is currently being discussed with the Ionic
+      team.</ion-note
+    >
   </ion-list>
 </ion-content>

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

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DemoPhotoEditorPage } from './index-page.component';
-import { testConfig } from '../../../../util/test.config';
+import { IndexPageComponent } from './index-page.component';
+import { testConfig } from '../../../util/test.config';
 
-describe('PhotoEditorPage', () => {
-  let component: DemoPhotoEditorPage;
-  let fixture: ComponentFixture<DemoPhotoEditorPage>;
+describe('IndexPageComponent', () => {
+  let component: IndexPageComponent;
+  let fixture: ComponentFixture<IndexPageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       providers: testConfig.providers,
     }).compileComponents();
-    fixture = TestBed.createComponent(DemoPhotoEditorPage);
+    fixture = TestBed.createComponent(IndexPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });