docs: mention ion item group ESLint rule

src/app/generated/projects/ionic-theme-ios26.en.generated.ts

@@ -75,8 +75,13 @@ export const PROJECT = {
       "file": "using-ion-item-group.md",
       "section": "Guides",
       "path": "/projects/ionic-theme-ios26/docs/using-ion-item-group",
-      "html": "<p data-line=\"0\" class=\"code-line\">Most Ionic markup works without changes. When an <code>ion-list</code> uses <code>inset=\"true\"</code>, wrap its items in <code>ion-item-group</code> and keep <code>ion-list-header</code> outside the group.</p>\n<p data-line=\"2\" class=\"code-line\">The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.</p>\n<div class=\"code-block-container\"><pre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\"><code class=\"code-line\" data-line=\"4\"><span class=\"line\"><span style=\"color:#E1E4E8\">&lt;</span><span style=\"color:#85E89D\">ion-list</span><span style=\"color:#B392F0\"> inset</span><span style=\"color:#E1E4E8\">=</span><span style=\"color:#9ECBFF\">\"true\"</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">  &lt;</span><span style=\"color:#85E89D\">ion-list-header</span><span style=\"color:#E1E4E8\">&gt;&lt;</span><span style=\"color:#85E89D\">ion-label</span><span style=\"color:#E1E4E8\">&gt;Connections&lt;/</span><span style=\"color:#85E89D\">ion-label</span><span style=\"color:#E1E4E8\">&gt;&lt;/</span><span style=\"color:#85E89D\">ion-list-header</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">  &lt;</span><span style=\"color:#85E89D\">ion-item-group</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    &lt;</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;...&lt;/</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    &lt;</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;...&lt;/</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">  &lt;/</span><span style=\"color:#85E89D\">ion-item-group</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">&lt;/</span><span style=\"color:#85E89D\">ion-list</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"></span></code></pre></div><p data-line=\"14\" class=\"code-line\">No wrapper is required for lists that do not use <code>inset=\"true\"</code>.</p>\n<h2 id=\"why-the-wrapper-is-required\" data-line=\"16\" class=\"code-line\"><a class=\"header-anchor-link\" href=\"#why-the-wrapper-is-required\" aria-hidden=\"true\"></a> Why the wrapper is required</h2>\n<p data-line=\"18\" class=\"code-line\">Ionic normally gives <code>ion-list</code> its background, which makes <code>ion-list-header</code> appear inside the same surface as the items. The iOS 26 layout treats the header and item surface separately.</p>\n<p data-line=\"20\" class=\"code-line\"><img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios26/v3.0.0/screenshots/why-ion-list-inset.png\" alt=\"Inset list background comparison showing why ion-item-group is required\" class=\"md-img\" loading=\"eager\" fetchpriority=\"high\"></p>\n<p data-line=\"22\" class=\"code-line\">The theme therefore:</p>\n<ul data-line=\"24\" class=\"code-line\">\n<li data-line=\"24\" class=\"code-line\">makes the inset <code>ion-list</code> background transparent;</li>\n<li data-line=\"25\" class=\"code-line\">applies the item surface to <code>ion-item-group</code>; and</li>\n<li data-line=\"26\" class=\"code-line\">leaves <code>ion-list-header</code> outside that surface.</li>\n</ul>\n<h2 id=\"sharing-the-markup-with-material-design\" data-line=\"28\" class=\"code-line\"><a class=\"header-anchor-link\" href=\"#sharing-the-markup-with-material-design\" aria-hidden=\"true\"></a> Sharing the markup with Material Design</h2>\n<p data-line=\"30\" class=\"code-line\"><code>@rdlabo/ionic-theme-md3</code> supports the same grouped markup, so one template can be used for both Ionic modes.</p>\n<p data-line=\"32\" class=\"code-line\">When an application uses this package without <code>@rdlabo/ionic-theme-md3</code>, import the optional stylesheet to apply the same grouped layout in Material mode:</p>\n<div class=\"code-block-container\"><pre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\"><code class=\"code-line\" data-line=\"34\"><span class=\"line\"><span style=\"color:#F97583\">@import</span><span style=\"color:#9ECBFF\"> '@rdlabo/ionic-theme-ios26/dist/css/md-ion-list-inset.css'</span><span style=\"color:#E1E4E8\">;</span></span>\n<span class=\"line\"></span></code></pre></div><p data-line=\"38\" class=\"code-line\">For two-line items and section-header groups, see <a href=\"/projects/ionic-theme-ios26/docs/special-markup\">Special markup and classes</a>.</p>\n",
+      "html": "<p data-line=\"0\" class=\"code-line\">Most Ionic markup works without changes. When an <code>ion-list</code> uses <code>inset=\"true\"</code>, wrap its items in <code>ion-item-group</code> and keep <code>ion-list-header</code> outside the group.</p>\n<p data-line=\"2\" class=\"code-line\">The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.</p>\n<div class=\"code-block-container\"><pre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\"><code class=\"code-line\" data-line=\"4\"><span class=\"line\"><span style=\"color:#E1E4E8\">&lt;</span><span style=\"color:#85E89D\">ion-list</span><span style=\"color:#B392F0\"> inset</span><span style=\"color:#E1E4E8\">=</span><span style=\"color:#9ECBFF\">\"true\"</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">  &lt;</span><span style=\"color:#85E89D\">ion-list-header</span><span style=\"color:#E1E4E8\">&gt;&lt;</span><span style=\"color:#85E89D\">ion-label</span><span style=\"color:#E1E4E8\">&gt;Connections&lt;/</span><span style=\"color:#85E89D\">ion-label</span><span style=\"color:#E1E4E8\">&gt;&lt;/</span><span style=\"color:#85E89D\">ion-list-header</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">  &lt;</span><span style=\"color:#85E89D\">ion-item-group</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    &lt;</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;...&lt;/</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    &lt;</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;...&lt;/</span><span style=\"color:#85E89D\">ion-item</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">  &lt;/</span><span style=\"color:#85E89D\">ion-item-group</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">&lt;/</span><span style=\"color:#85E89D\">ion-list</span><span style=\"color:#E1E4E8\">&gt;</span></span>\n<span class=\"line\"></span></code></pre></div><p data-line=\"14\" class=\"code-line\">No wrapper is required for lists that do not use <code>inset=\"true\"</code>.</p>\n<h2 id=\"checking-angular-templates\" data-line=\"16\" class=\"code-line\"><a class=\"header-anchor-link\" href=\"#checking-angular-templates\" aria-hidden=\"true\"></a> Checking Angular templates</h2>\n<p data-line=\"18\" class=\"code-line\">In Ionic Angular applications, the <a href=\"https://docs.rdlabo.dev/projects/eslint-plugin-rules/docs/rules/require-ion-item-group\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><code>@rdlabo/rules/require-ion-item-group</code></a> ESLint rule checks that each <code>ion-item</code> in an <code>ion-list</code> is wrapped by the group component that matches its behavior. The rule is included in the recommended preset and can automatically fix some violations.</p>\n<h2 id=\"why-the-wrapper-is-required\" data-line=\"20\" class=\"code-line\"><a class=\"header-anchor-link\" href=\"#why-the-wrapper-is-required\" aria-hidden=\"true\"></a> Why the wrapper is required</h2>\n<p data-line=\"22\" class=\"code-line\">Ionic normally gives <code>ion-list</code> its background, which makes <code>ion-list-header</code> appear inside the same surface as the items. The iOS 26 layout treats the header and item surface separately.</p>\n<p data-line=\"24\" class=\"code-line\"><img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios26/v3.0.0/screenshots/why-ion-list-inset.png\" alt=\"Inset list background comparison showing why ion-item-group is required\" class=\"md-img\" loading=\"eager\" fetchpriority=\"high\"></p>\n<p data-line=\"26\" class=\"code-line\">The theme therefore:</p>\n<ul data-line=\"28\" class=\"code-line\">\n<li data-line=\"28\" class=\"code-line\">makes the inset <code>ion-list</code> background transparent;</li>\n<li data-line=\"29\" class=\"code-line\">applies the item surface to <code>ion-item-group</code>; and</li>\n<li data-line=\"30\" class=\"code-line\">leaves <code>ion-list-header</code> outside that surface.</li>\n</ul>\n<h2 id=\"sharing-the-markup-with-material-design\" data-line=\"32\" class=\"code-line\"><a class=\"header-anchor-link\" href=\"#sharing-the-markup-with-material-design\" aria-hidden=\"true\"></a> Sharing the markup with Material Design</h2>\n<p data-line=\"34\" class=\"code-line\"><code>@rdlabo/ionic-theme-md3</code> supports the same grouped markup, so one template can be used for both Ionic modes.</p>\n<p data-line=\"36\" class=\"code-line\">When an application uses this package without <code>@rdlabo/ionic-theme-md3</code>, import the optional stylesheet to apply the same grouped layout in Material mode:</p>\n<div class=\"code-block-container\"><pre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\"><code class=\"code-line\" data-line=\"38\"><span class=\"line\"><span style=\"color:#F97583\">@import</span><span style=\"color:#9ECBFF\"> '@rdlabo/ionic-theme-ios26/dist/css/md-ion-list-inset.css'</span><span style=\"color:#E1E4E8\">;</span></span>\n<span class=\"line\"></span></code></pre></div><p data-line=\"42\" class=\"code-line\">For two-line items and section-header groups, see <a href=\"/projects/ionic-theme-ios26/docs/special-markup\">Special markup and classes</a>.</p>\n",
       "headings": [
+        {
+          "id": "checking-angular-templates",
+          "text": "Checking Angular templates",
+          "level": 2
+        },
         {
           "id": "why-the-wrapper-is-required",
           "text": "Why the wrapper is required",