<\/div>/g, (_match, index) => highlightedBlocks[Number(index)]);
+highlighter.dispose();
+const generatedSource = await format(
+ `// Generated from docs/special-markup.md. Do not edit directly.\nexport const docsContentHtml = ${JSON.stringify(html)};\n`,
+ { parser: 'typescript', printWidth: 140 },
+);
+
+await writeFile(outputPath, generatedSource);
diff --git a/demo/src/app/docs/docs-content.generated.ts b/demo/src/app/docs/docs-content.generated.ts
new file mode 100644
index 0000000..f7ebcd9
--- /dev/null
+++ b/demo/src/app/docs/docs-content.generated.ts
@@ -0,0 +1,3 @@
+// Generated from docs/special-markup.md. Do not edit directly.
+export const docsContentHtml =
+ '
Special markup and classes
\n
Most Ionic markup works without changes. The combinations below are explicit opt-ins provided by the theme.
\n
Primary submit buttons
\n
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.
Use .button-submit when the button needs the same treatment but cannot use type="submit".
\n
Two-line inset list items
\n
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.
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.
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.
\n
Place it in a toolbar with a color, such as color="light"; the classic background is derived from that color's contrast value.
\n
The example uses Ionic's standard collapsible large-title structure. Scroll the preview to collapse the large title and reveal the fixed header.
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.
\n
Search-bar toolbars
\n
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.
+ Inset-list examples
+
+
+
+
+```
+
## 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
+```html preview
NewReplied
```
-## Classic search bar
+## 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
+
+```
+
+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
-The default theme uses the iOS 26 search field. Add `.searchbar-classic` to retain the classic Ionic iOS search-bar appearance. Place it inside `ion-toolbar` so the toolbar-specific layout rules apply.
+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
-
-
+```html preview
+
+
+ Cancel
+
+
```
@@ -65,8 +133,9 @@ The default theme uses the iOS 26 search field. Add `.searchbar-classic` to reta
Add `.ios26-disabled` to an individual Ionic component when it must retain Ionic's standard iOS styling.
-```html
+```html preview
+iOS 26 themeStandard Ionic button
```
-For the background model behind inset lists, see [Using `ion-item-group`](./using-ion-item-group.md).
+For the background model behind inset lists, see [Using `ion-item-group`](https://github.com/rdlabo-dev/ionic-theme-ios26/blob/main/docs/using-ion-item-group.md).