@rdlabo/ionic-theme-ios27 2.0.0-beta.pr304.sha56daf151ad80 → 2.0.0-beta.pr305.shad485697732f3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -42,7 +42,17 @@ If compilation reports `Can't find stylesheet to import.` for a `meta.load-css()
42
42
 
43
43
  Alternatively, use a relative path from the Sass file containing `meta.load-css()` to the installed package, such as `../node_modules/@rdlabo/ionic-theme-ios27/src/styles/default-variables` from `src/styles.scss`. Adjust the `../` prefix for your file's location, and apply the same change to each theme import.
44
44
 
45
- These checks select styles by browser features, not by iOS version. Browsers without either feature retain Ionic's default iOS appearance. The example uses class-based dark mode: also load [Ionic's matching dark palette](https://ionicframework.com/docs/theming/dark-mode). For system or always-dark mode, replace both `-dark-class` imports with the matching variant. The `md-remove-ios-class-effect` styles prevent iOS-specific classes from affecting Material Design mode.
45
+ ### Which styles are selected?
46
+
47
+ The checks select browser capabilities, not iOS versions:
48
+
49
+ | Browser capability in Ionic `ios` mode | Result |
50
+ | ---------------------------------------------------- | ------------------------------- |
51
+ | `overflow-anchor: auto` | iOS 27 theme. |
52
+ | `text-wrap: pretty`, without `overflow-anchor: auto` | iOS 26 theme. |
53
+ | Neither feature | Ionic's default iOS appearance. |
54
+
55
+ The example uses class-based dark mode: also load [Ionic's matching dark palette](https://ionicframework.com/docs/theming/dark-mode). For system or always-dark mode, replace both `-dark-class` imports with the matching variant; see the [dark-mode pairs](setup.md#choose-one-dark-mode-pair). The `md-remove-ios-class-effect` styles prevent iOS-specific classes from affecting Material Design mode.
46
56
 
47
57
  ## 3. Configure animations
48
58
 
package/docs/animation.md CHANGED
@@ -61,9 +61,25 @@ const effect = supportSeachbarCancelButtonIcon(searchbar);
61
61
  // effect.destroy();
62
62
  ```
63
63
 
