@rdlabo/ionic-theme-ios26 0.1.2 → 0.1.4

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

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

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

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

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

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

package/.lintstagedrc.yml

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

package/.prettierignore

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

package/FEEDBACK.md

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

@@ -1,45 +0,0 @@
-# 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/USING_ION_ITEM_GROUP.md

@@ -1,56 +0,0 @@
-# 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-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?
-
-### 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/demo/ .cursor/rules/angular-20.mdc

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

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

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

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

package/demo/.vscode/settings.json

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