rdlabo-dev · rdlabo · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026
diff --git a/demo/e2e/animation.spec.ts b/demo/e2e/animation.spec.ts
@@ -60,7 +60,7 @@ test.describe('Animation Tests', () => {
   });
 
   test('runs and completes the iOS page transition', async ({ page }) => {
-    const shade = page.locator('.ios27-transition-shade');
+    const shade = page.locator('.ios-transition-shade');
     const checkDimming = async (back: boolean) => {
       const opacity: number[] = [];
       for (const progress of [0.2, 0.4]) {

diff --git a/demo/e2e/native-ui-shell.spec.ts b/demo/e2e/native-ui-shell.spec.ts
@@ -1,9 +1,11 @@
 import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
-import { compile } from 'sass';
+import { compile, NodePackageImporter } from 'sass';
 import { resolve } from 'node:path';
 import * as overlayTypes from '../src/app/overlay-types';
 
+const importer = new NodePackageImporter(resolve(__dirname, '../../'));
+
 const mockNative = async (page: Page, fail = false) => {
   await page.addInitScript((fail) => {
     const state = {
@@ -1730,7 +1732,9 @@ for (const theme of ['light', 'class', 'system', 'always'] as const) {
       document.documentElement.style.colorScheme = 'normal';
     });
     if (theme !== 'light') {
-      await page.addStyleTag({ content: compile(resolve(__dirname, `../../src/styles/ionic-theme-ios27-dark-${theme}.scss`)).css });
+      await page.addStyleTag({
+        content: compile(resolve(__dirname, `../../src/styles/ionic-theme-ios27-dark-${theme}.scss`), { importers: [importer] }).css,
+      });
     }
     for (const dark of [true, false, true]) {
       if (theme === 'class') {

diff --git a/demo/e2e/popover.spec.ts b/demo/e2e/popover.spec.ts
@@ -136,7 +136,7 @@ for (const width of [390, 1210]) {
         const measure = el.getBoundingClientRect;
         el.getBoundingClientRect = () => {
           const rect = measure.call(el);
-          if (!el.classList.contains('ios27-replace-element')) el.presentationBounds = rect;
+          if (!el.classList.contains('ios-theme-replace-element')) el.presentationBounds = rect;
           return rect;
         };
         el.restoreMeasurement = () => {
@@ -249,7 +249,7 @@ for (const tag of ['button', 'ion-button']) {
             originY: rect.top + origin[1],
             expected: horizontal ? 320.5 : 520.5,
             callout: root.querySelectorAll('[part="callout-glass"]').length,
-            replacing: anchor.classList.contains('ios27-replace-element'),
+            replacing: anchor.classList.contains('ios-theme-replace-element'),
           };
           await popover.dismiss();
           popover.remove();

diff --git a/demo/e2e/tab-bar-preferences.spec.ts b/demo/e2e/tab-bar-preferences.spec.ts
@@ -1,14 +1,18 @@
 import { expect, test } from '@playwright/test';
-import { compile } from 'sass';
+import { compile, NodePackageImporter } from 'sass';
 import { resolve } from 'node:path';
 
 test.use({ viewport: { width: 402, height: 874 }, hasTouch: true });
 
+const importer = new NodePackageImporter(resolve(__dirname, '../../'));
+
 for (const theme of ['light', 'class', 'system', 'always']) {
   test(`tab selection color fallbacks in ${theme} mode`, async ({ page }) => {
     const styles = resolve(__dirname, '../../src/styles');
-    const css = compile(`${styles}/default-variables.scss`).css + compile(`${styles}/ionic-theme-ios27.scss`).css;
-    const darkCss = theme === 'light' ? '' : compile(`${styles}/ionic-theme-ios27-dark-${theme}.scss`).css;
+    const css =
+      compile(`${styles}/default-variables.scss`, { importers: [importer] }).css +
+      compile(`${styles}/ionic-theme-ios27.scss`, { importers: [importer] }).css;
+    const darkCss = theme === 'light' ? '' : compile(`${styles}/ionic-theme-ios27-dark-${theme}.scss`, { importers: [importer] }).css;
     await page.emulateMedia({ colorScheme: 'dark', reducedMotion: 'reduce' });
     const html = `
       <html class="${theme === 'class' ? 'ion-palette-dark' : ''}"><body>

diff --git a/demo/playwright.config.ts b/demo/playwright.config.ts
@@ -7,6 +7,7 @@ import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
   testDir: './e2e',
   fullyParallel: true,
+  workers: process.env['CI'] ? 4 : undefined,
   forbidOnly: !!process.env['CI'],
   retries: process.env['CI'] ? 2 : 0,
   reporter: 'html',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:ts",
-    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
+    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map --pkg-importer=node",
     "build:ts": "tsc",
     "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
     "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
@@ -53,6 +53,9 @@
     "url": "https://github.com/rdlabo-dev/ionic-theme-ios27/issues"
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
+  "dependencies": {
+    "@rdlabo/ionic-theme-utils": "git+ssh://git@github.com/rdlabo-dev/ionic-theme-utils.git#d27e4d9bc1bc53f932bcc653d420936553847f4c"
+  },
   "devDependencies": {
     "@capacitor/core": "^8.5.2",
     "@ionic/angular": "^9.0.0",

diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,10 @@
 import { registeredEffect } from './sheets-of-glass/interfaces';
 import { registerEffect } from './sheets-of-glass';
 export * from './sheets-of-glass/interfaces';
-export { iosEnterAnimation as popoverEnterAnimation } from './popover/animations/ios.enter';
-export { iosLeaveAnimation as popoverLeaveAnimation } from './popover/animations/ios.leave';
+export {
+  iosPopoverEnterAnimation as popoverEnterAnimation,
+  iosPopoverLeaveAnimation as popoverLeaveAnimation,
+} from '@rdlabo/ionic-theme-utils';
 export * from './tab-bar-searchable';
 export * from './searchbar';
 export * from './transition/ios.transition';

diff --git a/src/popover/animations/ios.enter.ts b/src/popover/animations/ios.enter.ts