@rdlabo/ionic-theme-ios26 0.0.2 → 0.0.4

package/.cursor/rules/css-compilation.mdc

@@ -0,0 +1,34 @@
+---
+description: SCSS to CSS compilation process and build workflow
+globs: *.scss,*.css,package.json
+---
+
+# CSS Compilation Process
+
+## ビルドプロセス
+
+### ソースファイル
+- **入力**: `src/` ディレクトリ内のSCSSファイル
+- **メインファイル**: [src/ionic-theme-ios26.scss](mdc:src/ionic-theme-ios26.scss)
+
+### 出力ファイル
+- **出力**: `dist/css/` ディレクトリ内のCSSファイル
+- **生成ファイル**: 
+  - [dist/css/ionic-theme-ios26.min.css](mdc:dist/css/ionic-theme-ios26.min.css): メインCSSファイル（圧縮版）
+  - [dist/css/ionic-theme-ios26.min.css.map](mdc:dist/css/ionic-theme-ios26.min.css.map): ソースマップ
+  - [dist/css/md-ion-list-inset.min.css](mdc:dist/css/md-ion-list-inset.min.css): インセットリスト専用CSS（圧縮版）
+  - [dist/css/md-ion-list-inset.min.css.map](mdc:dist/css/md-ion-list-inset.min.css.map): ソースマップ
+
+## コンパイル時の注意事項
+
+1. **依存関係**: [package.json](mdc:package.json)でビルドツールの依存関係を確認
+2. **ソースマップ**: 開発時のデバッグ用にソースマップファイルも生成
+3. **最適化**: 本番用にはCSSの最適化（minify）を検討
+4. **テスト**: コンパイル後は`demo/`アプリケーションで動作確認
+
+## ファイル構造の一貫性
+
+- SCSSファイルは`src/`に配置
+- コンパイル後のCSSファイルは`dist/css/`に配置
+- デモアプリケーションは`demo/`に配置
+- スクリーンショットなどのリソースは`screenshots/`に配置

package/.cursor/rules/demo-application.mdc

@@ -0,0 +1,39 @@
+---
+description: Angular demo application structure and usage
+globs: demo/**/*
+---
+
+# Demo Application (Angular)
+
+## デモアプリケーションの目的
+
+`demo/` ディレクトリには、Ionic iOS26テーマの動作確認用のAngularアプリケーションが含まれています。
+
+## 主要なコンポーネント
+
+### ページコンポーネント
+- [album-page.component](mdc:demo/src/app/album/): アルバムページ（リスト表示の確認）
+- [health-page.component](mdc:demo/src/app/health/): ヘルスページ（ヘルス関連UIの確認）
+- [settings-page.component](mdc:demo/src/app/settings/): 設定ページ（設定UIの確認）
+- [simple-page.component](mdc:demo/src/app/simple/): シンプルページ（基本的なコンポーネントの確認）
+
+### ナビゲーション
+- [tabs.page](mdc:demo/src/app/tabs/): タブベースのナビゲーション
+
+## テーマファイル
+
+- [demo/src/theme/theme-ios26.scss](mdc:demo/src/theme/theme-ios26.scss): デモアプリ用のテーマ設定
+- [demo/src/global.scss](mdc:demo/src/global.scss): グローバルスタイル
+
+## 使用方法
+
+1. **開発サーバー起動**: `cd demo && npm start` または `ionic serve`
+2. **テーマ確認**: 各ページでiOS26テーマの適用状況を確認
+3. **スタイル調整**: `src/` のSCSSファイルを編集後、デモアプリで確認
+
+## 設定ファイル
+
+- [demo/angular.json](mdc:demo/angular.json): Angular CLI設定
+- [demo/package.json](mdc:demo/package.json): デモアプリの依存関係
+- [demo/ionic.config.json](mdc:demo/ionic.config.json): Ionic設定
+- [demo/capacitor.config.ts](mdc:demo/capacitor.config.ts): Capacitor設定

package/.cursor/rules/development-workflow.mdc

