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

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/docs/special-markup.md

@@ -92,6 +92,15 @@ This is an introductory group. Place regular list items in a separate `ion-item-
 
 ## Full-width segments
 
+Add `.segment-style-glass` to give a segment the same glass surface and selected indicator treatment as the tab bar. The class preserves the segment's existing dimensions and text colors, supports scrollable segments, and respects Ionic's public `--background` property.
+
+```html
+<ion-segment class="segment-style-glass" value="available">
+  <ion-segment-button value="available">Available</ion-segment-button>
+  <ion-segment-button value="away">Away</ion-segment-button>
+</ion-segment>
+```
+
 For colored segments, use Ionic's `color` property (for example, `color="primary"` or `color="secondary"`). The selected surface uses the palette's base color and the selected label uses its contrast color. The optional moving glass inherits the same surface color; custom Ionic palettes work without additional registration.
 
 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.

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,17 @@
+#!/usr/bin/env node
+
+import { copyFile, mkdir } from 'node:fs/promises';
+import { dirname, 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>');
+}
+
+const destinationPath = resolve(destination);
+
+await mkdir(dirname(destinationPath), { recursive: true });
+await copyFile(new URL('../src/styles/structured-list.scss', import.meta.url), destinationPath);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1-beta.pr194.sha00da872ba249",
   "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#e82be4389d9209750229f5fee990046b5b1217da"
   },
   "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/components/ion-segment.scss

@@ -1,4 +1,5 @@
 @use '../utils/api';
+@use '../utils/glass';
 
 ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --border-radius: 16px;
@@ -12,6 +13,24 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
   }
   border-radius: var(--border-radius);
 
+  // Use the tab bar material without changing the segment's layout or size.
+  &.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);
+    @include glass.light-rim;
+
+    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
+      );
+    }
+  }
+
   // UIKit uses a larger control in navigation bars, but not in content.
   &.in-toolbar:not(.segment-expand) {
     --border-radius: 24px;

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

@@ -55,6 +55,17 @@ ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled).toolbar-searchbar {
   *[slot='end'] {
     align-self: center;
   }
+  ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    .searchbar-input-container {
+      margin-block: 0;
+      margin-inline: 4px;
+    }
+    &:is(.searchbar-should-show-cancel, :has(.searchbar-cancel-button:active):not(.searchbar-disabled)) {
+      .searchbar-input-container {
+        margin-inline-end: 11px;
+      }
+    }
+  }
   &:has(ion-buttons[slot='start']) {
     ion-buttons[slot='start'] {
       margin-inline-end: 6px;

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/dark/ion-segment.scss

@@ -1,4 +1,5 @@
 @use '../api';
+@use '../glass';
 
 @mixin ion-segment {
   ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
@@ -8,6 +9,25 @@
     .ios27-segment-edge {
       @include api.glass-lens-dark;
     }
+    &.segment-style-glass {
+      --background: color-mix(
+        in srgb,
+        color-mix(
+            in srgb,
+            rgb(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb))) 92%,
+            rgb(var(--ion-text-color-rgb, 255, 255, 255))
+          )
+          40%,
+        transparent
+      );
+      background: var(--background);
+      backdrop-filter: blur(6px) saturate(150%) brightness(1.23);
+      @include glass.dark-rim;
+
+      ion-segment-button {
+        --indicator-color: rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, 0, 0, 0)), 0.72);
+      }
+    }
   }
   :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled)) {
     --background: rgba(var(--ion-color-medium-rgb, 152, 154, 162), 0.19);

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;
+    }
+  }
+}