@rdlabo/ionic-theme-ios27 0.2.1 → 1.0.1-beta.pr194.sha00da872ba249

package/README.md

@@ -1,13 +1,8 @@
 # Ionic Theme iOS27
 
-A CSS/JS theme library that brings the iOS 27 Liquid Glass appearance and navigation animations to Ionic applications while preserving Ionic components and conventions.
+A theme for Ionic apps that brings iOS 27 Liquid Glass and motion to the Web. Capacitor iOS apps can also opt into an experimental Native UI Shell for supported controls.
 
-> [!IMPORTANT]
-> This `main` branch contains the iOS 27 theme under the package name `@rdlabo/ionic-theme-ios27`. For the iOS 26 theme (`@rdlabo/ionic-theme-ios26`), see the [`ios26` branch](https://github.com/rdlabo-dev/ionic-theme-ios27/tree/ios26).
-
-> All versions before 1.0.0 are release candidates (RC). APIs, CSS variables, classes, styling, and behavior may change without backward compatibility, including in minor and patch releases. A stable compatibility commitment starts with 1.0.0.
-
-[Try the iOS 27 demo](https://ionic-theme-ios27.rdlabo.dev/).
+**[Ionic 9 demo](https://ionic-theme-ios27.rdlabo.dev/) · [Ionic 8 demo](https://ionic8-theme-ios27.rdlabo.dev/) · [Documentation](https://docs.rdlabo.dev/projects/ionic-theme-ios27)**
 
 <!-- rdlabo-docs-pick -->
 
@@ -19,80 +14,89 @@ A CSS/JS theme library that brings the iOS 27 Liquid Glass appearance and naviga
 
 <!-- /rdlabo-docs-pick -->
 
-## Installation
+## Features
+
+### Bring the iOS 27 look to Ionic
+
+Give familiar Ionic screens the iOS 27 visual language: Liquid Glass, styled toolbars and tabs, lists, buttons, search, overlays, page transitions, and coordinated light and dark appearances. See the result in the [Ionic 9 demo](https://ionic-theme-ios27.rdlabo.dev/) and [Ionic 8 demo](https://ionic8-theme-ios27.rdlabo.dev/).
+
+### Project your Ionic UI into Native UI
+
+On Capacitor iOS, the optional, experimental [Native UI Shell](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell) reads supported fixed controls from your existing Ionic markup. It projects their text, resolved `ion-icon` artwork or supported static SVGs, and selection state into UIKit controls with system Liquid Glass. Changes and native actions flow through the original Ionic components, so the Web and native presentations share one UI definition. Page content and routing stay in the WebView; unsupported layouts keep their Web presentation.
 
-Capacitor apps can optionally use an experimental [Native UI Shell](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell): fixed Ionic navigation and action controls rendered by UIKit with system Liquid Glass, while page content, application logic and routing remain in the WebView. The guide covers the idea's origins, the one-time startup call, supported components and fallback behavior.
+**Tab drag on iOS 27:** The same Library screen with Native UI Shell off (Web) and on (UIKit). Both frames were captured while dragging the selected tab; the lower panels enlarge the glass around the tab bar.
 
-Requires `@ionic/core` 8.8.1 or later (Ionic 8 and 9). Install it in an existing Ionic project:
+[![Native UI Shell off and on during the same Library tab drag, with enlarged tab bars](./screenshots/native-ui-shell-drag/comparison.png)](./screenshots/native-ui-shell-drag/comparison.png)
+
+### 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](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
+
+Install both themes in an existing Ionic 8 or 9 app (`@ionic/core` 8.8.1 or later):
 
 ```bash
-npm install @rdlabo/ionic-theme-ios27
+npm install @rdlabo/ionic-theme-ios26 @rdlabo/ionic-theme-ios27
 ```
 
-And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
+In your global Sass stylesheet (for example, `src/styles.scss`), load the styles by browser capability:
 
-```css
-@import '@rdlabo/ionic-theme-ios27/dist/css/default-variables.css';
-@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27.css';
+```scss
+@use 'sass:meta';
+
+@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)) {
+  @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 Material Design mode unaffected by the iOS theme
- * when the same markup is used in both modes.
- * Note: This stylesheet is not included in `@rdlabo/ionic-theme-md3`.
- */
-@import '@rdlabo/ionic-theme-ios27/dist/css/md-remove-ios-class-effect.css';
+If compilation reports `Can't find stylesheet to import.` for a `meta.load-css()` call, make `node_modules` available to Sass. In Angular, add this under the app's build `options` in `angular.json`:
 
-/**
- * If you will use the design of ion-item-group with ion-list on Android as well, import it.
- * More info: https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/using-ion-item-group
- * Note: This stylesheet is included in `@rdlabo/ionic-theme-md3`.
- * @import '@rdlabo/ionic-theme-ios27/dist/css/md-ion-list-inset.css';
- */
-
-/*
- * Support Dark Mode
- * We support Ionic Dark Mode. More information is here: https://ionicframework.com/docs/theming/dark-mode
- * use Always:    @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-always.css'
- * use System:    @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-system.css'
- * use CSS Class: @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-class.css'
- */
+```json
+"stylePreprocessorOptions": {
+  "includePaths": ["node_modules"]
+}
 ```
 
+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.
+
+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.
+
 ### Configure animations
 
-If you installed only the iOS 27 theme, configure its animations as follows.
+Keep the iOS 27 page transition and popover animations for both styled generations. Resolve these options before Ionic initializes. For Angular:
 
 ```ts
-import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue
+import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone'; // Ionic 8
 import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';
 
-// Angular
-provideIonicAngular({
-    ...
-    navAnimation: isPlatform('ios') ? iosTransitionAnimation: undefined,
-    popoverEnter: isPlatform('ios') ? popoverEnterAnimation: undefined,
-    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation: undefined,
-});
-
-// React
-setupIonicReact({
-    ...
-    navAnimation: isPlatform('ios') ? iosTransitionAnimation: undefined,
-    popoverEnter: isPlatform('ios') ? popoverEnterAnimation: undefined,
-    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation: undefined,
-});
-
-// Vue
-createApp(App)
-    .use(IonicVue, {
-        ...
-        navAnimation: isPlatform('ios') ? iosTransitionAnimation: undefined,
-        popoverEnter: isPlatform('ios') ? popoverEnterAnimation: undefined,
-        popoverLeave: isPlatform('ios') ? popoverLeaveAnimation: undefined,
-})
+function loadIOSAnimations() {
+  if (typeof CSS === 'undefined') return {};
+  if (!CSS.supports('overflow-anchor: auto') && !CSS.supports('text-wrap: pretty')) return {};
+
+  return {
+    navAnimation: iosTransitionAnimation,
+    popoverEnter: popoverEnterAnimation,
+    popoverLeave: popoverLeaveAnimation,
+  };
+}
+
+provideIonicAngular(isPlatform('ios') ? loadIOSAnimations() : {});
 ```
 
-The page-transition radius defaults to `0`. Native apps can update it after measuring the web view:
+For Ionic 9 Angular, import `isPlatform` and `provideIonicAngular` from `@ionic/angular`. React and Vue can pass the same options to `setupIonicReact` or `IonicVue` during initialization. In server-rendered apps, run the selection during browser initialization.
+
+The page-transition radius defaults to `0`. Native apps can update it after measuring the WebView:
 
 ```ts
 import { setConfig } from '@rdlabo/ionic-theme-ios27';
@@ -115,79 +119,101 @@ Use this markup to preview the inset grouped list look. For the list structure t
 </ion-list>
 ```
 
-### Optional: use the iOS 27 and MD3 themes together
+## Optional setups
 
-Install the MD3 theme to style both Ionic modes from the same application.
+### Use only the iOS 27 theme
 
-The current releases of both themes require `@ionic/core` 8.8.1 or later.
+Install only `@rdlabo/ionic-theme-ios27` and import its styles unconditionally in your global stylesheet:
+
+```css
+@import '@rdlabo/ionic-theme-ios27/dist/css/default-variables.css';
+@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27.css';
+@import '@rdlabo/ionic-theme-ios27/dist/css/md-remove-ios-class-effect.css';
+@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-class.css';
+```
+
+The last import uses class-based dark mode; choose the `-dark-system` or `-dark-always` variant and matching Ionic palette for another mode. Configure the iOS 27 animations with `isPlatform('ios')` as above, without the browser feature checks.
+
+### Other options
+
+- **Native controls:** Follow the [Native UI Shell setup guide](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell). Stylesheet imports alone do not enable it.
+- **Inset lists on Android:** Load the matching package's `md-ion-list-inset` stylesheet inside each `@supports` branch if needed. It is already included in `@rdlabo/ionic-theme-md3`.
+
+### Use with the MD3 theme
+
+Install all three themes to use iOS 27 on supported Safari versions, fall back to iOS 26 on the preceding Safari generation, and use MD3 whenever Ionic runs in Material Design mode. All three themes require `@ionic/core` 8.8.1 or later:
 
 ```bash
-npm install @rdlabo/ionic-theme-md3
+npm install @rdlabo/ionic-theme-ios26 @rdlabo/ionic-theme-ios27 @rdlabo/ionic-theme-md3
 ```
 
-When your global stylesheet uses Sass, initialize the themes in this order:
+Keep the two iOS themes behind the same browser feature checks used by the default setup, then load MD3 unconditionally. Using `meta.load-css()` throughout also keeps the MD3 styles after the conditional iOS styles in the generated CSS:
 
 ```scss
-@use '@rdlabo/ionic-theme-ios27/src/styles/default-variables.scss' as ios27-vars;
-@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-md3/dist/css/default-variables.css' as md3-vars;
-@use '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';
+@use 'sass:meta';
+
+@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)) {
+  @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');
+}
+
+@include meta.load-css('@rdlabo/ionic-theme-md3/dist/css/default-variables.css');
+@include meta.load-css('@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css');
 ```
 
-The example uses Ionic's class-based dark mode. Your global stylesheet must also load Ionic's matching dark palette, such as `@ionic/angular/css/palettes/dark.class.css` for Angular. When using `dark-system` or `dark-always`, select the same variant for both Ionic's palette and the iOS 27 theme. See Ionic's [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode). The explicit `ios27-vars` and `md3-vars` namespaces prevent the two variable modules from using the same default namespace.
+The iOS styles apply only to Ionic's `ios` mode, while MD3 applies to `md` mode. The `md-remove-ios-class-effect` stylesheet in each iOS branch prevents iOS-only utility classes from leaking into MD mode. MD3 already includes its inset-list styles, so do not load either iOS package's optional `md-ion-list-inset` stylesheet in this configuration.
+
+Load Ionic's matching dark palette too. The example uses class-based dark mode; for system or always-dark mode, select the matching variant for Ionic and both iOS themes.
 
-Configure both transition implementations when both themes are installed:
+Keep the iOS 27 transition for both iOS theme generations and select the MD3 transition in Material Design mode. Extend the animation setup above as follows:
 
 ```ts
-import { isPlatform } from '@ionic/core'; // or @ionic/angular (Ionic 9), @ionic/angular/standalone (Ionic 8), @ionic/react, @ionic/vue
+import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone'; // Ionic 8
 import { iosTransitionAnimation, popoverEnterAnimation, popoverLeaveAnimation } from '@rdlabo/ionic-theme-ios27';
 import { mdTransitionAnimation } from '@rdlabo/ionic-theme-md3';
 
-// Angular
-provideIonicAngular({
-    ...
-    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,
-    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,
-    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,
-});
-
-// React
-setupIonicReact({
-    ...
-    navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,
-    popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,
-    popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,
-});
-
-// Vue
-createApp(App)
-    .use(IonicVue, {
-        ...
-        navAnimation: isPlatform('ios') ? iosTransitionAnimation : mdTransitionAnimation,
-        popoverEnter: isPlatform('ios') ? popoverEnterAnimation : undefined,
-        popoverLeave: isPlatform('ios') ? popoverLeaveAnimation : undefined,
-    });
+function loadAnimations() {
+  if (!isPlatform('ios')) return { navAnimation: mdTransitionAnimation };
+  if (typeof CSS === 'undefined') return {};
+  if (!CSS.supports('overflow-anchor: auto') && !CSS.supports('text-wrap: pretty')) return {};
+
+  return {
+    navAnimation: iosTransitionAnimation,
+    popoverEnter: popoverEnterAnimation,
+    popoverLeave: popoverLeaveAnimation,
+  };
+}
+
+provideIonicAngular(loadAnimations());
 ```
 
+For Ionic 9 Angular, import `isPlatform` and `provideIonicAngular` from `@ionic/angular`. React and Vue can pass the same returned options to `setupIonicReact` or `IonicVue`. If Sass cannot resolve a package in `meta.load-css()`, use the `stylePreprocessorOptions.includePaths` or relative-path setup described in Get started.
+
 ## Documentation
 
 **Full documentation:** [Ionic Theme iOS27](https://docs.rdlabo.dev/projects/ionic-theme-ios27)
 
-- [Adaptive iOS themes](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/ios-adaptive) — conditionally load iOS 26 or iOS 27 styles.
 - [Using ion-item-group](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/using-ion-item-group) — required markup for inset lists.
 - [Special markup and classes](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/special-markup) — opt-in markup and utility classes used by the theme.
 - [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) — native controls around Web content, using the included Capacitor plugin.
-- [Animation](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/experimental-animation) — tab bar and searchable effects.
-- [Migration](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/migration) — stylesheet, class, and CSS variable naming changes.
+- [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/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 documentation:** See the [iOS 26 documentation](https://docs.rdlabo.dev/projects/ionic-theme-ios26) for the previous theme.
+**iOS 26 theme:** See the [iOS 26 documentation](https://docs.rdlabo.dev/projects/ionic-theme-ios26).
 
 ## Development & Testing
 
@@ -208,7 +234,7 @@ npm start
 
 ### Visual Regression Testing
 
-We use Playwright for visual regression testing to ensure consistent styling across all components. The test suite automatically captures screenshots of all routes in both light and dark modes.
+Playwright compares screenshots of demo routes in light and dark modes against stored baselines to catch unintended visual changes. These regression tests do not measure similarity to iOS 27 reference screens.
 
 #### Running Tests
 
@@ -228,23 +254,9 @@ npm run test:e2e:debug
 npm run test:e2e:update
 ```
 
-### Prerelease channels
-
-An open, non-draft pull request can be published to the npm `beta` dist-tag after its `Lint`, `E2E Screenshot Tests Pull Request`, and `Package Candidate` workflows pass. A repository owner or maintainer must add a comment whose entire body is:
-
-```text
-/beta
-```
-
-The request authorizes only the pull request head SHA and base branch that existed when the comment was added. The workflow revalidates the owner or maintainer permission, head SHA, and base branch immediately before publishing. Any new commit or retargeting invalidates the request; the new state must pass CI and receive a fresh owner or maintainer `/beta` comment. Fork pull requests are supported. Pull requests that change a release-gating workflow cannot be beta-published until those workflow changes land on their target branch.
-
-Beta versions use `<base>-beta.pr<PR number>.sha<12-character SHA>`. The pull request receives a comment containing the immutable version and exact `npm install` command.
-
-When a pull request is merged into `main` or `ios26`, it is automatically published to the npm `beta` dist-tag only after `Lint`, `E2E Screenshot Tests`, and `Package Candidate` all succeed for that exact merge commit. Direct pushes do not publish a candidate. Merge candidates use `<base>-beta.pr<PR number>.sha<12-character SHA>` and the merged pull request receives the exact install command.
-
-Candidate code is built in a read-only workflow without npm publishing credentials. The privileged release workflow never checks out or executes pull request code; it revalidates the source workflow and package identity, then publishes only the immutable packed artifact with lifecycle scripts disabled. The install-command comment is a separate best-effort notification and cannot invalidate a successful npm publish.
+### Releases
 
-Only `npm run release` can create a release tag. Stable `ios27-vX.Y.Z` tags (major, minor, or patch releases) publish to npm `latest`; revision/prerelease tags publish to `next`. Neither `beta` nor `next` publishing changes the npm `latest` dist-tag.
+Stable `ios27-vX.Y.Z` tags publish to npm `latest` through the [release workflow](./.github/workflows/release.yml). Maintainers create release tags with `npm run release`. Pull request and merge candidates use the npm `beta` tag; prerelease tags use `next`.
 
 <!-- /rdlabo-docs-omit -->
 

package/dist/css/components/ion-segment.css

@@ -1 +1 @@
-ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled){--border-radius: 16px;--ios27-segment-scale: 1.113;min-height:32px}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled):not(.segment-scrollable){overflow:visible}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled):not(.segment-scrollable).ios27-enable-gesture{contain:layout style}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled){border-radius:var(--border-radius)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand){--border-radius: 24px;min-height:48px;transition:transform 517ms linear(0, 0.1367 6.38%, 0.4112 12.96%, 0.6945 19.34%, 0.9159 25.73%, 1 29.01%, 1.0912 35.4%, 1.1213 41.97%, 1.1089 48.36%, 1.0584 58.03%, 1 70.99%, 0.9858 83.75%, 1)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand):not(.segment-disabled):is(.ios27-segment-pressed,:not(.ios27-enable-gesture):is(.segment-activated,:has(ion-segment-button.ion-activated))){transform:scale(var(--ios27-segment-scale));transition:transform 367ms linear(0, 0.1656 8.99%, 0.4905 18.26%, 0.7836 27.25%, 0.974 36.24%, 1.0625 45.5%, 1.0802 54.5%, 1.0634 63.49%, 1.0368 72.75%, 1.0147 81.74%, 1.0005 90.74%, 1)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand) ion-segment-button{min-height:44px;margin:2px 0;font-size:.94rem}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) ion-segment-button:is(.in-toolbar-color,.in-segment-color)::part(indicator-background){background:var(--indicator-color)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ion-color ion-segment-button.in-segment-color.segment-button-checked::part(native){color:var(--color-checked)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar-color:not(.in-segment-color) ion-segment-button:not(.segment-button-checked)::part(native){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ios27-enable-gesture,.segment-disabled):is(.segment-activated,:has(ion-segment-button:is(:active,.ion-activated))) ion-segment-button.segment-button-checked:not(.segment-button-disabled)::part(indicator-background){scale:1.35 1.4;background:rgba(0,0,0,0);background:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 1);backdrop-filter:blur(0) saturate(104%);box-shadow:inset 0 0 0 .5px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6),inset 0 0 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18),inset 0 1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8),inset 0 -1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.5),0 .5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18);transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-segment-button{z-index:2}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-segment-button::part(indicator){opacity:0}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-lens{box-sizing:border-box;position:absolute;top:0;left:0;border-radius:999px;pointer-events:none;z-index:1}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{backdrop-filter:blur(0) saturate(104%);border:.5px solid;border-top-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-right-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8);border-bottom-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-left-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6)}@supports(color: color-mix(in srgb, white, black)){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{border-top-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%);border-right-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%);border-bottom-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%);border-left-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%)}}@supports(background-clip: border-area) and (color: color-mix(in srgb, white, black)){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%) 0%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 7%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 29%) 25%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 36%) 50%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%) 75%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 93%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%) 100%),linear-gradient(transparent, transparent);background-origin:border-box,padding-box;background-clip:border-area,padding-box}}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:inset 0 2px 3px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06),inset 0 -1px 2px hsla(0,0%,100%,.8),0 0 0 .5px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06),0 2px 5px rgba(0,0,0,.06);position:absolute;inset:0;border-radius:inherit;pointer-events:none}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).segment-expand{width:calc(100% - var(--ion-safe-area-left, 0px) - var(--ion-safe-area-right, 0px) - 24px)}@media(prefers-reduced-motion: reduce){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled){--ios27-segment-scale: 1;transition:none}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand){transform:none;transition:none}}ion-toolbar.ios:has(>ion-segment.ios27-enable-gesture:not(.segment-scrollable,.ios-theme-disabled,.ios26-disabled)){contain:layout style}ion-toolbar.ios:has(>ion-segment.ios27-enable-gesture:not(.segment-scrollable,.ios-theme-disabled,.ios26-disabled))::part(container){contain:layout style;overflow:visible}ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled){--border-width: 0;--border-radius: 999px;--indicator-box-shadow: none;--padding-start: 8px;--padding-end: 8px;min-width:65px;min-height:28px;margin:2px 0;font-size:.81rem;font-weight:500;line-height:normal}ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled).segment-button-disabled{opacity:.2}ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled)::part(indicator-background){transition:var(--indicator-transition),scale 250ms ease-out,background 200ms ease}@media(prefers-reduced-motion: reduce){ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled)::part(indicator-background){scale:1 !important;transition:none}}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled)){--background: rgba(var(--ion-color-medium-rgb, 99, 100, 105), 0.11)}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) ion-segment-button){--indicator-color: var(--ion-background-color, #fff)}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ion-color ion-segment-button.in-segment-color){--indicator-color: var(--ion-color-base);--color-checked: var(--ion-color-contrast)}
+ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled){--border-radius: 16px;--ios27-segment-scale: 1.113;min-height:32px}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled):not(.segment-scrollable){overflow:visible}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled):not(.segment-scrollable).ios27-enable-gesture{contain:layout style}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled){border-radius:var(--border-radius)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).segment-style-glass{--background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.53);box-sizing:border-box;position:relative;z-index:0;background:var(--background);backdrop-filter:blur(6px) saturate(180%) brightness(1.05);box-shadow:inset 0 1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.25),inset 0 -1px 2px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.3),0 -0.5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 .5px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.65),0 0 0 .5px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.22),0 .5px 1px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);border:.5px solid rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)));background-image:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%);background-origin:padding-box;background-clip:border-box;border-inline-color:rgba(0,0,0,0)}@supports(background-clip: border-area){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).segment-style-glass{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), transparent 50%, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)))),linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),linear-gradient(transparent, transparent);background-origin:border-box,padding-box,border-box;background-clip:border-area,padding-box,border-box}}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).segment-style-glass ion-segment-button{--indicator-color: rgba( var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.095 )}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand){--border-radius: 24px;min-height:48px;transition:transform 517ms linear(0, 0.1367 6.38%, 0.4112 12.96%, 0.6945 19.34%, 0.9159 25.73%, 1 29.01%, 1.0912 35.4%, 1.1213 41.97%, 1.1089 48.36%, 1.0584 58.03%, 1 70.99%, 0.9858 83.75%, 1)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand):not(.segment-disabled):is(.ios27-segment-pressed,:not(.ios27-enable-gesture):is(.segment-activated,:has(ion-segment-button.ion-activated))){transform:scale(var(--ios27-segment-scale));transition:transform 367ms linear(0, 0.1656 8.99%, 0.4905 18.26%, 0.7836 27.25%, 0.974 36.24%, 1.0625 45.5%, 1.0802 54.5%, 1.0634 63.49%, 1.0368 72.75%, 1.0147 81.74%, 1.0005 90.74%, 1)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand) ion-segment-button{min-height:44px;margin:2px 0;font-size:.94rem}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) ion-segment-button:is(.in-toolbar-color,.in-segment-color)::part(indicator-background){background:var(--indicator-color)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ion-color ion-segment-button.in-segment-color.segment-button-checked::part(native){color:var(--color-checked)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar-color:not(.in-segment-color) ion-segment-button:not(.segment-button-checked)::part(native){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 1)}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled):not(.ios27-enable-gesture,.segment-disabled):is(.segment-activated,:has(ion-segment-button:is(:active,.ion-activated))) ion-segment-button.segment-button-checked:not(.segment-button-disabled)::part(indicator-background){scale:1.35 1.4;background:rgba(0,0,0,0);background:linear-gradient(180deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 4%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.01) 8%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.024) 16%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.027) 22%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.026) 28%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.018) 36%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.011) 44%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.009) 50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 58%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.008) 80%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.006) 88%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0) 94%),rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 1);backdrop-filter:blur(0) saturate(104%);box-shadow:inset 0 0 0 .5px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6),inset 0 0 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18),inset 0 1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8),inset 0 -1px 2px 0 rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.5),0 .5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.18);transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-segment-button{z-index:2}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ios27-enable-gesture.ios27-animated ion-segment-button::part(indicator){opacity:0}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-lens{box-sizing:border-box;position:absolute;top:0;left:0;border-radius:999px;pointer-events:none;z-index:1}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{backdrop-filter:blur(0) saturate(104%);border:.5px solid;border-top-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-right-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8);border-bottom-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);border-left-color:rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6)}@supports(color: color-mix(in srgb, white, black)){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{border-top-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%);border-right-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 32%);border-bottom-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%);border-left-color:color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%)}}@supports(background-clip: border-area) and (color: color-mix(in srgb, white, black)){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{border-color:rgba(0,0,0,0);background-image:linear-gradient(180deg, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 12%) 0%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 7%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 29%) 25%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 36%) 50%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 28%) 75%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 18%) 93%, color-mix(in srgb, rgb(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb))), rgb(var(--ion-text-color-rgb, 0, 0, 0)) 16%) 100%),linear-gradient(transparent, transparent);background-origin:border-box,padding-box;background-clip:border-area,padding-box}}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) .ios27-segment-edge{transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:inset 0 2px 3px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06),inset 0 -1px 2px hsla(0,0%,100%,.8),0 0 0 .5px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06),0 2px 5px rgba(0,0,0,.06);position:absolute;inset:0;border-radius:inherit;pointer-events:none}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).segment-expand{width:calc(100% - var(--ion-safe-area-left, 0px) - var(--ion-safe-area-right, 0px) - 24px)}@media(prefers-reduced-motion: reduce){ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled){--ios27-segment-scale: 1;transition:none}ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).in-toolbar:not(.segment-expand){transform:none;transition:none}}ion-toolbar.ios:has(>ion-segment.ios27-enable-gesture:not(.segment-scrollable,.ios-theme-disabled,.ios26-disabled)){contain:layout style}ion-toolbar.ios:has(>ion-segment.ios27-enable-gesture:not(.segment-scrollable,.ios-theme-disabled,.ios26-disabled))::part(container){contain:layout style;overflow:visible}ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled){--border-width: 0;--border-radius: 999px;--indicator-box-shadow: none;--padding-start: 8px;--padding-end: 8px;min-width:65px;min-height:28px;margin:2px 0;font-size:.81rem;font-weight:500;line-height:normal}ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled).segment-button-disabled{opacity:.2}ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled)::part(indicator-background){transition:var(--indicator-transition),scale 250ms ease-out,background 200ms ease}@media(prefers-reduced-motion: reduce){ion-segment-button.ios:not(.ios-theme-disabled,.ios26-disabled)::part(indicator-background){scale:1 !important;transition:none}}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled)){--background: rgba(var(--ion-color-medium-rgb, 99, 100, 105), 0.11)}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled) ion-segment-button){--indicator-color: var(--ion-background-color, #fff)}:where(ion-segment.ios:not(.ios-theme-disabled,.ios26-disabled).ion-color ion-segment-button.in-segment-color){--indicator-color: var(--ion-color-base);--color-checked: var(--ion-color-contrast)}