@rdlabo/ionic-theme-ios26 0.0.1 → 0.0.3

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/.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,25 @@
+## feat(): ion-config new property for disable ion-back-button Animation
+
+遷移前画面で `collapse` を使っており、遷移後画面で `ion-buttons ion-back-button` を指定している場合、iOS18以前のアニメーション処理が行われます。これは、iOS26以降では不要なので、無効化できるプロパティが必要です。
+
+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` の中にいれない対応をとっています。。
+
+# feat(): ion-content[fullscreen=true] will have .content-fullscreen class
+
+iOS26の上下セーフエリアのぼかしを入れるため、ion-contentがfullscreen設定されているかのclassが必要です。
+以下のようなセレクターの指定を行いたいです。
+
+```css
+.ion-page:has(ion-header.header-translucent) ion-content.content-fullscreen {
+}
+
+.ion-page:has(ion-header.footer-translucent) ion-content.content-fullscreen {
+}
+```
+
+現在、 `translucent` な要素を使っている場合はfullscreenを指定している前提で実装していますが、これは確実ではありません。

package/README.md

@@ -2,132 +2,109 @@
 
 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
 
 This library provides CSS files to apply the iOS26 design system used in real projects to Ionic applications. It customizes the appearance and behavior of Ionic components based on the latest iOS26 design guidelines.
 
 > **⚠️ 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`) and set the `--ios26-floating-safe-area-bottom` variable:
 
 ```scss
-@import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
+@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.min.css';
 
-/* Required: Safe area configuration */
 :root {
-  --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
+  /*
+   * 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));
 }
 ```
 
-> **Important**: The theme will not work correctly without the `--max-safe-area` setting. This configuration is mandatory.
+## Important Notes
 
-### 3. Framework-specific Configuration Examples
+### Support Dark Mode
 
-#### For Angular Projects
+We support Ionic Dark Mode. More information is here: https://ionicframework.com/docs/theming/dark-mode
 
-Add CSS file to `angular.json`:
+| 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'  |
 
-```json
-{
-  "styles": [
-    "node_modules/@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css"
-  ]
-}
-```
+### `ion-back-button` は `ion-buttons` に入れないで使う必要があります
 
-**Required**: Set `--max-safe-area` in `src/styles.scss`:
+以下の条件を満たす時、Ionic Frameworkは `ion-back-button` をプログラムで生成して、アニメーションで表示します。
 
-```scss
-:root {
-  --max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
-}
-```
-
-#### For React Projects
+- 遷移前のページに `ion-header[collapse='condense']` を使用している
+- 遷移後のページに、 `ion-buttons ion-back-button` がある
 
-Import CSS file in `index.js` or `App.js`:
+これはiOS26のUIではなく、このプログラムを避けるために以下の実装を行う必要があります。
 
-```javascript
-import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
+```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 main CSS file:
+### Using `ion-item-group`
 
-```css
-: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`. For details, please refer to [USING_ION_ITEM_GROUP.md](./USING_ION_ITEM_GROUP.md).
 
-#### For Vue.js Projects
+### You can also use the liquid glass mixin
 
-Import CSS file in `main.js`:
+You can use the liquid glass mixin by importing SCSS files from the main package.
 