64
- Register after the Ionic element has initialized (for example, Angular's `ngAfterViewInit`). The helper preserves Ionic's button and event handlers, and `destroy()` restores its text content. It does not apply to MD mode, `searchbar-classic`, `ios-theme-disabled`, or `ios26-disabled` searchbars. The CSS animation follows `animated` and respects `prefers-reduced-motion`. Standard searchbar CSS variables such as `--background`, `--box-shadow`, `--border-radius`, and `--cancel-button-color` remain available.
64
+ ### Registration and exclusions
65
65
 
66
- The clear button shares the 44px glass design and appears beside the input. It uses Ionic's `clearIcon`, `showClearButton`, and `--clear-button-color`; clearing retains input focus, while cancel ends the search. Clear and cancel can be displayed together. Set `clearIcon` and `cancelButtonIcon` to the same icon to give them the same appearance.
66
+ Register after the Ionic element has initialized (for example, Angular's `ngAfterViewInit`).
67
+
68
+ | Condition | Behavior |
69
+ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
70
+ | Supported iOS-mode searchbar | Preserves Ionic's button and event handlers; `destroy()` restores text content. |
71
+ | MD mode, `searchbar-classic`, `ios-theme-disabled` or `ios26-disabled` | Helper does not apply. |
72
+ | `animated` / `prefers-reduced-motion` | Respected by the CSS animation. |
73
+ | CSS customization | `--background`, `--box-shadow`, `--border-radius` and `--cancel-button-color` remain available. |
74
+
75
+ ### Clear and cancel buttons
76
+
77
+ | Button | Ionic appearance settings | Action |
78
+ | ------ | ------------------------------------------------------ | ----------------------------------- |
79
+ | Clear | `clearIcon`, `showClearButton`, `--clear-button-color` | Clears while retaining input focus. |
80
+ | Cancel | `cancelButtonIcon`, `--cancel-button-color` | Ends the search. |
81
+
82
+ Both can appear together beside the input. Set `clearIcon` and `cancelButtonIcon` to the same icon for matching appearance.
67
83
 
68
84
  Both external glass buttons use a 44px resting size and expand while pressed. Reduced motion disables scaling. The clear button appears outside the text field; Ionic supplies the icons.
69
85
 
package/docs/eslint.md CHANGED
@@ -2,6 +2,8 @@
2
2
  title: Keep lists consistent with ESLint
3
3
  ---
4
4
 
5
+ # Keep lists consistent with ESLint
6
+
5
7
  Catch missing list groups before they reach the screen. In Ionic Angular apps, `@rdlabo/eslint-plugin-rules` checks the markup used by iOS 27.
6
8
 
7
9
  ## Enable the list check
package/docs/features.md CHANGED
@@ -11,9 +11,13 @@ Customize the theme with CSS variables and Sass mixins, or adopt it one componen
11
11
  To customize the library's default styles to match your design, several CSS variables are provided. See this file for details:
12
12
  [Default variables](../src/styles/default-variables.scss)
13
13
 
14
- For menus, `--ios-theme-menu-background-rgb` sets the surface RGB channels (light: `225, 230, 240`; dark: `26, 31, 34`). `--ios-theme-menu-background-opacity` controls opacity and defaults to `0.96`. Both are public customization variables and can be set on `ion-menu`.
14
+ | Variable | Default | Purpose |
15
+ | ------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------- |
16
+ | `--ios-theme-menu-background-rgb` | Light: `225, 230, 240`; dark: `26, 31, 34` | Menu surface RGB channels; set on `ion-menu`. |
17
+ | `--ios-theme-menu-background-opacity` | `0.96` | Menu surface opacity; set on `ion-menu`. |
18
+ | `--ios-theme-button-press-duration` | `380ms` | Duration of the button's `:active` scaling with slight overshoot. |
15
19
 
16
- Button press scaling follows `:active` with a slight overshoot. Set `--ios-theme-button-press-duration` (default: `380ms`) to customize its duration instead of the shared activated-transition duration variables.
20
+ Use `--ios-theme-button-press-duration` instead of the shared activated-transition duration variables to customize button press scaling.
17
21
 
18
22
  ## Liquid Glass mixin
19
23
 
@@ -20,7 +20,7 @@ Read [how projection works](../../capacitor-native-ui/README.md#how-projection-w
20
20
 
21
21
  The rest of this page is for **Ionic apps**. Both Ionic `ios` and `md` modes are supported. Tabs and supported toolbar actions move to the side; content and horizontal controls keep their existing appearance.
22
22
 
23
- Available as a **preview** feature. APIs and supported behavior may change.
23
+ iPhone Duo support and Vertical Bars are stable starting with version 2.0.0.
24
24
 
25
25
  ## Try it in your existing Ionic app
26
26
 
@@ -1,14 +1,14 @@
1
1
  ---
2
- title: iPhone Duo support (preview)
2
+ title: iPhone Duo support
3
3
  ---
4
4
 
5
- # iPhone Duo support (preview)
5
+ # iPhone Duo support
6
6
 
7
7
  Adapt your Ionic app to iPhone Duo: place navigation and actions in its vertical system rail, and adjust your split pane as the device opens and closes. Existing Ionic markup remains the source of labels, icons, routing, and click handlers.
8
8
 
9
9
  **New here?** Start with [iPhone Duo with your existing theme](iphone-duo-with-original-theme.md) to preview the side layout in Chrome. This page explains device events, placement and split panes. [Vertical Bars](../../capacitor-native-ui/docs/vertical-bars.md) documents control projection and the runtime API.
10
10
 
11
- Available as a **preview** feature alongside [Native UI](../../capacitor-native-ui/docs/native-ui.md). APIs and supported behavior may change before stable status. Stable status is planned after the official release of Xcode 27.1. The real system rail and hinge reporting require iOS 27.1 or later and an app built with Xcode 27.1 or newer.
11
+ iPhone Duo support is stable starting with version 2.0.0. The real system rail and hinge reporting require iOS 27.1 or later and an app built with Xcode 27.1 or newer.
12
12
 
13
13
  Use the theme layout and native plugin independently for that hardware. Neither requires the full iOS 27 appearance:
14
14
 
@@ -17,6 +17,14 @@ Use the theme layout and native plugin independently for that hardware. Neither
17
17
 
18
18
  Device state belongs to [`@erkamyaman/capacitor-foldable`](https://github.com/erkamyaman/capacitor-foldable). The **application** subscribes to its events and chooses its layout. The theme reserves space and adapts the split pane; Native UI projects eligible controls. The theme does not monitor hinge state or bar placement.
19
19
 
20
+ | Owner | Responsibility |
21
+ | ------------------- | ----------------------------------------------------------------------------------------------------------- |
22
+ | Foldable | Report bar placement and hinge posture, initially and when they change. |
23
+ | Application / theme | Subscribe to device events and apply Web layout through `setVerticalBarsLayout` or `applyFoldStateClasses`. |
24
+ | Native UI | Project eligible controls and determine native rail availability independently. |
25
+
26
+ For the native package's integration, including application-owned CSS and plain HTML, see [Use with Capacitor Foldable](../../capacitor-native-ui/docs/vertical-bars.md#use-with-capacitor-foldable).
27
+
20
28
  ## Choose what to adopt
21
29
 
22
30
  To keep your existing theme and add only the standalone support, follow [iPhone Duo with your existing theme](iphone-duo-with-original-theme.md). This page covers the shared device-layout rules.
@@ -66,9 +74,31 @@ await listener.remove();
66
74
 
67
75
  Subscribe to changes, then read the current state. The same helper handles initial values and events.
68
76
 
69
- `applyFoldStateClasses` keeps one of `ios-theme-fold-flat`, `ios-theme-fold-half-opened`, and `ios-theme-fold-closed` on the supplied root, preserving unrelated classes. It also sets `ios-theme-fold-expanded` for a half-opened state or a flat state with hinge geometry. A flat state without geometry (including the Web fallback) and a closed state clear that class. The helper does not subscribe to the plugin or change Ionic's split-pane `when` property.
77
+ ### Posture classes
78
+
79
+ `applyFoldStateClasses` updates the supplied root while preserving unrelated classes:
80
+
81
+ | Class | Applied when |
82
+ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
83
+ | `ios-theme-fold-flat` | Flat posture. |
84
+ | `ios-theme-fold-half-opened` | Half-opened posture. |
85
+ | `ios-theme-fold-closed` | Closed posture. |
86
+ | `ios-theme-fold-expanded` | Half-opened, or flat with hinge geometry. Cleared for flat without geometry (including Web fallback) and closed posture. |
87
+
88
+ Only one of the first three classes is retained. The helper does not subscribe to the plugin or change Ionic's split-pane `when` property.
89
+
90
+ ### Placement values
91
+
92
+ For rail placement, import `setVerticalBarsLayout` from the theme and pass the reported logical `edge` with the measured `inset`:
93
+
94
+ | Value | Web layout effect |
95
+ | ------------------ | ---------------------------------------------------- |
96
+ | `edge: 'leading'` | Physical left in LTR; physical right in RTL. |
97
+ | `edge: 'trailing'` | Physical right in LTR; physical left in RTL. |
98
+ | `edge: null` | Restores ordinary layout. |
99
+ | Measured `inset` | Reserves that width; zero clears the explicit width. |
70
100
 
71
- For rail placement, use `setVerticalBarsLayout` as shown below. Import this Web layout helper from the theme and pass the reported logical `edge` with the measured `inset`. It does not report native availability or activate projection. Leading is the physical left in LTR and the physical right in RTL. A null edge restores the ordinary layout; an inset of zero clears the explicit width. No start/stop monitoring calls are needed.
101
+ The helper does not report native availability or activate projection. No start/stop monitoring calls are needed. See [Project controls into the rail](#project-controls-into-the-rail) for the subscription.
72
102
 
73
103
  WebView corner radius remains a rendering concern: `configureNativeTransition()` uses the shell's `getWebViewMetrics()` API, independently of `Foldable`.
74
104
 
package/docs/migration.md CHANGED
@@ -13,7 +13,7 @@ Theme styles and ordinary theme API imports remain supported. If you previously
13
13
  | `@rdlabo/ionic-theme-ios27/native` | `@rdlabo/capacitor-native-ui` |
14
14
  | `@rdlabo/ionic-theme-ios27/vertical-bars` | `@rdlabo/capacitor-native-ui/vertical-bars` |
15
15
 
16
- Add the native package as a direct application dependency, update imports, rebuild Web assets, and run `npx cap sync ios`. Follow the [Native UI migration guide](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/main/packages/capacitor-native-ui/docs/migration.md) for the intermediate package rename and old Swift package references. Theme-only apps do not need native startup or plugin setup.
16
+ Add the native package as a direct application dependency, update imports, rebuild Web assets, and run `npx cap sync ios`. Follow the [Native UI migration guide](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/main/packages/capacitor-native-ui/docs/migration.md) for 1.2.1 startup settings and native project changes. Theme-only apps do not need native startup or plugin setup.
17
17
 
18
18
  ## From the iOS 26 theme
19
19
 
@@ -121,9 +121,12 @@ Change the animation import from `@rdlabo/ionic-theme-ios26` to `@rdlabo/ionic-t
121
121
 
122
122
  For the iOS 27 branch or an iOS 27-only app, use `@rdlabo/ionic-theme-ios27`. Its stylesheets are `ionic-theme-ios27.scss` or `ionic-theme-ios27.css`, including the `-dark-always`, `-dark-system`, and `-dark-class` variants. Keep the iOS 26 stylesheet names in the iOS 26 branch of an adaptive setup.
123
123
 
124
- Use the version-independent `--ios-theme-*` CSS variables. The corresponding `--ios26-*` variables remain supported as deprecated fallbacks. When both are set, the new name takes precedence. For example, use `--ios-theme-content-box-shadow-rgb` instead of `--ios26-content-box-shadow-rgb`.
124
+ | Customization | Current name | Legacy behavior |
125
+ | ------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
126
+ | CSS variables | `--ios-theme-*`, for example `--ios-theme-content-box-shadow-rgb` | Corresponding `--ios26-*` names remain deprecated fallbacks. Current names win when both are set. |
127
+ | Theme opt-out class | `ios-theme-disabled` | `ios26-disabled` remains a deprecated alias; migrate existing markup when convenient. |
125
128
 
126
- For opting out of the theme, use the version-independent `ios-theme-disabled` class. The `ios26-disabled` class remains supported as a deprecated alias; migrate existing markup when convenient.
129
+ Use the version-independent names for new customizations.
127
130
 
128
131
  See [Special markup and classes](special-markup.md) and [Default variables](../src/styles/default-variables.scss) for the current names.
129
132
 
package/docs/setup.md CHANGED
@@ -24,7 +24,17 @@ Add these imports to your global stylesheet after Ionic's base styles. Replace a
24
24
  @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-system.css';
25
25
  ```
26
26
 
27
- For a manual dark-mode toggle, use Ionic's `dark.class.css` and the theme's `ionic-theme-ios27-dark-class.css`, then toggle `ion-palette-dark` on the document root. For always-dark styling, use `dark.always.css` and `ionic-theme-ios27-dark-always.css`. Choose one matching pair.
27
+ ### Choose one dark-mode pair
28
+
29
+ Use one matching Ionic palette and theme variant. Paths below are relative to `@ionic/core/css/palettes/` and `@rdlabo/ionic-theme-ios27/dist/css/` respectively.
30
+
31
+ | Mode | Ionic palette | Theme stylesheet | Activation |
32
+ | ---------------------- | ----------------- | ----------------------------------- | ----------------------------------------------- |
33
+ | System (example above) | `dark.system.css` | `ionic-theme-ios27-dark-system.css` | System appearance. |
34
+ | Manual | `dark.class.css` | `ionic-theme-ios27-dark-class.css` | Toggle `ion-palette-dark` on the document root. |
35
+ | Always dark | `dark.always.css` | `ionic-theme-ios27-dark-always.css` | Always active. |
36
+
37
+ If you also enable Native UI, these styles provide its light/dark appearance marker. Keep the Ionic palette and theme variant paired so Web and native controls agree. See [native appearance inheritance](../../capacitor-native-ui/docs/appearance.md) for the resolution order and shared rail behavior.
28
38
 
29
39
  ## 3. Configure Ionic animations
30
40
 
@@ -28,15 +28,38 @@ buttons: [
28
28
  ];
29
29
  ```
30
30
 
31
- Buttons with no role or `default` keep the normal text color. `cancel` retains Ionic's cancellation behavior, `selected` remains a selection state, and `destructive` uses `--ios-theme-destructive-color`. An existing `confirm` role is not treated as preferred. Use `preferred` for the recommended action, not simply any action that confirms a choice.
31
+ Choose the role by action semantics:
32
+
33
+ | Role | Appearance and behavior |
34
+ | -------------------- | ------------------------------------------------------------------------------------------------- |
35
+ | `preferred` | Filled primary action; dismissal reports `preferred`. Does not automatically select or invoke it. |
36
+ | No role or `default` | Normal text color. |
37
+ | `cancel` | Retains Ionic's cancellation behavior. |
38
+ | `selected` | Retains selection state. |
39
+ | `destructive` | Uses `--ios-theme-destructive-color`. |
40
+ | `confirm` | Not treated as preferred. Use `preferred` for a recommended action, not simply any confirmation. |
32
41
 
33
42
  ## Floating iPad sheets
34
43
 
35
- Set `expandToScroll: false` on a sheet modal to use floating lower corners and a 20px bottom gap on iPad. Ionic then sizes the visible page at each breakpoint, so the theme can style it with CSS alone. Content scrolls within the current breakpoint; dragging the handle still resizes the sheet. With the default `expandToScroll: true`, the sheet keeps Ionic's bottom-attached layout and scroll-to-expand behavior.
44
+ Choose the sheet's scrolling behavior with `expandToScroll`:
45
+
46
+ | Setting | iPad appearance | Scrolling and resizing |
47
+ | ---------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
48
+ | `false` | Floating lower corners and a 20px bottom gap. | Content scrolls within the current breakpoint; dragging the handle resizes the sheet. Ionic sizes the visible page at each breakpoint so CSS can style it. |
49
+ | `true` (default) | Ionic's bottom-attached layout. | Scroll-to-expand behavior. |
36
50
 
37
51
  ## Tab bar position
38
52
 
39
- Add one of `tab-bar-position-start`, `tab-bar-position-center`, or `tab-bar-position-end` to an iOS `ion-tab-bar` to position the whole bar within its safe area. These classes work with both `slot="top"` and `slot="bottom"` and preserve the bar's width and press animation. Start and end follow the text direction (reversed in RTL). Without a class, the existing placement is unchanged.
53
+ Choose a class on an iOS `ion-tab-bar` to position the whole bar within its safe area:
54
+
55
+ | Class | Placement |
56
+ | ------------------------- | ------------------------------- |
57
+ | `tab-bar-position-start` | Start of the reading direction. |
58
+ | `tab-bar-position-center` | Center. |
59
+ | `tab-bar-position-end` | End of the reading direction. |
60
+ | None | Existing placement unchanged. |
61
+
62
+ All three classes support `slot="top"` and `slot="bottom"`, preserve width and press animation, and resolve start/end in RTL.
40
63
 
41
64
  ```html
42
65
  <ion-tab-bar slot="bottom" class="tab-bar-position-center">
@@ -47,9 +70,9 @@ Add one of `tab-bar-position-start`, `tab-bar-position-center`, or `tab-bar-posi
47
70
 
48
71
  These classes do not reposition a separate `ion-fab`; leave room for it when choosing the bar's position.
49
72
 
50
- ## Support iPhone Duo (preview)
73
+ ## Support iPhone Duo
51
74
 
52
- iPhone Duo support, including standalone vertical bars, is available as a **preview** alongside Native UI. Its APIs and supported behavior may change.
75
+ iPhone Duo support, including standalone Vertical Bars, is stable starting with version 2.0.0.
53
76
 
54
77
  iPhone Duo support — the vertical system rail, hinge posture, and the posture-driven split-pane layout — is independent of the iOS 27 theme and the full Native UI. See [iPhone Duo support](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/main/packages/theme-ios27/docs/iphone-duo.md) for the complete setup, including device-layout monitoring without a projection runtime.
55
78
 
@@ -115,7 +138,15 @@ For colored segments, use Ionic's `color` property (for example, `color="primary
115
138
 
116
139
  Add `.segment-expand` when segment buttons should divide the available width evenly. The class also changes the Liquid Glass effect sizing when `registerSegmentEffect` is used.
117
140
 
118
- Segments use a 32px minimum height in content and a 48px minimum height inside `ion-toolbar`. `.segment-expand` keeps the compact 32px layout in a toolbar. Compact segments retain Ionic's flat background and indicator colors; only the regular toolbar variant has a glass container and scales its outer container while pressed. Content and expanded segments keep their outer bounds. The optional moving glass lens is independent of the container's background.
141
+ ### Segment size and press behavior
142
+
143
+ | Placement | Minimum height | Container behavior |
144
+ | ----------------------------------------- | -------------- | ---------------------------------------------------------------- |
145
+ | In content | 32px | Compact, flat background and indicator; outer bounds stay fixed. |
146
+ | Inside `ion-toolbar` | 48px | Glass container; outer container scales while pressed. |
147
+ | `.segment-expand`, including in a toolbar | 32px | Compact, flat background and indicator; outer bounds stay fixed. |
148
+
149
+ The optional moving glass lens is independent of the container's background.
119
150
 
120
151
  ```html preview
121
152
  <ion-segment class="segment-expand" value="new">
@@ -22,11 +22,31 @@ Add `.ios-theme-vertical-bars` to `ion-app` to reserve the rail region on the ph
22
22
 
23
23
  The classes are physical — `-left` always means the physical left edge — because CSS and the native renderer work in physical coordinates. `setVerticalBarsLayout` applies the logical `verticalBarEdge` reported by the device plugin and resolves it through the document's direction, so an RTL app does not need its own conversion.
24
24
 
25
- For Chrome development, no native plugin is needed — the class alone reserves `80px` to simulate iPhone Duo. When `setVerticalBarsLayout` receives `{ edge, inset }`, the inset replaces the fallback width, even when it is less than `80px`. Override `--ios-theme-vertical-bars-safe-area-left` or `--ios-theme-vertical-bars-safe-area-right` when simulating a different layout.
25
+ ### Rail width
26
26
 
27
- This keeps routers and component backgrounds full-viewport. `ion-content` moves its scroll foreground, `ion-toolbar` moves its container foreground, and `ion-fab` adjusts only when placed beside the system UI. The corresponding Ionic safe-area variable is reset inside those foreground components so descendants do not add the inset again.
27
+ | Source | Reserved width |
28
+ | ---------------------------------------- | --------------------------------------------------------------------------------------------------- |
29
+ | Classes alone, including Chrome previews | `80px`; no native plugin required. |
30
+ | `setVerticalBarsLayout({ edge, inset })` | The supplied inset, even below `80px`. |
31
+ | Custom CSS preview | Override `--ios-theme-vertical-bars-safe-area-left` or `--ios-theme-vertical-bars-safe-area-right`. |
28
32
 
29
- `ion-modal` applies the same foreground correction when its visible dialog spans the viewport width. With the Vertical Control Area runtime enabled, the topmost full-width modal also projects eligible toolbar buttons into its own rail; centered dialogs keep their toolbar buttons and receive no page-rail inset. This includes full-width sheet modals: their rail follows the visible sheet bounds as the breakpoint changes. Eligibility follows the visible dialog width, not the hinge posture or modal type. `ion-menu` and `ion-popover` are handled as separate surfaces: their internal foreground components do not receive the main-page conversion and retain Ionic's standard safe-area handling. A menu presented beside the system UI keeps Ionic's full-viewport animation host and offsets only its visible container by the corresponding inset; a menu from the opposite side is unchanged. Left and right remain physical coordinates in RTL, while Ionic's `side="start"` and `side="end"` values remain logical.
33
+ ### Content and overlay layout
34
+
35
+ | Surface | Layout with the rail stylesheet |
36
+ | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
37
+ | Routers and component backgrounds | Remain full-viewport. |
38
+ | `ion-content` | Insets its scroll foreground. |
39
+ | `ion-toolbar` | Insets its container foreground. |
40
+ | `ion-fab` | Adjusts only when placed beside the system UI. |
41
+ | Full-width `ion-modal`, including sheets | Applies the foreground inset. With the runtime enabled, the topmost modal projects eligible toolbar controls into its own rail; sheet rails follow visible bounds as the breakpoint changes. |
42
+ | Centered modal | Keeps toolbar buttons and receives no page-rail inset. |
43
+ | `ion-menu` / `ion-popover` | Internal foreground components retain Ionic's standard safe-area handling, without the main-page conversion. |
44
+ | Menu beside the system UI | Keeps its full-viewport animation host; offsets only the visible container by the inset. |
45
+ | Menu on the opposite side | Unchanged. |
46
+
47
+ The corresponding Ionic safe-area variable is reset inside inset foreground components so descendants do not add the inset again.
48
+
49
+ Modal eligibility follows the visible dialog width, not hinge posture or modal type. Left and right remain physical coordinates in RTL; Ionic's `side="start"` and `side="end"` remain logical.
30
50
 
31
51
  The mode is component-mode independent: an app can keep Ionic `mode: 'md'` on iOS and still enable Vertical Bars. No component needs `mode="ios"`.
32
52
 
@@ -40,7 +60,7 @@ setVerticalBarsLayout({ edge: 'trailing', inset: 80 });
40
60
  setVerticalBarsLayout({ edge: null }); // restore ordinary Web layout
41
61
  ```
42
62
 
43
- The helper operates on Web CSS only and work without Capacitor or Native UI startup. The application supplies device state and owns subscriptions. Starting, disabling or destroying Native UI does not change these layout classes or the reserved inset. Unsupported native rails retain the chosen Web rail; choose `edge: null` explicitly if the application wants a horizontal layout instead.
63
+ The helper operates on Web CSS only and works without Capacitor or Native UI startup. The application supplies device state and owns subscriptions. Starting, disabling or destroying Native UI does not change these layout classes or the reserved inset. Unsupported native rails retain the chosen Web rail; choose `edge: null` explicitly if the application wants a horizontal layout instead.
44
64
 
45
65
  ## Migration
46
66
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rdlabo/ionic-theme-ios27",
3
3
  "private": false,
4
- "version": "2.0.0-beta.pr304.sha56daf151ad80",
4
+ "version": "2.0.0-beta.pr305.shad485697732f3",
5
5
  "description": "iOS27 Theme for Ionic Framework",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -46,7 +46,7 @@
46
46
  },
47
47
  "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
48
48
  "dependencies": {
49
- "@rdlabo/capacitor-native-ui": "2.0.0-beta.pr304.sha56daf151ad80",
49
+ "@rdlabo/capacitor-native-ui": "2.0.0-beta.pr305.shad485697732f3",
50
50
  "@rdlabo/ionic-theme-utils": "0.1.4",
51
51
  "@stencil/core": "^4.43.5",
52
52
  "ionicons": "^8.1.0"