@@ -0,0 +1,41 @@
+---
+description: Development workflow and directory structure guidelines
+alwaysApply: true
+---
+
+# Development Workflow
+
+## ディレクトリ構造の詳細
+
+### src/ ディレクトリ
+- **src/components/**: 個別のIonicコンポーネント用のSCSSファイル
+  - [ion-button.scss](mdc:src/components/ion-button.scss): ボタンスタイル
+  - [ion-list.scss](mdc:src/components/ion-list.scss): リストスタイル
+  - [ion-popover.scss](mdc:src/components/ion-popover.scss): ポップオーバースタイル
+  - [ion-searchbar.scss](mdc:src/components/ion-searchbar.scss): 検索バースタイル
+  - [ion-tabs.scss](mdc:src/components/ion-tabs.scss): タブスタイル
+  - [ion-toggle.scss](mdc:src/components/ion-toggle.scss): トグルスタイル
+
+- **src/utils/**: ユーティリティファイル
+  - [api.scss](mdc:src/utils/api.scss): API関連ユーティリティ
+  - [theme-dark.scss](mdc:src/utils/theme-dark.scss): ダークテーマ用ユーティリティ
+  - [theme-list-inset.scss](mdc:src/utils/theme-list-inset.scss): インセットリスト用ユーティリティ
+  - [translucent.scss](mdc:src/utils/translucent.scss): 半透明効果用ユーティリティ
+
+- **src/**: ルートレベルのファイル
+  - [default-variables.scss](mdc:src/default-variables.scss): デフォルト変数定義
+  - [md-ion-list-inset.scss](mdc:src/md-ion-list-inset.scss): Material Design用インセットリスト
+
+- **src/ionic-theme-ios26.scss**: メインのSCSSファイル（全てのコンポーネントを統合）
+
+### demo/ ディレクトリ
+- Angular 20ベースのデモアプリケーション
+- 各ページコンポーネントでテーマの動作確認
+- [demo/src/theme/theme-ios26.scss](mdc:demo/src/theme/theme-ios26.scss): デモアプリ用テーマファイル
+
+## 開発時の注意事項
+
+1. **SCSSファイルの編集**: `src/` ディレクトリ内のSCSSファイルを編集
+2. **コンパイル**: 変更後は適切なビルドコマンドでCSSファイルを生成
+3. **確認**: `demo/` アプリケーションでスタイルの動作確認
+4. **ドキュメント**: READMEは英語で記述（OSS配布のため）

package/.cursor/rules/project-role.mdc

@@ -0,0 +1,21 @@
+---
+description: Ionic iOS26 Theme Library Project Overview
+alwaysApply: true
+---
+
+# Ionic iOS26 Theme Library Project
+
+このプロジェクトは、Ionic FrameworkをiOS26のルックアンドフィールにするためのCSSライブラリです。OSSで配布するため、READMEの記述は基本的に英語になります。
+
+## プロジェクト構造
+
+- **src/**: コンパイル前のSCSSファイルが配置されます
+- **css/**: コンパイル後のCSSファイルが配置されます
+- **demo/**: 開発と確認に用いるAngularプロジェクトです
+
+## 主要なファイル
+
+- [package.json](mdc:package.json): プロジェクトの依存関係とビルドスクリプト
+- [src/ionic-theme-ios26.scss](mdc:src/ionic-theme-ios26.scss): メインのSCSSファイル
+- [demo/](mdc:demo/): Angularデモアプリケーション
+- [README.md](mdc:README.md): プロジェクトの説明（英語）

package/.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: rdlabo
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

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/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/.lintstagedrc.yml

@@ -0,0 +1,6 @@
+"*.ts":
+  - prettier --parser typescript --write
+"*.html":
+  - prettier --parser angular --write
+"*.scss":
+  - prettier --parser scss --write

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+www

package/FEEDBACK.md

@@ -0,0 +1,118 @@
+# Feature Requests for Ionic Framework
+
+## 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
+
+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
+
+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 {
+}
+
+.ion-page:has(ion-header.footer-translucent) ion-content.content-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

@@ -2,6 +2,8 @@
 
 A CSS theme library that applies iOS26 design system to Ionic applications.
 
+![](screenshots/ios26.png)
+
 DEMO is here: https://ionic-theme-ios26.netlify.app/
 
 ## Overview
@@ -10,130 +12,160 @@ This library provides CSS files to apply the iOS26 design system used in real pr
 
 > **⚠️ Under Development**: This library is currently in the development and consideration phase as an OSS project, based on files copied from real projects. We are working on API stability and documentation improvement before full-scale use.
 
+## 💖 Support This Project
+
+Enjoying this project? Your support helps keep it alive and growing!  
+Sponsoring means you directly contribute to new features, improvements, and maintenance.
+
+[Become a Sponsor →](https://github.com/sponsors/rdlabo)
 
 ## Setup
 
 > **⚠️ Warning**: This library is under development. API changes and breaking changes may occur before full-scale use.
 
-### 1. Installation
-
 ```bash
 npm install @rdlabo/ionic-theme-ios26
 ```
 
-### 2. CSS File Import (Required)
-
-Import the theme in your project's main CSS file (e.g., `src/styles.scss`) and set the `--max-safe-area` variable:
+And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
 
-```scss
-@import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
-@import '@rdlabo/ionic-theme-ios26/css/ion-list-inset.css';
-
-/* Required: Safe area configuration */
-:root {
-  --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
-}
+```css
+@import '@rdlabo/ionic-theme-ios26/dist/css/default-variables.css';
+@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.min.css';
+
+/*
+ * 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**: The theme will not work correctly without the `--max-safe-area` setting. This configuration is mandatory.
+## Important Notes
 
-### 3. Framework-specific Configuration Examples
+### `ion-back-button` must be used without `ion-buttons`
 
-#### For Angular Projects
+When the following conditions are met, the Ionic Framework programmatically generates and animates the `ion-back-button`:
 
-Add CSS file to `angular.json`:
+- The previous page uses `ion-header[collapse='condense']`
+- The navigated page has `ion-buttons ion-back-button`
 
-```json
-{
-  "styles": [
-    "node_modules/@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css",
-    "node_modules/@rdlabo/ionic-theme-ios26/css/ion-list-inset.css"
-  ]
-}
+This is not the iOS26 UI behavior. To avoid this programmatic behavior, you need to implement it as follows:
+
+```diff
+  <ion-header>
+-   <ion-buttons slot="start">
+-   <ion-back-button></ion-back-button>
+-   </ion-buttons>
++   <ion-back-button slot=start></ion-back-button>
+  </ion-header>
 ```
 
