@rdlabo/ionic-theme-ios27 0.1.0-0

package/dist/utils.js

@@ -0,0 +1,69 @@
+export const getElementRoot = (el, fallback = el) => {
+    return el.shadowRoot || fallback;
+};
+export const raf = (h) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(h);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(h);
+    }
+    return setTimeout(h);
+};
+export const cloneElement = (tagName) => {
+    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (getCachedEl !== null) {
+        return getCachedEl;
+    }
+    const clonedEl = document.createElement(tagName);
+    clonedEl.classList.add('ion-cloned-element');
+    clonedEl.style.setProperty('display', 'none');
+    document.body.appendChild(clonedEl);
+    return clonedEl;
+};
+export const getStep = (targetX, animationPosition) => {
+    if (animationPosition === undefined) {
+        return 0;
+    }
+    const currentX = targetX - animationPosition.width / 2;
+    let progress = (currentX - animationPosition.minPositionX) / (animationPosition.maxPositionX - animationPosition.minPositionX);
+    progress = Math.max(0, Math.min(1, progress));
+    return progress;
+};
+export const changeSelectedElement = (targetElement, selectedElement, effectTagName, selectedClassName) => {
+    targetElement.querySelectorAll(effectTagName).forEach((element) => {
+        element.classList.remove(selectedClassName);
+        element.classList.remove('ion-activated');
+    });
+    selectedElement.classList.add('ion-activated');
+};
+export class Config {
+    constructor() {
+        this.m = new Map();
+    }
+    reset(configObj) {
+        this.m = new Map(Object.entries(configObj));
+    }
+    get(key, fallback) {
+        const value = this.m.get(key);
+        return value !== undefined ? value : fallback;
+    }
+    getBoolean(key, fallback = false) {
+        const val = this.m.get(key);
+        if (val === undefined) {
+            return fallback;
+        }
+        if (typeof val === 'string') {
+            return val === 'true';
+        }
+        return !!val;
+    }
+    getNumber(key, fallback) {
+        const val = parseFloat(this.m.get(key));
+        return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
+    }
+    set(key, value) {
+        this.m.set(key, value);
+    }
+}
+export const config = new Config();

package/docs/e2e-testing.md

@@ -0,0 +1,51 @@
+# E2E screenshot testing
+
+This maintainer guide explains how to run the Playwright visual-regression suite for the iOS26 demo. The suite covers every entry declared in `demo/e2e/screenshot.spec.ts` in both light and dark modes. Overlay variants are generated from the shared arrays in `demo/src/app/overlay-types.ts`.
+
+## Run the suite
+
+Install the demo dependencies first:
+
+```bash
+cd demo
+npm install
+```
+
+Then choose the command that matches the task:
+
+```bash
+npm run test:e2e          # Run the suite
+npm run test:e2e:ui       # Open Playwright UI mode
+npm run test:e2e:debug    # Run with the Playwright debugger
+npm run test:e2e:update   # Regenerate intentional baseline changes
+```
+
+To reproduce the Linux environment used by CI, run the Docker variants from `demo/`:
+
+```bash
+npm run test:e2e:docker
+npm run test:e2e:docker:update
+```
+
+The Docker commands use the Playwright image pinned in `demo/package.json`.
+
+## Review a failure
+
+A screenshot mismatch can be a regression or an intentional visual change. Before updating a baseline:
+
+1. Inspect the actual, expected, and diff images in `demo/test-results/`.
+2. Check the affected route in both light and dark modes.
+3. Confirm that the component change is intentional.
+4. Regenerate the baseline with `npm run test:e2e:update`, or use the Docker variant when matching CI rendering.
+
+The HTML report is written to `demo/playwright-report/` and can be opened with:
+
+```bash
+npx playwright show-report
+```
+
+## Add coverage
+
+When adding a demo route or overlay variant, update `demo/e2e/screenshot.spec.ts` and regenerate the relevant baselines. Commit baseline changes only after reviewing the visual diff.
+
+Pull requests targeting `main` or `ios26` run the E2E workflow in `.github/workflows/e2e-pull_request.yml`; pushes to either branch run `.github/workflows/e2e-main.yml`. GitHub builds the pull-request merge ref against its target branch, so an `ios26` pull request starts with the iOS 26 snapshots. Snapshot changes intentionally committed by the pull request are then tested as part of that merge result. The `/update-screenshots` command loads its update procedure from the pull request's target branch and commits the regenerated screenshots to the pull request branch.