-```javascript
-import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
-```
-
-**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;
 }
 ```
 
+## CSS Utility Classes
 
-## Development Status
-
-This library is currently in the development and consideration phase. We are working on the following tasks:
-
-- [ ] API stabilization
-- [ ] Documentation improvement
-- [ ] Test coverage enhancement
-- [ ] Performance optimization
-- [ ] Community feedback collection
-
-## Developer Information
-
-### Build
-
-```bash
-ng build ionic-theme-ios26
-```
-
-### Test
-
-```bash
-ng test
-```
-
-## License
-
-MIT License
+### .ios26-liquid-glass
 
-## Contributing
+Apply this class to components where you want to use the iOS26 design that is not automatically applied. Supported selectors are as follows:
 
-This project is under development. We welcome feedback and suggestions:
+- `ion-button`
+  - `ion-buttons.ios26-liquid-glass ion-button`
+  - `ion-button.ios26-liquid-glass`
 
-- Issue reporting
-- Feature requests
-- Documentation improvements
-- Code review participation
+### .ios26-no-liquid-glass
 
-## Support
+Many components automatically have the iOS26 design applied, but apply this class when you don't want it. Supported selectors are as follows:
 
-- **Under Development**: No formal support is provided
-- **Feedback**: Please report issues on GitHub Issues page
-- **Community**: Participate in developer community discussions
+- `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`

package/USING_ION_ITEM_GROUP.md

@@ -0,0 +1,58 @@
+# Using `ion-item-group` with iOS26 Theme
+
+This theme aims to bring Ionic Framework applications as close as possible to iOS 26 design. In most cases, you can use your existing Ionic code as-is, but **only under specific conditions**, you need to add `ion-item-group`.
+
+## When is `ion-item-group` required?
+
+It is only required when **both** of the following conditions are met:
+
+- You have enabled the `inset` property on `ion-list`
+
+Only when these conditions apply, you need to wrap your list items with `ion-item-group`.
+
+## 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>
+```
+
+## Why is this change necessary?
+
+### Background: Challenges in iOS Design Reproduction
+
+By default in Ionic Framework, `ion-list` has a background color, and `ion-list-header` is treated as part of the list. However, with this structure, it's impossible to accurately reproduce **iOS's native design patterns**.
+
+![](screenshots/why-ion-list-inset.png)
+
+### Solution: Background Color Separation
+
+To faithfully reproduce iOS design, this theme makes the following changes:
+
+- Set `ion-list` background color to transparent
+- Delegate background color to `ion-item-group`
+
+This change allows `ion-list-header` to be treated as an independent element, achieving the native iOS appearance.
+
+## Using the Same Design with Material Design
+
+If you want to use the same design pattern with Material Design theme, import the following CSS:
+
+```css
+@import '@rdlabo/ionic-theme-ios26/css/md-ion-list-inset.css';
+```
+
+This will apply the same `ion-item-group` pattern to the Material Design theme as well.
+
+## Summary
+
+- **Most cases**: You can use your existing Ionic code as-is
+- **Specific conditions only**: `ion-item-group` is only required when setting using `inset` on `ion-list`
+- **Purpose**: To accurately reproduce iOS 26's native design patterns

package/build-sass.js

@@ -0,0 +1,25 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const srcDir = path.resolve(__dirname, 'src');
+const outDir = path.resolve(__dirname, 'dist/css');
+
+// 出力先ディレクトリがなければ作る
+if (!fs.existsSync(outDir)) {
+  fs.mkdirSync(outDir, { recursive: true });
+}
+
+// src ディレクトリの .scss ファイルを取得
+const scssFiles = fs.readdirSync(srcDir).filter(f => f.endsWith('.scss'));
+
+scssFiles.forEach(file => {
+  const srcPath = path.join(srcDir, file);
+  const fileName = path.basename(file, '.scss');
+  const outPath = path.join(outDir, `${fileName}.min.css`);
+
+  console.log(`Building ${srcPath} → ${outPath}`);
+  execSync(`npx sass ${srcPath} ${outPath} --style=compressed`, { stdio: 'inherit' });
+});
+
+console.log('All SCSS files compiled successfully!');

package/demo/ .cursor/rules/angular-20.mdc

