@rdlabo/ionic-theme-ios26 0.3.5 → 0.4.0

package/README.md

@@ -52,7 +52,7 @@ And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
 ### CSS Variables
 
 To customize the library's default styles to match your design, several CSS variables are provided. See this file for details:
-https://github.com/rdlabo-team/ionic-theme-ios26/blob/main/src/default-variables.scss
+https://github.com/rdlabo-team/ionic-theme-ios26/blob/main/src/styles/default-variables.scss
 
 
 ## Features
@@ -74,7 +74,7 @@ Add the `.ios26-disabled` class to disable the iOS26 theme on specific component
 Import the SCSS files from the main package to use the liquid glass mixin.
 
 ```scss
-@use '@rdlabo/ionic-theme-ios26/src/utils/api';
+@use '@rdlabo/ionic-theme-ios26/src/styles/utils/api';
 
 ion-textarea label.textarea-wrapper {
   @include api.glass-background;
@@ -131,7 +131,7 @@ You can see the difference in the following video. The first example shows `ion-
 This is a known issue that has been shared with the Ionic team. We will update this library accordingly once Ionic Core addresses it.
 
 
-### Experimental: Using Tap Animation with IonTabButton / IonSegmentButton
+### Experimental: Using Gesture Animation with IonTabButton / IonSegmentButton
 
 __This feature is experimental. The library can be used without this feature.__
 
@@ -140,8 +140,18 @@ By registering IonTabBar / IonSegment, you can display animation effects on IonT
 ```js
 import { registerTabBarEffect, registerSegmentEffect } from '@rdlabo/ionic-theme-ios26';
 
-registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar'));
-registerSegmentEffect(document.querySelector<HTMLElement>('ion-segment'));
+const registeredTabBarEffect = registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar'));
+const registeredSegmentEffect = registerSegmentEffect(document.querySelector<HTMLElement>('ion-segment'));
+
+const destroy = () => {
+  /**
+   * If the registered DOM element is removed (e.g., due to page navigation),
+   * make sure to destroy the gesture and animation. This will also remove the event listeners.
+   * You can re-register them if needed.
+   */
+  registeredTabBarEffect?.destroy();
+  registeredSegmentEffect?.destroy();
+}
 ```
 
 
@@ -166,7 +176,7 @@ When importing individual components with dark mode support, use SCSS instead of
 
 Always (Always Dark Mode):
 ```scss
-@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
+@use '@rdlabo/ionic-theme-ios26/src/styles/utils/theme-dark';
 
 :root {
     @include theme-dark.default-variables;
@@ -178,7 +188,7 @@ Always (Always Dark Mode):
 
 System (Follow System Settings):
 ```scss
-@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
+@use '@rdlabo/ionic-theme-ios26/src/styles/utils/theme-dark';
 
 @media (prefers-color-scheme: dark) {
     :root {
@@ -192,7 +202,7 @@ System (Follow System Settings):
 
 Class (Toggle with CSS Class):
 ```scss
-@use '@rdlabo/ionic-theme-ios26/src/utils/theme-dark';
+@use '@rdlabo/ionic-theme-ios26/src/styles/utils/theme-dark';
 
 .ion-palette-dark {
     @include theme-dark.default-variables;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "iOS26 CSS Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",