package/docs/eslint.md

@@ -0,0 +1,73 @@
+---
+title: Keep lists consistent with ESLint
+---
+
+Catch missing list groups before they reach the screen. In Ionic Angular apps, `@rdlabo/eslint-plugin-rules` checks the markup used by iOS 26.
+
+## Enable the list check
+
+This setup targets Ionic Angular 9 with Angular / Angular ESLint 21–22. Install plugin 22 in an app that already has Angular ESLint configured:
+
+```sh
+npm install --save-dev @rdlabo/eslint-plugin-rules@22
+```
+
+Add the plugin to the existing HTML config in `eslint.config.mjs` (or the equivalent CommonJS config). Keep `angular.processInlineTemplates` on the TypeScript config so inline templates are checked too:
+
+```js
+import tseslint from 'typescript-eslint';
+import angular from 'angular-eslint';
+import rdlabo from '@rdlabo/eslint-plugin-rules';
+
+export default tseslint.config(
+  {
+    files: ['**/*.ts'],
+    languageOptions: { parser: tseslint.parser },
+    processor: angular.processInlineTemplates,
+  },
+  {
+    files: ['**/*.html'],
+    languageOptions: { parser: angular.templateParser },
+    plugins: { '@rdlabo/rules': rdlabo },
+    rules: {
+      '@rdlabo/rules/require-ion-item-group': 'error',
+    },
+  },
+);
+```
+
+Merge these entries into your existing configuration to retain its other checks. Already using `rdlabo.configs.recommended`? It includes this rule.
+
+## See what it catches
+
+This template is reported:
+
+```html
+<ion-list [inset]="true">
+  <ion-item>Notifications</ion-item>
+</ion-list>
+```
+
+Group the items and import `IonItemGroup` in the standalone component:
+
+```html
+<ion-list [inset]="true">
+  <ion-item-group>
+    <ion-item>Notifications</ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+The rule checks all `ion-list` elements, including non-inset lists. Radio, reorder, and accordion groups are also supported. It checks Angular templates; it does not inspect React or Vue templates.
+
+See [Using ion-item-group](./using-ion-item-group.md) for layout examples and the [rule reference](https://docs.rdlabo.dev/projects/eslint-plugin-rules/docs/rules/require-ion-item-group) for supported structures and automatic fixes.
+
+## Keep it checked
+
+Run this locally and in CI after installing dependencies:
+
+```sh
+npx eslint 'src/**/*.{ts,html}' --max-warnings 0
+```
+
+If your Angular project uses a different source directory, adjust the path. Keep a visual check for spacing, colors, and transitions; this rule checks list structure.

package/docs/experimental-animation.md

@@ -0,0 +1,85 @@
+---
+title: Experimental animation
+---
+
+# Experimental animation
+
+These gesture and animation helpers are experimental and optional. The theme works without them.
+
+## Sheet of Glass with `ion-tab-button` / `ion-segment-button`
+
+Register an `ion-tab-bar` or `ion-segment` element to add a moving selection effect to its buttons.
+
+[![Sheet of Glass animation on ion-tab-button and ion-segment-button](https://i.gyazo.com/fafd726b520827f042c76b6c73abd81c.gif)](https://gyazo.com/fafd726b520827f042c76b6c73abd81c)
+
+```ts
+import { registerTabBarEffect, registerSegmentEffect } from '@rdlabo/ionic-theme-ios27';
+
+/**
+ * Register DOM elements. Effects are applied using Ionic Gesture and Ionic Animation.
+ */
+const tabBar = document.querySelector<HTMLElement>('ion-tab-bar');
+const segment = document.querySelector<HTMLElement>('ion-segment');
+const registeredTabBarEffect = tabBar ? registerTabBarEffect(tabBar) : undefined;
+const registeredSegmentEffect = segment ? registerSegmentEffect(segment) : undefined;
+
+const destroy = () => {
+  /**
+   * If the registered DOM element is removed (e.g., due to page navigation),
+   * make sure to destroy the gesture and animation. This will also remove the event listeners.
+   * You can re-register them if needed.
+   */
+  registeredTabBarEffect?.destroy();
+  registeredSegmentEffect?.destroy();
+};
+```
+
+## TabBarSearchable: Searchable with `ion-tab-bar` and `ion-fab-button`
+
+Use the following structure inside `ion-tabs` to animate a search button into a search toolbar.
+
+[![TabBarSearchable animation expanding search from ion-fab-button into the tab bar](https://i.gyazo.com/06bc63f4a474f9f19f5b1d865f5c2a85.gif)](https://gyazo.com/06bc63f4a474f9f19f5b1d865f5c2a85)
+
+```html
+<ion-content>...</ion-content>
+<ion-fab vertical="bottom" horizontal="end" slot="fixed">
+  <ion-fab-button (click)="present($event)">
+    <ion-icon name="search"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
+<ion-footer [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <!-- ion-icon name is set dynamically by the animation -->
+      <ion-button fill="default"><ion-icon slot="icon-only"></ion-icon> </ion-button>
+    </ion-buttons>
+    <!-- User set `ionChange` or other events. -->
+    <ion-searchbar (ionChange)="example($event)"></ion-searchbar>
+  </ion-toolbar>
+</ion-footer>
+```
+
+```ts
+import { attachTabBarSearchable, TabBarSearchableType } from '@rdlabo/ionic-theme-ios27';
+import type { TabBarSearchableFunction } from '@rdlabo/ionic-theme-ios27';
+
+let searchableFun: TabBarSearchableFunction | undefined;
+const initialize = () => {
+  // attachTabBarSearchable has state. You should initialize per page.
+  const tabBar = document.querySelector<HTMLElement>('ion-tab-bar');
+  const fabButton = document.querySelector<HTMLElement>('ion-fab-button');
+  const footer = document.querySelector<HTMLElement>('ion-footer');
+  if (!tabBar || !fabButton || !footer) {
+    return;
+  }
+  searchableFun = attachTabBarSearchable(tabBar, fabButton, footer);
+};
+
+const present = (event: Event) => {
+  searchableFun!(event, TabBarSearchableType.Enter);
+};
+
+const dismiss = (event: Event) => {
+  searchableFun!(event, TabBarSearchableType.Leave);
+};
+```

package/docs/features.md

@@ -0,0 +1,88 @@
+---
+title: Features
+---
+
+# Features
+
+Customize the theme with CSS variables and Sass mixins, or adopt it one component at a time. Markup-specific opt-ins are documented in [Special markup and classes](./special-markup.md).
+
+## CSS variables
+
+To customize the library's default styles to match your design, several CSS variables are provided. See this file for details:
+[Default variables](../src/styles/default-variables.scss)
+
+## Liquid Glass mixin
+
+Import the SCSS files from the main package to use the liquid glass mixin.
+
+```scss
+@use '@rdlabo/ionic-theme-ios27/src/styles/utils/api.scss';
+
+ion-textarea label.textarea-wrapper {
+  @include api.glass-background;
+}
+```
+
+## Selective component imports
+
+For gradual adoption, you can import individual components instead of the full theme file.
+
+```css
+@import '@rdlabo/ionic-theme-ios27/dist/css/utils/translucent';
+@import '@rdlabo/ionic-theme-ios27/dist/css/components/ion-action-sheet';
+@import '@rdlabo/ionic-theme-ios27/dist/css/components/ion-alert';
+@import '@rdlabo/ionic-theme-ios27/dist/css/components/ion-button';
+/* Import the remaining components your application uses. */
+```
+
+### Dark mode with individual components
+
+Use SCSS when selectively importing components with dark mode support because the selectors differ between Always, System, and Class modes.
+
+Always:
+
+```scss
+@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';
+
+:root {
+  @include theme-dark.default-variables;
+}
+@include theme-dark.ion-button;
+@include theme-dark.ion-fab;
+@include theme-dark.ion-tabs;
+@include theme-dark.ion-segment;
+```
+
+System:
+
+```scss
+@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include theme-dark.default-variables;
+  }
+  @include theme-dark.ion-button;
+  @include theme-dark.ion-fab;
+  @include theme-dark.ion-tabs;
+  @include theme-dark.ion-segment;
+}
+```
+
+Class:
+
+```scss
+@use '@rdlabo/ionic-theme-ios27/src/styles/utils/theme-dark';
+
+.ion-palette-dark {
+  @include theme-dark.default-variables;
+  @include theme-dark.ion-button;
+  @include theme-dark.ion-fab;
+  @include theme-dark.ion-tabs;
+  @include theme-dark.ion-segment;
+}
+```
+
+## Interactive examples
+
+[Browse rendered examples in the demo](https://ionic-theme-ios27.rdlabo.dev/main/docs).

package/docs/feedback.md

@@ -0,0 +1,65 @@
+# Feature requests for Ionic Framework
+
+## feat(): change `--knob-handle-size` to `--knob-handle-width` / `--knob-handle-height`
+
+Currently, only square sizes are taken into consideration.
+Overwriting the `knob` itself is possible, but `--knob-handle-size` cannot be ignored as it plays a crucial role in determining the `top` and `margin-inline-start` of `div.range-knob-handle`.
+
+## feat(): ion-config new property for `collapse`
+
+Currently, `collapse` behavior is automatically enabled in iOS mode, but this should be configurable through `ion-config` for better control.
+
+ex:
+
+```typescript
+export interface IonicConfig {
+    ...,
+    collapseLargeTitle: {
+        ios: boolean;
+        md: boolean;
+        ionic: boolean;
+    },
+    collapseBackButtonAnimation: {
+        ios: boolean;
+        md: boolean;
+        ionic: boolean;
+    },
+}
+```
+
+## feat(): add native shadow-part for design
+
+### native-inner(or item-inner) part to ion-item
+
+The styling for `ion-item[lines=inset]` is applied to `.item-inner`, which cannot be styled directly. This limitation means that for iOS 26 styling, I can only modify the border-bottom style through `::part(native)` with padding-right, preventing me from utilizing the full right side of `ion-item`. Adding `::part(native-inner)` would increase styling flexibility.
+
+```diff
+  <ion-item>
+    <button type="button" class="item-native" part="native">
+-     <div class="item-inner">
++     <div class="item-inner" part="native-inner">
+      ...
+      </div>
+    </button>
+  </ion-item>
+```
+
+### native part to ion-toast
+
+Resolved: https://github.com/ionic-team/ionic-framework/pull/30992#event-23306774962
+
+## docs(): Naming conventions for Ionic theme classes
+
+Resolved.
+
+### should disable ion-back-button Animation
+
+Resolved: by created https://github.com/rdlabo-dev/ionic-theme-ios26/tree/main/src/transition
+
+## feat(): ion-content[fullscreen=true] will have .content-fullscreen class
+
+Resolved: https://github.com/ionic-team/ionic-framework/pull/30926
+
+## feat(): add .range-knob-min and .range-knob-max directly to ion-range
+
+Resolved: https://github.com/ionic-team/ionic-framework/pull/30932

package/docs/ios-18.md

@@ -0,0 +1,16 @@
+---
+title: Supporting iOS 18
+---
+
+# Supporting iOS 18
+
+## How to prevent loading the theme on iOS 18
+
+If you want to load a theme file only when the user's device is running iOS 26 (and let users on iOS 18 use the default Ionic iOS theme), you can achieve this by adding a supports-condition to your `import`.
+
+```css
+@import '@rdlabo/ionic-theme-ios27/dist/css/default-variables.css' supports(text-wrap: pretty);
+@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios26.css' supports(text-wrap: pretty);
+@import '@rdlabo/ionic-theme-ios27/dist/css/md-remove-ios-class-effect.css' supports(text-wrap: pretty);
+@import '@rdlabo/ionic-theme-ios27/dist/css/md-ion-list-inset.css' supports(text-wrap: pretty);
+```

package/docs/migration.md

@@ -0,0 +1,94 @@
+---
+title: Migration
+---
+
+# Migration
+
+Review every section newer than the version currently installed, in ascending order. For example, when upgrading from 1.x to 9.0.0, complete the 2.0.0 and 3.0.0 migration steps before reviewing 9.0.0.
+
+Each section lists only the changes that require application code or configuration updates.
+
+## Migrating to 9.0.0
+
+Version 9 aligns the theme's major version with Ionic Framework 9. It does not introduce additional breaking changes beyond those documented in the earlier migration sections.
+
+Both Ionic 8 and Ionic 9 remain supported. Version 9 requires `@ionic/core >=8.8.1 <10`.
+
+## Migrating to 3.0.0
+
+### Rename `.header-item-group` to `.item-group-header`
+
+The class for an `ion-item-group` used as a section header has been renamed for consistency with the element it modifies. Replace every occurrence of `.header-item-group` in application templates and styles.
+
+```diff
+- <ion-item-group class="header-item-group">
++ <ion-item-group class="item-group-header">
+    ...
+  </ion-item-group>
+```
+
+The old class is no longer styled by the theme. This rename applies to markup shared with `@rdlabo/ionic-theme-md3` as well.
+
+## Migrating to 2.0.0
+
+### Configure `iosTransitionAnimation`
+
+Version 2 requires the package navigation transition. It follows Ionic's default iOS transition without the obsolete `animateBackButton()` behavior that animated a Large Title into the back-button label.
+
+```ts
+import { isPlatform } from '@ionic/core'; // or @ionic/angular/standalone, @ionic/react, @ionic/vue
+import { iosTransitionAnimation } from '@rdlabo/ionic-theme-ios26';
+
+// Angular
+provideIonicAngular({
+  // ...
+  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
+});
+
+// React
+setupIonicReact({
+  // ...
+  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
+});
+
+// Vue
+createApp(App).use(IonicVue, {
+  // ...
+  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
+});
+```
+
+With this transition configured, `<ion-buttons><ion-back-button></ion-back-button></ion-buttons>` can be used without the unwanted transition side effects caused by the old animation.
+
+## Migrating to 1.0.0
+
+### Update SCSS import paths
+
+The source files moved under `src/styles` when JavaScript files were added to the package.
+
+```diff
+- @import '@rdlabo/ionic-theme-ios26/src/default-variables.scss';
++ @import '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
+```
+
+Generated CSS paths under `dist` did not change.
+
+### Rename `--ios26-color-background-rgb`
+
+```diff
+  :root {
+-   --ios26-color-background-rgb: 255, 255, 255;
++   --ios26-content-box-shadow-rgb: 255, 255, 255;
+  }
+```
+
+### Rename brightness variables
+
+Replace each `--ion-color-*-brightness-rgb` variable with `--ion-color-*-brightness` and use a color value instead of an RGB channel list.
+
+```diff
+  :root {
+-   --ion-color-primary-brightness-rgb: 130, 255, 255;
++   --ion-color-primary-brightness: #96feff;
+  }
+```

package/docs/special-markup.md

@@ -0,0 +1,145 @@
+---
+title: Special markup and classes
+---
+
+# Special markup and classes
+
+Most Ionic markup works without changes. The combinations below are explicit opt-ins provided by the theme.
+
+## Primary submit buttons
+
+Solid primary submit buttons use `--ion-color-primary-brightness` for their foreground and border treatment. Define a value with sufficient contrast for your primary color.
+
+```css
+:root {
+  --ion-color-primary-brightness: #96feff;
+}
+```
+
+```html preview
+<ion-button type="submit" color="primary">Submit</ion-button>
+<ion-button class="button-submit" fill="solid" color="primary">Continue</ion-button>
+```
+
+Use `.button-submit` when the button needs the same treatment but cannot use `type="submit"`.
+
+## Two-line inset list items
+
+Place an unslotted `ion-label` immediately alongside an unslotted `ion-note` to render a two-line item. When using the iOS-style inset-list background, wrap the items in `ion-item-group`; keep `ion-list-header` outside the group.
+
+```html preview
+<ion-list inset="true">
+  <ion-list-header>
+    <ion-label>Connections</ion-label>
+  </ion-list-header>
+  <ion-item-group>
+    <ion-item>
+      <ion-label>Network &amp; internet</ion-label>
+      <ion-note>Mobile, Wi-Fi, hotspot</ion-note>
+    </ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+Use `slot="end"` on `ion-note` when you want the standard trailing-note layout instead.
+
+## Inset-list section headers
+
+Add `.item-group-header` to an `ion-item-group` to create the centered icon, title, and description used at the top of the component demo pages.
+
+This is an introductory group. Place regular list items in a separate `ion-item-group` that follows it.
+
+```html preview
+<ion-list inset="true">
+  <ion-item-group class="item-group-header">
+    <ion-item>
+      <ion-label>
+        <ion-icon name="list" style="background: var(--ion-color-primary)"></ion-icon>
+        <h2>Lists</h2>
+        <ion-text>Inset-list examples</ion-text>
+      </ion-label>
+    </ion-item>
+  </ion-item-group>
+  <ion-item-group>
+    <ion-item><ion-label>First item</ion-label></ion-item>
+  </ion-item-group>
+</ion-list>
+```
+
+## Full-width segments
+
+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.
+
+```html preview
+<ion-segment class="segment-expand" value="new">
+  <ion-segment-button value="new"><ion-label>New</ion-label></ion-segment-button>
+  <ion-segment-button value="replied"><ion-label>Replied</ion-label></ion-segment-button>
+</ion-segment>
+```
+
+## Classic search bar in a condense header
+
+The theme gives iOS search bars the iOS 26 appearance by default. Add `.searchbar-classic` to the search field shown beneath a large title in an `ion-header` with `collapse="condense"`. It uses the conventional filled iOS appearance and collapses with the large title instead of remaining in the fixed header.
+
+Place it in a toolbar with a color, such as `color="light"`; the classic background is derived from that color's contrast value.
+
+The example uses Ionic's standard collapsible large-title structure. Scroll the preview to collapse the large title and reveal the fixed header.
+
+```html preview
+<div class="ion-page">
+  <ion-header translucent="true">
+    <ion-toolbar color="light">
+      <ion-title>Search</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content color="light" fullscreen="true">
+    <ion-header collapse="condense">
+      <ion-toolbar color="light">
+        <ion-title size="large">Search</ion-title>
+      </ion-toolbar>
+      <ion-toolbar color="light">
+        <ion-searchbar class="searchbar-classic" placeholder="Filter results"></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+    <ion-list inset="true">
+      <ion-item-group>
+        <ion-item><ion-label>Recent item 1</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 2</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 3</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 4</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 5</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 6</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 7</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 8</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 9</ion-label></ion-item>
+        <ion-item><ion-label>Recent item 10</ion-label></ion-item>
+      </ion-item-group>
+    </ion-list>
+  </ion-content>
+</div>
+```
+
+The `.ion-page` wrapper makes this embedded preview behave like a complete routed page. An application using `ion-router-outlet` normally receives that page container automatically. The inset list and its items only provide enough content to demonstrate scrolling; they are not required by `.searchbar-classic`.
+
+## Search-bar toolbars
+
+Add `.toolbar-searchbar` when an `ion-toolbar` combines a search bar with start or end buttons. The class centers the slotted controls and adjusts the spacing around the search field.
+
+```html preview
+<ion-toolbar class="toolbar-searchbar">
+  <ion-buttons slot="start">
+    <ion-button>Cancel</ion-button>
+  </ion-buttons>
+  <ion-searchbar></ion-searchbar>
+</ion-toolbar>
+```
+
+## Opting out
+
+Add `.ios26-disabled` to an individual Ionic component when it must retain Ionic's standard iOS styling.
+
+```html preview
+<ion-button>iOS 26 theme</ion-button> <ion-button class="ios26-disabled">Standard Ionic button</ion-button>
+```
+
+For the background model behind inset lists, see [Using `ion-item-group`](./using-ion-item-group.md).