@@ -0,0 +1,136 @@
+---
+description: This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.
+globs: ["**/*.{ts,html,scss,css}"]
+---
+
+# Angular Best Practices
+
+This project adheres to modern Angular best practices, emphasizing maintainability, performance, accessibility, and scalability.
+
+## TypeScript Best Practices
+
+* **Strict Type Checking:** Always enable and adhere to strict type checking. This helps catch errors early and improves code quality.
+* **Prefer Type Inference:** Allow TypeScript to infer types when they are obvious from the context. This reduces verbosity while maintaining type safety.
+    * **Bad:**
+        ```typescript
+        let name: string = 'Angular';
+        ```
+    * **Good:**
+        ```typescript
+        let name = 'Angular';
+        ```
+* **Avoid `any`:** Do not use the `any` type unless absolutely necessary as it bypasses type checking. Prefer `unknown` when a type is uncertain and you need to handle it safely.
+
+## Angular Best Practices
+
+* **Standalone Components:** Always use standalone components, directives, and pipes. Avoid using `NgModules` for new features or refactoring existing ones.
+* **Implicit Standalone:** When creating standalone components, you do not need to explicitly set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators, as it is implied by default.
+    * **Bad:**
+        ```typescript
+        @Component({
+          standalone: true,
+          // ...
+        })
+        export class MyComponent {}
+        ```
+    * **Good:**
+        ```typescript
+        @Component({
+          // `standalone: true` is implied
+          // ...
+        })
+        export class MyComponent {}
+        ```
+* **Signals for State Management:** Utilize Angular Signals for reactive state management within components and services.
+* **Lazy Loading:** Implement lazy loading for feature routes to improve initial load times of your application.
+* **NgOptimizedImage:** Use `NgOptimizedImage` for all static images to automatically optimize image loading and performance.
+* **Host bindings:** Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead.
+
+## Components
+
+* **Single Responsibility:** Keep components small, focused, and responsible for a single piece of functionality.
+* **`input()` and `output()` Functions:** Prefer `input()` and `output()` functions over the `@Input()` and `@Output()` decorators for defining component inputs and outputs.
+    * **Old Decorator Syntax:**
+        ```typescript
+        @Input() userId!: string;
+        @Output() userSelected = new EventEmitter<string>();
+        ```
+    * **New Function Syntax:**
+        ```typescript
+        import { input, output } from '@angular/core';
+
+        // ...
+        userId = input<string>('');
+        userSelected = output<string>();
+        ```
+* **`computed()` for Derived State:** Use the `computed()` function from `@angular/core` for derived state based on signals.
+* **`ChangeDetectionStrategy.OnPush`:** Always set `changeDetection: ChangeDetectionStrategy.OnPush` in the `@Component` decorator for performance benefits by reducing unnecessary change detection cycles.
+* **Inline Templates:** Prefer inline templates (template: `...`) for small components to keep related code together. For larger templates, use external HTML files.
+* **Reactive Forms:** Prefer Reactive forms over Template-driven forms for complex forms, validation, and dynamic controls due to their explicit, immutable, and synchronous nature.
+* **No `ngClass` / `NgClass`:** Do not use the `ngClass` directive. Instead, use native `class` bindings for conditional styling.
+    * **Bad:**
+        ```html
+        <section [ngClass]="{'active': isActive}"></section>
+        ```
+    * **Good:**
+        ```html
+        <section [class.active]="isActive"></section>
+        <section [class]="{'active': isActive}"></section>
+        <section [class]="myClasses"></section>
+        ```
+* **No `ngStyle` / `NgStyle`:** Do not use the `ngStyle` directive. Instead, use native `style` bindings for conditional inline styles.
+    * **Bad:**
+        ```html
+        <section [ngStyle]="{'font-size': fontSize + 'px'}"></section>
+        ```
+    * **Good:**
+        ```html
+        <section [style.font-size.px]="fontSize"></section>
+        <section [style]="myStyles"></section>
+        ```
+
+## State Management
+
+* **Signals for Local State:** Use signals for managing local component state.
+* **`computed()` for Derived State:** Leverage `computed()` for any state that can be derived from other signals.
+* **Pure and Predictable Transformations:** Ensure state transformations are pure functions (no side effects) and predictable.
+* **Signal value updates:** Do NOT use `mutate` on signals, use `update` or `set` instead.
+
+## Templates
+
+* **Simple Templates:** Keep templates as simple as possible, avoiding complex logic directly in the template. Delegate complex logic to the component's TypeScript code.
+* **Native Control Flow:** Use the new built-in control flow syntax (`@if`, `@for`, `@switch`) instead of the older structural directives (`*ngIf`, `*ngFor`, `*ngSwitch`).
+    * **Old Syntax:**
+        ```html
+        <section *ngIf="isVisible">Content</section>
+        <section *ngFor="let item of items">{{ item }}</section>
+        ```
+    * **New Syntax:**
+        ```html
+        @if (isVisible) {
+          <section>Content</section>
+        }
+        @for (item of items; track item.id) {
+          <section>{{ item }}</section>
+        }
+        ```
+* **Async Pipe:** Use the `async` pipe to handle observables in templates. This automatically subscribes and unsubscribes, preventing memory leaks.
+
+## Services
+
+* **Single Responsibility:** Design services around a single, well-defined responsibility.
+* **`providedIn: 'root'`:** Use the `providedIn: 'root'` option when declaring injectable services to ensure they are singletons and tree-shakable.
+* **`inject()` Function:** Prefer the `inject()` function over constructor injection when injecting dependencies, especially within `provide` functions, `computed` properties, or outside of constructor context.
+    * **Old Constructor Injection:**
+        ```typescript
+        constructor(private myService: MyService) {}
+        ```
+    * **New `inject()` Function:**
+        ```typescript
+        import { inject } from '@angular/core';
+
+        export class MyComponent {
+          private myService = inject(MyService);
+          // ...
+        }
+        ```

package/demo/.browserslistrc

@@ -0,0 +1,15 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.dev/reference/versions#browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+Chrome >=107
+Firefox >=106
+Edge >=107
+Safari >=16.1
+iOS >=16.1

package/demo/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/demo/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+       "Webnative.webnative"
+    ]
+}

package/demo/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
+}