-**Required**: Set `--max-safe-area` in `src/styles.scss`:
+### Using `ion-item-group`
 
-```scss
-:root {
-  --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
-}
+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 React Projects
+For details, please refer to [USING_ION_ITEM_GROUP.md](./USING_ION_ITEM_GROUP.md).
 
-Import CSS file in `index.js` or `App.js`:
+### You can also use the liquid glass mixin
 
-```javascript
-import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
-import '@rdlabo/ionic-theme-ios26/css/ion-list-inset.css';
-```
+You can use the liquid glass mixin by importing SCSS files from the main package.
 
-**Required**: Set `--max-safe-area` in main CSS file:
+```scss
+@use '@rdlabo/ionic-theme-ios26/src/utils/api';
 
-```css
-:root {
-  --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
+ion-textarea label.textarea-wrapper {
+  @include api.glass-background;
 }
 ```
 
-#### For Vue.js Projects
+## Selective Theme Application
 
-Import CSS file in `main.js`:
+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.
 
-```javascript
-import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
-import '@rdlabo/ionic-theme-ios26/css/ion-list-inset.css';
-```
+You can use `1. Import Components Individually` or `2. Using the .ios26-disabled Class`
+
+### 1. Import Components Individually
 
-**Required**: Set `--max-safe-area` in main CSS file:
+**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
-:root {
-  --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
-}
+@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
 
-## Development Status
+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.
 
-This library is currently in the development and consideration phase. We are working on the following tasks:
+> **Note**: Currently, only `ion-button` has separate dark mode styling applied.
 
-- [ ] API stabilization
-- [ ] Documentation improvement
-- [ ] Test coverage enhancement
-- [ ] Performance optimization
-- [ ] Community feedback collection
+Always (Always Dark Mode):
+```scss
+@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
 
-## Developer Information
+:root {
+    @include theme-dark.default-variables;
+}
+@include theme-dark.ion-button;
+```
 
-### Build
+System (Follow System Settings):
+```scss
+@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
 
-```bash
-ng build ionic-theme-ios26
+@media (prefers-color-scheme: dark) {
+    :root {
+        @include theme-dark.default-variables;
+    }
+    @include theme-dark.ion-button;
+}
 ```
 
-### Test
+Class (Toggle with CSS Class):
+```scss
+@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
 
-```bash
-ng test
+.ion-palette-dark {
+    @include theme-dark.default-variables;
+    @include theme-dark.ion-button;
+}
 ```
 
-## License
 
-MIT License
+### 2. Using the `.ios26-disabled` Class
 
-## Contributing
+**Recommended for**: When you want to apply the iOS26 theme to all components in general, but use standard Ionic styling in specific places.
 
-This project is under development. We welcome feedback and suggestions:
+After importing all components, you can disable the iOS26 theme for specific component instances by adding the `.ios26-disabled` class.
 
-- Issue reporting
-- Feature requests
-- Documentation improvements
-- Code review participation
+```html
+<!-- iOS26 theme applied -->
+<ion-button>iOS26 Design</ion-button>
+
+<!-- Standard Ionic styling -->
+<ion-button class="ios26-disabled">Standard Ionic Design</ion-button>
+```
 
-## Support
+This method is useful in the following scenarios:
 
-- **Under Development**: No formal support is provided
-- **Feedback**: Please report issues on GitHub Issues page
-- **Community**: Participate in developer community discussions
+- 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