@rdlabo/ionic-theme-ios27 1.0.0 → 1.0.1

package/README.md

@@ -30,7 +30,7 @@ On Capacitor iOS, the optional, experimental [Native UI Shell](https://docs.rdla
 
 ### Follow the user's device
 
-Pair the iOS 26 and iOS 27 themes so supported Safari versions can present the design of each generation: the iOS 26 look for iOS 26 users and the iOS 27 look for iOS 27 users. The [default setup](#get-started) uses browser feature checks to select the corresponding **styles**; it does not read the iOS version. When both packages are installed, keep the **page transition** on the iOS 27 animation. On even earlier iOS versions, Ionic's default iOS appearance remains when Safari supports neither feature. In a Capacitor iOS app, Native UI Shell's UIKit material follows the installed iOS version.
+Pair the iOS 26 and iOS 27 themes so supported Safari versions can present the design of each generation: the iOS 26 look for iOS 26 users and the iOS 27 look for iOS 27 users. The [default setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27#get-started) uses browser feature checks to select the corresponding **styles**; it does not read the iOS version. When both packages are installed, keep the **page transition** on the iOS 27 animation. On even earlier iOS versions, Ionic's default iOS appearance remains when Safari supports neither feature. In a Capacitor iOS app, Native UI Shell's UIKit material follows the installed iOS version.
 
 ## Get started
 
@@ -153,13 +153,13 @@ Load Ionic's matching dark palette too. To use MD3's page transition in Material
 - [ESLint](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/eslint) — check list structure with ESLint rules.
 - [Features](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/features) — CSS variables, Liquid Glass, selective imports, and dark mode.
 - [Native UI Shell (Experimental)](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell) — project supported Ionic controls, text, and icons into UIKit.
-- [Animation](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/experimental-animation) — tab, segment, and searchable effects.
+- [Animation](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/animation) — tab, segment, and searchable effects.
 - [Migration from iOS 26](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/migration) — upgrade an existing app, including stylesheet, class, and CSS variable changes.
 - [iOS 26 migration history](https://docs.rdlabo.dev/projects/ionic-theme-ios26/docs/migration) — earlier major-version changes for the previous package.
 
 <!-- rdlabo-docs-omit -->
 
-**iOS 26 theme:** See the [`ios26` branch](https://github.com/rdlabo-dev/ionic-theme-ios27/tree/ios26) and [iOS 26 documentation](https://docs.rdlabo.dev/projects/ionic-theme-ios26).
+**iOS 26 theme:** See the [iOS 26 documentation](https://docs.rdlabo.dev/projects/ionic-theme-ios26).
 
 ## Development & Testing
 

package/dist/css/utils/structured-list.css

@@ -0,0 +1 @@
+

package/docs/migration.md

@@ -21,25 +21,25 @@ npm install @rdlabo/ionic-theme-ios27
 Replace unconditional iOS 26 imports in your global Sass stylesheet with two mutually exclusive branches. This example uses class-based dark mode:
 
 ```diff
-+@use 'sass:meta';
++ @use 'sass:meta';
 +
--@use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
--@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';
--@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';
--@use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';
-+@supports (overflow-anchor: auto) {
+- @use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';
++ @supports (overflow-anchor: auto) {
 +  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/default-variables');
 +  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27');
 +  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class');
 +  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect');
-+}
++ }
 +
-+@supports (text-wrap: pretty) and (not (overflow-anchor: auto)) {
++ @supports (text-wrap: pretty) and (not (overflow-anchor: auto)) {
 +  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/default-variables');
 +  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26');
 +  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class');
 +  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect');
-+}
++ }
 ```
 
 Keep Ionic's matching dark palette. For system or always-dark mode, replace both `-dark-class` imports with the matching variant. If you use `md-ion-list-inset`, load the corresponding package's stylesheet inside each branch. Browsers without either feature retain Ionic's default styling.
@@ -49,10 +49,10 @@ Keep Ionic's matching dark palette. For system or always-dark mode, replace both
 Replace the iOS 26 animation import and gate the iOS 27 animations on the same browser features. Resolve the options before Ionic initializes:
 
 ```diff
--import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios26';
-+import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';
+- import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios26';
++ import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';
 +
-+function loadIOSAnimations() {
++ function loadIOSAnimations() {
 +  if (typeof CSS === 'undefined') return {};
 +  if (!CSS.supports('overflow-anchor: auto') && !CSS.supports('text-wrap: pretty')) return {};
 +
@@ -61,7 +61,7 @@ Replace the iOS 26 animation import and gate the iOS 27 animations on the same b
 +    popoverEnter: popoverEnterAnimation,
 +    popoverLeave: popoverLeaveAnimation,
 +  };
-+}
++ }
 
   provideIonicAngular({
 -  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
@@ -83,8 +83,8 @@ Rename theme variables and opt-out classes used by your app. For example:
 +  --ios-theme-content-box-shadow-rgb: 0, 0, 0;
   }
 
--<ion-button class="ios26-disabled">Standard Ionic button</ion-button>
-+<ion-button class="ios-theme-disabled">Standard Ionic button</ion-button>
+- <ion-button class="ios26-disabled">Standard Ionic button</ion-button>
++ <ion-button class="ios-theme-disabled">Standard Ionic button</ion-button>
 ```
 
 The old names remain as deprecated fallbacks. Check the resulting screens in light and dark modes on the browsers you support.
@@ -94,14 +94,14 @@ The old names remain as deprecated fallbacks. Check the resulting screens in lig
 To switch entirely to iOS 27, remove the iOS 26 package and replace its stylesheet and animation imports. The stylesheet changes are:
 
 ```diff
--@use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
--@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';
--@use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';
--@use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';
-+@use '@rdlabo/ionic-theme-ios27/src/styles/default-variables.scss';
-+@use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27.scss';
-+@use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class.scss';
-+@use '@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class.scss';
+- @use '@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/default-variables.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class.scss';
++ @use '@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect.scss';
 ```
 
 Change the animation import from `@rdlabo/ionic-theme-ios26` to `@rdlabo/ionic-theme-ios27`; the existing `isPlatform('ios')` configuration can stay. See the README's [iOS 27-only setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27#use-only-the-ios-27-theme). Unconditional imports apply the new styles on every browser using Ionic iOS mode.

package/docs/native-ui-shell.md

@@ -247,6 +247,17 @@ On iOS, [`Components`](../ios/Sources/IonicNativeUIShellPlugin/Components) owns
 
 ## Demo and verification
 
-See the [demo and verification guide](../demo/native-ui-shell.md) for browser tests, Simulator tests and an independent SPM consumer built from the npm package.
+The demo includes a `native-ui-shell` page for exercising fixed controls. From the repository root, build the library and run the browser tests:
+
+```sh
+npm ci
+npm run build
+cd demo
+npm ci
+npx --no-install playwright install chromium
+npx --no-install playwright test e2e/native-ui-shell.spec.ts e2e/native-ui-shell-edge.spec.ts
+```
+
+For native interaction and placement tests, use Xcode 26 or later, XcodeGen and a booted iOS 26+ Simulator. From the repository root, run `sh scripts/verify-native-ui-shell.sh SIMULATOR_UDID`. This also builds an independent Swift Package Manager consumer from the npm package. Run `sh scripts/verify-native-search.sh SIMULATOR_UDID` for searchable-tab integration, or add `edge` to that command for placement, navigation and keyboard edge cases. The scripts print the location of their local test artifacts.
 
 Search controllers retain their UIKit-managed transition and are excluded from the ordinary control acquisition crossfade.

package/node_modules/@rdlabo/ionic-theme-utils/package.json

@@ -7,6 +7,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "rdlabo-copy-structured-list": "./scripts/copy-structured-list.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -19,6 +22,7 @@
   "files": [
     "dist",
     "src",
+    "scripts/copy-structured-list.mjs",
     "package.json",
     "README.md",
     "LICENSE"

package/node_modules/@rdlabo/ionic-theme-utils/scripts/copy-structured-list.mjs

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+import { copyFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import process from 'node:process';
+import { URL } from 'node:url';
+
+const destination = process.argv[2];
+
+if (!destination) {
+  throw new Error('Usage: rdlabo-copy-structured-list <destination>');
+}
+
+await copyFile(new URL('../src/styles/structured-list.scss', import.meta.url), resolve(destination));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -28,7 +28,8 @@
   ],
   "scripts": {
     "build": "npm run docgen && npm run build:css && npm run build:ts",
-    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map --pkg-importer=node",
+    "prebuild:css": "rdlabo-copy-structured-list src/styles/utils/structured-list.scss",
+    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
     "build:ts": "tsc",
     "docgen": "docgen --project tsconfig.docgen.json --api NativeUIShellHandle --output-readme docs/native-ui-shell.md",
     "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
@@ -55,7 +56,7 @@
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
   "dependencies": {
-    "@rdlabo/ionic-theme-utils": "git+https://github.com/rdlabo-dev/ionic-theme-utils.git#66eb2fccca10646ebfccdfb3b6c2f3b4c9b00bf6"
+    "@rdlabo/ionic-theme-utils": "git+https://github.com/rdlabo-dev/ionic-theme-utils.git#a3cbfd0c905c603bd90fb7c71b0b76031e8da7b9"
   },
   "bundleDependencies": [
     "@rdlabo/ionic-theme-utils"

package/src/styles/components/ion-list.scss

@@ -1,4 +1,4 @@
-@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
+@use '../utils/structured-list';
 
 ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --ion-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e8e8e8));

package/src/styles/md-ion-list-inset.scss

@@ -1,4 +1,4 @@
-@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
+@use './utils/structured-list';
 
 ion-list.md {
   @include structured-list.support-text;

package/src/styles/utils/dark/ion-list.scss

@@ -1,4 +1,4 @@
-@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
+@use '../structured-list';
 
 @mixin ion-list {
   ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {

package/src/styles/utils/structured-list.scss

@@ -0,0 +1,310 @@
+$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
+
+@function _disabled-suffix($disabled-selector) {
+  @if $disabled-selector {
+    @return ':not(#{$disabled-selector})';
+  }
+
+  @return '';
+}
+
+// Derive neutral list colors from the application's Ionic medium palette.
+@mixin colors($supporting-opacity, $detail-opacity) {
+  ion-item {
+    --detail-icon-color: rgb(var(--ion-color-medium-rgb));
+    --detail-icon-opacity: #{$detail-opacity};
+  }
+
+  &.list-inset {
+    ion-list-header ion-label:not(.ion-color) {
+      color: rgba(var(--ion-color-medium-rgb), $supporting-opacity);
+    }
+
+    ion-list-header ion-note:not(.ion-color),
+    > ion-note:not(.ion-color) {
+      --color: rgba(var(--ion-color-medium-rgb), #{$supporting-opacity});
+    }
+  }
+}
+
+@mixin support-text($disabled-selector: null) {
+  $d: _disabled-suffix($disabled-selector);
+
+  ion-item#{$d} {
+    &:has(ion-input.input-fill-outline),
+    &:has(ion-textarea.textarea-fill-outline),
+    &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))),
+    &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))),
+    &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty))) {
+      --inner-border-width: 0;
+      --inner-padding-bottom: 4px;
+    }
+
+    ion-input#{$d} .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))),
+    ion-textarea#{$d} .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty), .counter:not(:empty)))) {
+      display: none;
+    }
+  }
+}
+
+@mixin layout($outer-note-inset, $group-border-radius, $variant: classic, $disabled-selector: null) {
+  $d: _disabled-suffix($disabled-selector);
+  $is-ios27: $variant == ios27;
+
+  background: transparent;
+
+  ion-list-header#{$d} {
+    display: flex;
+    align-items: center;
+
+    ion-label#{$d} {
+      @if $is-ios27 {
+        font-size: 1rem;
+        line-height: 1.29rem;
+        font-weight: 600;
+      } @else {
+        font-size: 0.9rem;
+      }
+      margin: 8px 4px 4px;
+
+      &:not(.ion-color) {
+        color: var(--ion-color-medium-tint);
+      }
+    }
+
+    ion-button#{$d} {
+      margin-top: 8px;
+    }
+
+    ion-note#{$d} {
+      @if $is-ios27 {
+        font-size: 0.76rem;
+        line-height: 1.06rem;
+        font-weight: 400;
+        margin-block: 8px 4px;
+        margin-inline: 0 16px;
+
+        &:not(.ion-color) {
+          --color: var(--ion-color-medium-tint);
+        }
+      } @else {
+        font-size: 0.9rem;
+        margin-block: 8px 4px;
+        margin-inline: 0 16px;
+      }
+    }
+  }
+
+  @if $is-ios27 {
+    ion-item-group.item-group-header#{$d} {
+      border-radius: $group-border-radius;
+
+      > ion-item#{$d} {
+        --inner-padding-end: 0;
+        --inner-border-width: 0;
+
+        &::part(native) {
+          padding-inline: 0;
+        }
+      }
+
+      & > ion-item#{$d} > ion-label#{$d} {
+        width: 100%;
+        margin: 0;
+        text-align: start;
+        white-space: normal;
+        padding: 16px 20px;
+
+        /**
+         * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+         */
+        ion-header.header-collapse-condense > ion-toolbar {
+          --min-height: 0;
+          visibility: hidden;
+        }
+
+        ion-icon#{$d} {
+          font-size: 2.82rem;
+          border-radius: 20%;
+          padding: 6px;
+          vertical-align: top;
+
+          &:not(.ion-color) {
+            color: #ffffff;
+          }
+        }
+
+        h2 {
+          font-size: 1.29rem;
+          font-weight: 700;
+          line-height: 1.53rem;
+          margin: 20px 0 8px;
+        }
+
+        ion-text#{$d} {
+          display: block;
+          font-size: 1rem;
+          line-height: 1.29rem;
+
+          &:not(.ion-color) {
+            color: var(--ion-color-step-500, var(--ion-text-color-step-500, #808080));
+          }
+        }
+      }
+    }
+  } @else {
+    ion-item-group.item-group-header#{$d} {
+      & > ion-item#{$d} > ion-label#{$d} {
+        width: 100%;
+        text-align: center;
+        padding: 32px 16px 16px;
+        transform: translateX(5px);
+
+        &:dir(rtl) {
+          transform: translateX(-5px);
+        }
+
+        /**
+         * ion-header.header-collapse-condenseを使って、スクロールによってHeaderを変化させるトリック
+         */
+        ion-header.header-collapse-condense > ion-toolbar {
+          --min-height: 0;
+          visibility: hidden;
+        }
+
+        ion-icon#{$d} {
+          font-size: 2.8rem;
+          border-radius: 20%;
+          padding: 6px;
+
+          &:not(.ion-color) {
+            color: #ffffff;
+          }
+        }
+
+        h2 {
+          font-size: 1.2rem;
+          font-weight: bold;
+          margin-top: 8px;
+        }
+
+        ion-text#{$d} {
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+
+  > :is(#{$groups})#{$d} {
+    display: block;
+    border-radius: $group-border-radius;
+    overflow: hidden;
+
+    &:has(> .radio-group-top) {
+      display: flex;
+      flex-direction: column;
+      border-radius: 0;
+      overflow: visible;
+
+      > .radio-group-top {
+        order: 1;
+        font-size: 0.9rem;
+        padding-block-start: 8px;
+      }
+
+      > ion-item#{$d}:first-of-type {
+        --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0;
+      }
+
+      > ion-item#{$d}:last-of-type {
+        --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius};
+      }
+    }
+
+    &:not(:first-of-type) {
+      margin-top: 16px;
+    }
+
+    ion-item#{$d} {
+      &:has(> ion-label:not([slot])):has(> ion-note:not([slot])) {
+        &::part(container) {
+          flex-direction: column;
+          justify-content: center;
+          padding-top: 14px;
+          padding-bottom: 14px;
+          min-height: 64px;
+        }
+        & > ion-label#{$d},
+        & > ion-note#{$d} {
+          width: auto;
+          align-self: flex-start;
+        }
+        & > ion-label#{$d} {
+          margin: 0;
+          font-weight: 500;
+          @if $is-ios27 {
+            font-size: 1rem;
+            line-height: 1.29rem;
+          } @else {
+            font-size: 1.15rem;
+            line-height: 0.9rem;
+          }
+        }
+        & > ion-note#{$d} {
+          @if $is-ios27 {
+            font-size: 0.88rem;
+            line-height: 1.18rem;
+          } @else {
+            font-size: 0.85rem;
+          }
+        }
+      }
+
+      ion-text[slot='end']#{$d} {
+        padding-inline-start: 8px;
+      }
+
+      &.item-disabled {
+        --detail-icon-opacity: 0.1;
+        opacity: 1;
+
+        & > * {
+          opacity: 0.4;
+        }
+      }
+
+      ion-button[slot='end']#{$d} {
+        &.ion-align-self-end {
+          transform: translateY(-7px);
+        }
+        ion-icon[slot='icon-only']#{$d} {
+          font-size: 1.2rem;
+          transform: translateY(4px);
+        }
+      }
+    }
+  }
+
+  & > ion-note#{$d} {
+    margin-block: 8px;
+    margin-inline: calc(var(--ion-safe-area-left, 0) + $outer-note-inset) calc(var(--ion-safe-area-right, 0) + $outer-note-inset);
+
+    &:dir(rtl) {
+      margin-inline: calc(var(--ion-safe-area-right, 0) + $outer-note-inset) calc(var(--ion-safe-area-left, 0) + $outer-note-inset);
+    }
+
+    @if $is-ios27 {
+      font-size: 0.76rem;
+      line-height: 1.06rem;
+      font-weight: 400;
+      display: block;
+      &:not(.ion-color) {
+        --color: var(--ion-color-medium-tint);
+      }
+    } @else {
+      --color: var(--ion-color-medium-tint);
+      font-size: 0.9rem;
+      display: block;
+    }
+  }
+}