chore: rebuild dist with standardized docs wrappers

dist/docs/browser-support.html

@@ -615,35 +615,39 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>AdminLTE comes with the same browser support as Bootstrap 5.</p>
-            <blockquote>
-              <h5 id="excerpt-from-bootstraps-official-documentation">
-                Excerpt from Bootstrap’s official Documentation!
-              </h5>
-              <p>
-                Bootstrap supports the <strong>latest, stable releases</strong> of all major
-                browsers and platforms.
-              </p>
-              <p>
-                For more details
-                <a
-                  href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers"
-                  >look here</a
-                >.
-              </p>
-            </blockquote>
-            <p>
-              You can find our supported range of browsers and their versions in
-              <a href="https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc"
-                >our .browserslistrc file</a
-              >:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="plaintext"
-            ><code><span class="line"><span># https://github.com/browserslist/browserslist#readme</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>AdminLTE comes with the same browser support as Bootstrap 5.</p>
+                    <blockquote>
+                      <h5 id="excerpt-from-bootstraps-official-documentation">
+                        Excerpt from Bootstrap’s official Documentation!
+                      </h5>
+                      <p>
+                        Bootstrap supports the <strong>latest, stable releases</strong> of all major
+                        browsers and platforms.
+                      </p>
+                      <p>
+                        For more details
+                        <a
+                          href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers"
+                          >look here</a
+                        >.
+                      </p>
+                    </blockquote>
+                    <p>
+                      You can find our supported range of browsers and their versions in
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc"
+                        >our .browserslistrc file</a
+                      >:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="plaintext"
+                    ><code><span class="line"><span># https://github.com/browserslist/browserslist#readme</span></span>
 <span class="line"><span></span></span>
 <span class="line"><span>&gt;= 0.5%</span></span>
 <span class="line"><span>last 2 major versions</span></span>
@@ -654,6 +658,10 @@
 <span class="line"><span>iOS &gt;= 12</span></span>
 <span class="line"><span>Safari &gt;= 12</span></span>
 <span class="line"><span>not Explorer &lt;= 11</span></span></code></pre>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/color-mode.html

@@ -723,12 +723,14 @@
               </div>
               <!-- Start column -->
               <div class="col-12">
-                <pre
-                  class="astro-code dark-plus"
-                  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-                  tabindex="0"
-                  data-language="html"
-                ><code><span class="line"><span style="color:#6A9955">&lt;!--begin::Header--&gt;</span></span>
+                <div class="card">
+                  <div class="card-body">
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#6A9955">&lt;!--begin::Header--&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">nav</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;navbar navbar-expand bg-body&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#6A9955">  &lt;!--begin::Container--&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;container-fluid&quot;</span><span style="color:#808080">&gt;</span></span>
@@ -812,12 +814,12 @@
 <span class="line"><span style="color:#6A9955">  &lt;!--end::Container--&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">nav</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#6A9955">&lt;!--end::Header--&gt;</span></span></code></pre>
-                <pre
-                  class="astro-code dark-plus"
-                  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-                  tabindex="0"
-                  data-language="js"
-                ><code><span class="line"><span style="color:#6A9955">// Color Mode Toggler</span></span>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#6A9955">// Color Mode Toggler</span></span>
 <span class="line"><span style="color:#D4D4D4">(() </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
 <span class="line"><span style="color:#CE9178">  &quot;use strict&quot;</span><span style="color:#D4D4D4">;</span></span>
 <span class="line"></span>
@@ -897,6 +899,8 @@
 <span class="line"><span style="color:#D4D4D4">    }</span></span>
 <span class="line"><span style="color:#D4D4D4">  });</span></span>
 <span class="line"><span style="color:#D4D4D4">})();</span></span></code></pre>
+                  </div>
+                </div>
               </div>
             </div>
             <!--end::Row-->

dist/docs/components/main-header.html

@@ -836,12 +836,16 @@
             </nav>
             <!-- /.navbar -->
 
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#6A9955">&lt;!-- Navbar --&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#6A9955">&lt;!-- Navbar --&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">nav</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;app-header navbar navbar-expand bg-body&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#6A9955">  &lt;!--begin::Container--&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;container-fluid&quot;</span><span style="color:#808080">&gt;</span></span>
@@ -1037,6 +1041,10 @@
 <span class="line"><span style="color:#6A9955">  &lt;!--end::Container--&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">nav</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#6A9955">&lt;!-- /.navbar --&gt;</span></span></code></pre>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/components/main-sidebar.html

@@ -615,16 +615,20 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              The sidebar used in this page to the left provides an example of what your sidebar
-              would look like. Construction of a sidebar:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#6A9955">&lt;!--begin::Sidebar--&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      The sidebar used in this page to the left provides an example of what your
+                      sidebar would look like. Construction of a sidebar:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#6A9955">&lt;!--begin::Sidebar--&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">aside</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;app-sidebar bg-body-secondary shadow&quot;</span><span style="color:#9CDCFE"> data-bs-theme</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;dark&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#6A9955">  &lt;!--begin::Sidebar Brand--&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar-brand&quot;</span><span style="color:#808080">&gt;</span></span>
@@ -728,17 +732,17 @@
 <span class="line"><span style="color:#6A9955">  &lt;!--end::Sidebar Wrapper--&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">aside</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#6A9955">&lt;!--end::Sidebar--&gt;</span></span></code></pre>
-            <h2 id="alternate-logo">Alternate Logo</h2>
-            <p>
-              You can use two logo images instead of logo with text, you only need to change the
-              markup to this:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar-brand&quot;</span><span style="color:#808080">&gt;</span></span>
+                    <h2 id="alternate-logo">Alternate Logo</h2>
+                    <p>
+                      You can use two logo images instead of logo with text, you only need to change
+                      the markup to this:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar-brand&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./index.html&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-link logo-switch&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">    &lt;</span><span style="color:#569CD6">img</span></span>
 <span class="line"><span style="color:#9CDCFE">      src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;./assets/img/AdminLTELogo.png&quot;</span></span>
@@ -752,6 +756,10 @@
 <span class="line"><span style="color:#808080">    /&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span></code></pre>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/how-to-contribute.html

@@ -615,100 +615,117 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <h1 id="contributing-to-adminlte">Contributing to AdminLTE</h1>
-            <p>
-              Contributions are always <strong>welcome and recommended</strong>! Here is how for
-              beginner’s:
-              <a href="https://youtu.be/GbqSvJs-6W4">Get started with open source click here</a>
-            </p>
-            <ol>
-              <li>
-                <p>Contribution Requirements :</p>
-                <ul>
-                  <li>
-                    When you contribute, you agree to give a non-exclusive license to AdminLTE.io to
-                    use that contribution in any context as we (AdminLTE.io) see appropriate.
-                  </li>
-                  <li>
-                    If you use content provided by another party, it must be appropriately licensed
-                    using an <a href="https://opensource.org/licenses">open source</a> license.
-                  </li>
-                  <li>Contributions are only accepted through GitHub pull requests.</li>
-                  <li>
-                    Finally, contributed code must work in all supported browsers (see above for
-                    browser support).
-                  </li>
-                </ul>
-              </li>
-              <li>
-                <p>Installation :</p>
-                <ul>
-                  <li>
-                    Fork the repository (<a href="https://help.github.com/articles/fork-a-repo/"
-                      >here is the guide</a
-                    >).
-                  </li>
-                  <li>Clone to your machine</li>
-                </ul>
-                <pre
-                  class="astro-code dark-plus"
-                  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-                  tabindex="0"
-                  data-language="bash"
-                ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/YOUR_USERNAME/AdminLTE.git</span></span></code></pre>
-                <ul>
-                  <li>Create a new branch from <code>master</code></li>
-                </ul>
-              </li>
-              <li>
-                <p>Compile dist files (Development) :</p>
-                <ul>
-                  <li>
-                    To compile the dist files you need Node.js 18 or higher/npm (node package
-                    manager)
-                  </li>
-                  <li><code>npm install</code> (install npm deps)</li>
-                  <li>
-                    <code>npm run dev</code> (developer mode, autocompile with browsersync support
-                    for live demo)
-                  </li>
-                  <li>
-                    Make your changes only in <code>./src</code> Folder OR
-                    <code>package.json</code> in any files which are necessary for contribution
-                  </li>
-                  <li>
-                    Do not make changes in <code>./dist/**</code> Because it contains compiled files
-                    and do not include in PR (Pull Request)
-                  </li>
-                  <li>
-                    <code>npm run production</code> (compile css/js files and test all pages are
-                    perfectly working fine, before creating a pull request)
-                  </li>
-                </ul>
-              </li>
-              <li>
-                <p>Create a pull request to <code>master</code> branch</p>
-              </li>
-            </ol>
-            <h2 id="online-one-click-setup-for-contributing">
-              Online one-click setup for contributing
-            </h2>
-            <p>
-              You can use <a href="https://docs.github.com/en/codespaces">Codespace</a> an online
-              IDE which is free for Open Source for working on issues or making PRs (Pull Requests).
-              With a single click it will launch a workspace and automatically:
-            </p>
-            <ul>
-              <li>clone the <code>AdminLTE</code> repo.</li>
-              <li>
-                Open with <a href="https://docs.github.com/en/codespaces">Codespace</a> or
-                <a href="https://gitpod.io/from-referrer/"
-                  ><img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod"
-                /></a>
-              </li>
-              <li>install the dependencies.</li>
-              <li>run <code>npm run dev</code> to start the server.</li>
-            </ul>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <h1 id="contributing-to-adminlte">Contributing to AdminLTE</h1>
+                    <p>
+                      Contributions are always <strong>welcome and recommended</strong>! Here is how
+                      for beginner’s:
+                      <a href="https://youtu.be/GbqSvJs-6W4"
+                        >Get started with open source click here</a
+                      >
+                    </p>
+                    <ol>
+                      <li>
+                        <p>Contribution Requirements :</p>
+                        <ul>
+                          <li>
+                            When you contribute, you agree to give a non-exclusive license to
+                            AdminLTE.io to use that contribution in any context as we (AdminLTE.io)
+                            see appropriate.
+                          </li>
+                          <li>
+                            If you use content provided by another party, it must be appropriately
+                            licensed using an
+                            <a href="https://opensource.org/licenses">open source</a> license.
+                          </li>
+                          <li>Contributions are only accepted through GitHub pull requests.</li>
+                          <li>
+                            Finally, contributed code must work in all supported browsers (see above
+                            for browser support).
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <p>Installation :</p>
+                        <ul>
+                          <li>
+                            Fork the repository (<a
+                              href="https://help.github.com/articles/fork-a-repo/"
+                              >here is the guide</a
+                            >).
+                          </li>
+                          <li>Clone to your machine</li>
+                        </ul>
+                        <pre
+                          class="astro-code dark-plus"
+                          style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                          tabindex="0"
+                          data-language="bash"
+                        ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/YOUR_USERNAME/AdminLTE.git</span></span></code></pre>
+                        <ul>
+                          <li>Create a new branch from <code>master</code></li>
+                        </ul>
+                      </li>
+                      <li>
+                        <p>Compile dist files (Development) :</p>
+                        <ul>
+                          <li>
+                            To compile the dist files you need Node.js 18 or higher/npm (node
+                            package manager)
+                          </li>
+                          <li><code>npm install</code> (install npm deps)</li>
+                          <li>
+                            <code>npm run dev</code> (developer mode, autocompile with browsersync
+                            support for live demo)
+                          </li>
+                          <li>
+                            Make your changes only in <code>./src</code> Folder OR
+                            <code>package.json</code> in any files which are necessary for
+                            contribution
+                          </li>
+                          <li>
+                            Do not make changes in <code>./dist/**</code> Because it contains
+                            compiled files and do not include in PR (Pull Request)
+                          </li>
+                          <li>
+                            <code>npm run production</code> (compile css/js files and test all pages
+                            are perfectly working fine, before creating a pull request)
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        <p>Create a pull request to <code>master</code> branch</p>
+                      </li>
+                    </ol>
+                    <h2 id="online-one-click-setup-for-contributing">
+                      Online one-click setup for contributing
+                    </h2>
+                    <p>
+                      You can use <a href="https://docs.github.com/en/codespaces">Codespace</a> an
+                      online IDE which is free for Open Source for working on issues or making PRs
+                      (Pull Requests). With a single click it will launch a workspace and
+                      automatically:
+                    </p>
+                    <ul>
+                      <li>clone the <code>AdminLTE</code> repo.</li>
+                      <li>
+                        Open with <a href="https://docs.github.com/en/codespaces">Codespace</a> or
+                        <a href="https://gitpod.io/from-referrer/"
+                          ><img
+                            src="https://gitpod.io/button/open-in-gitpod.svg"
+                            alt="Open in Gitpod"
+                        /></a>
+                      </li>
+                      <li>install the dependencies.</li>
+                      <li>run <code>npm run dev</code> to start the server.</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/introduction.html

@@ -615,69 +615,73 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <h2 id="what-is-adminlte">What is AdminLTE?</h2>
-            <p>
-              AdminLTE is a free, MIT-licensed admin dashboard template built on
-              <strong>Bootstrap 5.3.8</strong> with vanilla TypeScript (no jQuery). It ships
-              responsive layouts, a sidebar navigation system, light/dark/auto color mode, RTL
-              support, and a growing catalog of demo pages — calendar, kanban, chat, file manager,
-              invoice, profile, settings, and more.
-            </p>
-            <p>
-              It’s a <em>template</em>, not a component library. You drop the markup into your own
-              project (or framework templates) and customize the parts you need. Bootstrap 5 handles
-              the components; AdminLTE provides the application shell.
-            </p>
-            <p>
-              If you’ve never used AdminLTE before, start with
-              <a href="getting-started.html">Getting Started</a> — it walks through a working
-              dashboard in ten minutes.
-            </p>
-            <h2 id="installation-paths">Installation paths</h2>
-            <p>Pick the path that matches how you’ll actually use AdminLTE:</p>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Path</th>
-                  <th>Best for</th>
-                  <th>Setup time</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><strong>CDN</strong></td>
-                  <td>Prototyping, demos, simple sites</td>
-                  <td>1 minute</td>
-                </tr>
-                <tr>
-                  <td><strong>npm + bundler</strong></td>
-                  <td>Production apps, framework projects (Laravel, Symfony, Rails)</td>
-                  <td>5 minutes</td>
-                </tr>
-                <tr>
-                  <td><strong>Build from source</strong></td>
-                  <td>You need to customize SCSS variables, sidebar width, breakpoints</td>
-                  <td>10 minutes</td>
-                </tr>
-                <tr>
-                  <td><strong>Composer</strong></td>
-                  <td>PHP projects that prefer Packagist over npm</td>
-                  <td>2 minutes</td>
-                </tr>
-              </tbody>
-            </table>
-            <h3 id="cdn--fastest-path">CDN — fastest path</h3>
-            <p>
-              Drop these four CSS tags into <code>&lt;head&gt;</code> and four script tags before
-              <code>&lt;/body&gt;</code>. No install, no build step:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#6A9955">&lt;!-- In &lt;head&gt; --&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <h2 id="what-is-adminlte">What is AdminLTE?</h2>
+                    <p>
+                      AdminLTE is a free, MIT-licensed admin dashboard template built on
+                      <strong>Bootstrap 5.3.8</strong> with vanilla TypeScript (no jQuery). It ships
+                      responsive layouts, a sidebar navigation system, light/dark/auto color mode,
+                      RTL support, and a growing catalog of demo pages — calendar, kanban, chat,
+                      file manager, invoice, profile, settings, and more.
+                    </p>
+                    <p>
+                      It’s a <em>template</em>, not a component library. You drop the markup into
+                      your own project (or framework templates) and customize the parts you need.
+                      Bootstrap 5 handles the components; AdminLTE provides the application shell.
+                    </p>
+                    <p>
+                      If you’ve never used AdminLTE before, start with
+                      <a href="getting-started.html">Getting Started</a> — it walks through a
+                      working dashboard in ten minutes.
+                    </p>
+                    <h2 id="installation-paths">Installation paths</h2>
+                    <p>Pick the path that matches how you’ll actually use AdminLTE:</p>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Path</th>
+                          <th>Best for</th>
+                          <th>Setup time</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><strong>CDN</strong></td>
+                          <td>Prototyping, demos, simple sites</td>
+                          <td>1 minute</td>
+                        </tr>
+                        <tr>
+                          <td><strong>npm + bundler</strong></td>
+                          <td>Production apps, framework projects (Laravel, Symfony, Rails)</td>
+                          <td>5 minutes</td>
+                        </tr>
+                        <tr>
+                          <td><strong>Build from source</strong></td>
+                          <td>You need to customize SCSS variables, sidebar width, breakpoints</td>
+                          <td>10 minutes</td>
+                        </tr>
+                        <tr>
+                          <td><strong>Composer</strong></td>
+                          <td>PHP projects that prefer Packagist over npm</td>
+                          <td>2 minutes</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h3 id="cdn--fastest-path">CDN — fastest path</h3>
+                    <p>
+                      Drop these four CSS tags into <code>&lt;head&gt;</code> and four script tags
+                      before <code>&lt;/body&gt;</code>. No install, no build step:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#6A9955">&lt;!-- In &lt;head&gt; --&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css&quot;</span><span style="color:#808080"> /&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css&quot;</span><span style="color:#808080"> /&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-rc7/dist/css/adminlte.min.css&quot;</span><span style="color:#808080"> /&gt;</span></span>
@@ -687,27 +691,32 @@
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-rc7/dist/js/adminlte.min.js&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <p>
-              Then copy any
-              <a href="https://github.com/ColorlibHQ/AdminLTE/tree/master/dist">demo page</a> HTML
-              into your own file. See <a href="getting-started.html">Getting Started</a> for the
-              minimum-viable layout.
-            </p>
-            <h3 id="npm--bundler">npm + bundler</h3>
-            <p>Requires Node.js 18+ and a bundler (Vite, Webpack, Rollup, esbuild, etc.).</p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="bash"
-            ><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0-rc7</span></span></code></pre>
-            <p>Then import the CSS and JS in your app entry point:</p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#6A9955">// CSS</span></span>
+                    <p>
+                      Then copy any
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/tree/master/dist"
+                        >demo page</a
+                      >
+                      HTML into your own file. See
+                      <a href="getting-started.html">Getting Started</a> for the minimum-viable
+                      layout.
+                    </p>
+                    <h3 id="npm--bundler">npm + bundler</h3>
+                    <p>
+                      Requires Node.js 18+ and a bundler (Vite, Webpack, Rollup, esbuild, etc.).
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="bash"
+                    ><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0-rc7</span></span></code></pre>
+                    <p>Then import the CSS and JS in your app entry point:</p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#6A9955">// CSS</span></span>
 <span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;admin-lte/dist/css/adminlte.min.css&quot;</span></span>
 <span class="line"><span style="color:#6A9955">// Plus Bootstrap and dependency CSS</span></span>
 <span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;bootstrap-icons/font/bootstrap-icons.css&quot;</span></span>
@@ -716,110 +725,125 @@
 <span class="line"><span style="color:#6A9955">// JS</span></span>
 <span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;bootstrap&quot;</span></span>
 <span class="line"><span style="color:#C586C0">import</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span></code></pre>
-            <p>
-              Yarn and pnpm work the same way — substitute <code>yarn add</code> or
-              <code>pnpm add</code> for the install.
-            </p>
-            <h3 id="build-from-source">Build from source</h3>
-            <p>
-              If you want to customize SCSS variables (sidebar width, breakpoints, brand colours),
-              clone the repo and build locally:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="bash"
-            ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span>
+                    <p>
+                      Yarn and pnpm work the same way — substitute <code>yarn add</code> or
+                      <code>pnpm add</code> for the install.
+                    </p>
+                    <h3 id="build-from-source">Build from source</h3>
+                    <p>
+                      If you want to customize SCSS variables (sidebar width, breakpoints, brand
+                      colours), clone the repo and build locally:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="bash"
+                    ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span>
 <span class="line"><span style="color:#DCDCAA">cd</span><span style="color:#CE9178"> AdminLTE</span></span>
 <span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span></span>
 <span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> run</span><span style="color:#CE9178"> dev</span><span style="color:#6A9955">          # dev server with hot-reload at localhost:3000</span></span>
 <span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> run</span><span style="color:#CE9178"> production</span><span style="color:#6A9955">   # one-off production build (clean + lint + compile)</span></span></code></pre>
-            <p>
-              The compiled output lands in <code>dist/</code>. Edit
-              <code>src/scss/_variables.scss</code> or
-              <code>src/scss/_bootstrap-variables.scss</code>, then rerun the build. See
-              <a href="customization.html">Customization &amp; Theming</a> for which variables
-              matter.
-            </p>
-            <h3 id="composer">Composer</h3>
-            <p>For PHP projects:</p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="bash"
-            ><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> &quot;almasaeed2010/adminlte=4.0.0-rc7&quot;</span></span></code></pre>
-            <p>
-              The package is published from the same source tree — you get the
-              <code>dist/</code> folder ready to serve.
-            </p>
-            <h2 id="prerequisites">Prerequisites</h2>
-
-            <table>
-              <thead>
-                <tr>
-                  <th></th>
-                  <th>Minimum</th>
-                  <th>Recommended</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>Bootstrap</td>
-                  <td>5.3.0</td>
-                  <td>5.3.8 (pinned in <code>package.json</code>)</td>
-                </tr>
-                <tr>
-                  <td>Node.js</td>
-                  <td>18 LTS</td>
-                  <td>22 LTS (used by CI)</td>
-                </tr>
-                <tr>
-                  <td>Browser</td>
-                  <td>Modern evergreen</td>
-                  <td>Latest stable Chrome/Firefox/Safari/Edge</td>
-                </tr>
-              </tbody>
-            </table>
-            <p>
-              AdminLTE 4 does <strong>not</strong> support Internet Explorer. If you need IE11, stay
-              on
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0">AdminLTE 3</a> or
-              earlier.
-            </p>
-            <h2 id="where-to-next">Where to next</h2>
-            <ul>
-              <li>
-                <strong><a href="getting-started.html">Getting Started</a></strong> — a working
-                dashboard in 10 minutes
-              </li>
-              <li>
-                <strong><a href="layout.html">Layout</a></strong> — the app-wrapper structure and
-                responsive options
-              </li>
-              <li>
-                <strong><a href="customization.html">Customization</a></strong> — change colours,
-                sidebar width, spacing
-              </li>
-              <li>
-                <strong><a href="migration.html">Migration from v3</a></strong> — upgrading an
-                existing AdminLTE 3 project
-              </li>
-            </ul>
-            <h2 id="releases-and-changelog">Releases and changelog</h2>
-            <p>
-              Always grab the latest from the
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases">GitHub releases page</a> —
-              that’s where the changelog lives.
-            </p>
-            <p>
-              Legacy releases:
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0">AdminLTE 3.2</a>
-              ·
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18">AdminLTE 2</a> ·
-              <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1">AdminLTE 1</a>
-            </p>
+                    <p>
+                      The compiled output lands in <code>dist/</code>. Edit
+                      <code>src/scss/_variables.scss</code> or
+                      <code>src/scss/_bootstrap-variables.scss</code>, then rerun the build. See
+                      <a href="customization.html">Customization &amp; Theming</a> for which
+                      variables matter.
+                    </p>
+                    <h3 id="composer">Composer</h3>
+                    <p>For PHP projects:</p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="bash"
+                    ><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> &quot;almasaeed2010/adminlte=4.0.0-rc7&quot;</span></span></code></pre>
+                    <p>
+                      The package is published from the same source tree — you get the
+                      <code>dist/</code> folder ready to serve.
+                    </p>
+                    <h2 id="prerequisites">Prerequisites</h2>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th></th>
+                          <th>Minimum</th>
+                          <th>Recommended</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>Bootstrap</td>
+                          <td>5.3.0</td>
+                          <td>5.3.8 (pinned in <code>package.json</code>)</td>
+                        </tr>
+                        <tr>
+                          <td>Node.js</td>
+                          <td>18 LTS</td>
+                          <td>22 LTS (used by CI)</td>
+                        </tr>
+                        <tr>
+                          <td>Browser</td>
+                          <td>Modern evergreen</td>
+                          <td>Latest stable Chrome/Firefox/Safari/Edge</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <p>
+                      AdminLTE 4 does <strong>not</strong> support Internet Explorer. If you need
+                      IE11, stay on
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0"
+                        >AdminLTE 3</a
+                      >
+                      or earlier.
+                    </p>
+                    <h2 id="where-to-next">Where to next</h2>
+                    <ul>
+                      <li>
+                        <strong><a href="getting-started.html">Getting Started</a></strong> — a
+                        working dashboard in 10 minutes
+                      </li>
+                      <li>
+                        <strong><a href="layout.html">Layout</a></strong> — the app-wrapper
+                        structure and responsive options
+                      </li>
+                      <li>
+                        <strong><a href="customization.html">Customization</a></strong> — change
+                        colours, sidebar width, spacing
+                      </li>
+                      <li>
+                        <strong><a href="migration.html">Migration from v3</a></strong> — upgrading
+                        an existing AdminLTE 3 project
+                      </li>
+                    </ul>
+                    <h2 id="releases-and-changelog">Releases and changelog</h2>
+                    <p>
+                      Always grab the latest from the
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases"
+                        >GitHub releases page</a
+                      >
+                      — that’s where the changelog lives.
+                    </p>
+                    <p>
+                      Legacy releases:
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0"
+                        >AdminLTE 3.2</a
+                      >
+                      ·
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18"
+                        >AdminLTE 2</a
+                      >
+                      ·
+                      <a href="https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1"
+                        >AdminLTE 1</a
+                      >
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/javascript/accessibility.html

@@ -615,83 +615,91 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              The Accessibility module provides WCAG 2.1 AA compliance features that are
-              automatically initialized when AdminLTE loads.
-            </p>
-            <h5 id="features">Features</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Feature</th>
-                  <th>WCAG Criterion</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>Skip Links</td>
-                  <td>2.4.1 Bypass Blocks</td>
-                  <td>Adds “Skip to main content” and “Skip to navigation” links.</td>
-                </tr>
-                <tr>
-                  <td>Focus Management</td>
-                  <td>2.4.3 &amp; 2.4.7</td>
-                  <td>Tab cycling, focus trapping in modals, and focus restoration.</td>
-                </tr>
-                <tr>
-                  <td>Keyboard Navigation</td>
-                  <td>2.1.1 Keyboard</td>
-                  <td>Arrow key navigation in menus, Enter/Space for custom buttons.</td>
-                </tr>
-                <tr>
-                  <td>Reduced Motion</td>
-                  <td>2.3.3 Animation</td>
-                  <td>Respects <code>prefers-reduced-motion</code> by disabling animations.</td>
-                </tr>
-                <tr>
-                  <td>Live Announcements</td>
-                  <td>4.1.3 Status Messages</td>
-                  <td>Announces errors and success messages to screen readers.</td>
-                </tr>
-                <tr>
-                  <td>Error Identification</td>
-                  <td>3.3.1 &amp; 3.3.2</td>
-                  <td>Auto-labels unlabelled inputs, announces form validation errors.</td>
-                </tr>
-                <tr>
-                  <td>Table Accessibility</td>
-                  <td>1.3.1 Info &amp; Relationships</td>
-                  <td>Adds <code>scope</code> attributes to table headers automatically.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="configuration">Configuration</h5>
-            <p>
-              The module is initialized in <code>adminlte.ts</code> with all features enabled by
-              default:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#DCDCAA">initAccessibility</span><span style="color:#D4D4D4">({</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      The Accessibility module provides WCAG 2.1 AA compliance features that are
+                      automatically initialized when AdminLTE loads.
+                    </p>
+                    <h5 id="features">Features</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Feature</th>
+                          <th>WCAG Criterion</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>Skip Links</td>
+                          <td>2.4.1 Bypass Blocks</td>
+                          <td>Adds “Skip to main content” and “Skip to navigation” links.</td>
+                        </tr>
+                        <tr>
+                          <td>Focus Management</td>
+                          <td>2.4.3 &amp; 2.4.7</td>
+                          <td>Tab cycling, focus trapping in modals, and focus restoration.</td>
+                        </tr>
+                        <tr>
+                          <td>Keyboard Navigation</td>
+                          <td>2.1.1 Keyboard</td>
+                          <td>Arrow key navigation in menus, Enter/Space for custom buttons.</td>
+                        </tr>
+                        <tr>
+                          <td>Reduced Motion</td>
+                          <td>2.3.3 Animation</td>
+                          <td>
+                            Respects <code>prefers-reduced-motion</code> by disabling animations.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>Live Announcements</td>
+                          <td>4.1.3 Status Messages</td>
+                          <td>Announces errors and success messages to screen readers.</td>
+                        </tr>
+                        <tr>
+                          <td>Error Identification</td>
+                          <td>3.3.1 &amp; 3.3.2</td>
+                          <td>Auto-labels unlabelled inputs, announces form validation errors.</td>
+                        </tr>
+                        <tr>
+                          <td>Table Accessibility</td>
+                          <td>1.3.1 Info &amp; Relationships</td>
+                          <td>
+                            Adds <code>scope</code> attributes to table headers automatically.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="configuration">Configuration</h5>
+                    <p>
+                      The module is initialized in <code>adminlte.ts</code> with all features
+                      enabled by default:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#DCDCAA">initAccessibility</span><span style="color:#D4D4D4">({</span></span>
 <span class="line"><span style="color:#9CDCFE">  announcements:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
 <span class="line"><span style="color:#9CDCFE">  skipLinks:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
 <span class="line"><span style="color:#9CDCFE">  focusManagement:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
 <span class="line"><span style="color:#9CDCFE">  keyboardNavigation:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">,</span></span>
 <span class="line"><span style="color:#9CDCFE">  reducedMotion:</span><span style="color:#569CD6"> true</span></span>
 <span class="line"><span style="color:#D4D4D4">})</span></span></code></pre>
-            <p>Set any option to <code>false</code> to disable that feature.</p>
-            <h5 id="public-api">Public API</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">initAccessibility</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
+                    <p>Set any option to <code>false</code> to disable that feature.</p>
+                    <h5 id="public-api">Public API</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">initAccessibility</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> a11y</span><span style="color:#D4D4D4"> = </span><span style="color:#DCDCAA">initAccessibility</span><span style="color:#D4D4D4">()</span></span>
 <span class="line"></span>
@@ -707,13 +715,13 @@
 <span class="line"></span>
 <span class="line"><span style="color:#6A9955">// Add semantic landmarks to the page</span></span>
 <span class="line"><span style="color:#9CDCFE">a11y</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addLandmarks</span><span style="color:#D4D4D4">()</span></span></code></pre>
-            <h5 id="utility-functions">Utility Functions</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
+                    <h5 id="utility-functions">Utility Functions</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &#39;admin-lte&#39;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#6A9955">// Check color contrast ratio (WCAG 1.4.3)</span></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> result</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">checkColorContrast</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&#39;rgb(0,0,0)&#39;</span><span style="color:#D4D4D4">, </span><span style="color:#CE9178">&#39;rgb(255,255,255)&#39;</span><span style="color:#D4D4D4">)</span></span>
@@ -724,53 +732,59 @@
 <span class="line"></span>
 <span class="line"><span style="color:#6A9955">// Generate a unique ID for ARIA attributes</span></span>
 <span class="line"><span style="color:#9CDCFE">accessibilityUtils</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">generateId</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&#39;modal&#39;</span><span style="color:#D4D4D4">) </span><span style="color:#6A9955">// &quot;modal-x7k2m9p4q&quot;</span></span></code></pre>
-            <h5 id="css-classes">CSS Classes</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Class</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>skip-links</code></td>
-                  <td>Container for skip navigation links.</td>
-                </tr>
-                <tr>
-                  <td><code>skip-link</code></td>
-                  <td>Individual skip link, visible only on focus.</td>
-                </tr>
-                <tr>
-                  <td><code>reduce-motion</code></td>
-                  <td>Added to <code>&lt;body&gt;</code> when user prefers reduced motion.</td>
-                </tr>
-                <tr>
-                  <td><code>sr-only</code></td>
-                  <td>Screen reader only content (visually hidden).</td>
-                </tr>
-                <tr>
-                  <td><code>live-region</code></td>
-                  <td>ARIA live region for dynamic announcements.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="notes">Notes</h5>
-            <ul>
-              <li>
-                The module integrates with Bootstrap’s modal and dropdown events for focus
-                management.
-              </li>
-              <li>
-                Modal Escape key handling is deferred to Bootstrap to respect
-                <code>keyboard: false</code> and stacked modals.
-              </li>
-              <li>
-                Form validation announcements work automatically for any input with HTML5 validation
-                attributes.
-              </li>
-            </ul>
+                    <h5 id="css-classes">CSS Classes</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Class</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>skip-links</code></td>
+                          <td>Container for skip navigation links.</td>
+                        </tr>
+                        <tr>
+                          <td><code>skip-link</code></td>
+                          <td>Individual skip link, visible only on focus.</td>
+                        </tr>
+                        <tr>
+                          <td><code>reduce-motion</code></td>
+                          <td>
+                            Added to <code>&lt;body&gt;</code> when user prefers reduced motion.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>sr-only</code></td>
+                          <td>Screen reader only content (visually hidden).</td>
+                        </tr>
+                        <tr>
+                          <td><code>live-region</code></td>
+                          <td>ARIA live region for dynamic announcements.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="notes">Notes</h5>
+                    <ul>
+                      <li>
+                        The module integrates with Bootstrap’s modal and dropdown events for focus
+                        management.
+                      </li>
+                      <li>
+                        Modal Escape key handling is deferred to Bootstrap to respect
+                        <code>keyboard: false</code> and stacked modals.
+                      </li>
+                      <li>
+                        Form validation announcements work automatically for any input with HTML5
+                        validation attributes.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/javascript/card-widget.html

@@ -615,27 +615,32 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              The CardWidget plugin provides collapse, expand, remove, and maximize functionality
-              for card components.
-            </p>
-            <h5 id="usage">Usage</h5>
-            <p>
-              This plugin is activated via data attributes on buttons inside a
-              <code>.card</code> element.
-            </p>
-            <p><strong>Data API</strong></p>
-            <p>
-              Add <code>data-lte-toggle=&quot;card-collapse&quot;</code> to toggle card body
-              visibility, <code>data-lte-toggle=&quot;card-remove&quot;</code> to remove the card,
-              or <code>data-lte-toggle=&quot;card-maximize&quot;</code> to maximize it.
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card&quot;</span><span style="color:#808080">&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      The CardWidget plugin provides collapse, expand, remove, and maximize
+                      functionality for card components.
+                    </p>
+                    <h5 id="usage">Usage</h5>
+                    <p>
+                      This plugin is activated via data attributes on buttons inside a
+                      <code>.card</code> element.
+                    </p>
+                    <p><strong>Data API</strong></p>
+                    <p>
+                      Add <code>data-lte-toggle=&quot;card-collapse&quot;</code> to toggle card body
+                      visibility, <code>data-lte-toggle=&quot;card-remove&quot;</code> to remove the
+                      card, or <code>data-lte-toggle=&quot;card-maximize&quot;</code> to maximize
+                      it.
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-header&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">    &lt;</span><span style="color:#569CD6">h3</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-title&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Card Title</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">h3</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">    &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-tools&quot;</span><span style="color:#808080">&gt;</span></span>
@@ -654,103 +659,103 @@
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-body&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Card content here.</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-footer&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Card footer</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <h5 id="events">Events</h5>
-            <p>The plugin dispatches the following events on the trigger element:</p>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Event</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>collapsed.lte.card-widget</code></td>
-                  <td>Fired when the card body is collapsed.</td>
-                </tr>
-                <tr>
-                  <td><code>expanded.lte.card-widget</code></td>
-                  <td>Fired when the card body is expanded.</td>
-                </tr>
-                <tr>
-                  <td><code>remove.lte.card-widget</code></td>
-                  <td>Fired when the card is removed.</td>
-                </tr>
-                <tr>
-                  <td><code>maximized.lte.card-widget</code></td>
-                  <td>Fired when the card is maximized.</td>
-                </tr>
-                <tr>
-                  <td><code>minimized.lte.card-widget</code></td>
-                  <td>Fired when the card is minimized (restored from maximized).</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="css-classes">CSS Classes</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Class</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>collapsed-card</code></td>
-                  <td>Applied to the card when collapsed.</td>
-                </tr>
-                <tr>
-                  <td><code>maximized-card</code></td>
-                  <td>Applied to the card when maximized.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="configuration">Configuration</h5>
-            <p>
-              The plugin reads no <code>data-*</code> configuration attributes. To customize
-              behaviour, instantiate it programmatically and pass a config:
-            </p>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Option</th>
-                  <th>Default</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>animationSpeed</code></td>
-                  <td><code>500</code></td>
-                  <td>Slide animation duration in milliseconds.</td>
-                </tr>
-                <tr>
-                  <td><code>collapseTrigger</code></td>
-                  <td><code>[data-lte-toggle=&quot;card-collapse&quot;]</code></td>
-                  <td>CSS selector for collapse buttons.</td>
-                </tr>
-                <tr>
-                  <td><code>removeTrigger</code></td>
-                  <td><code>[data-lte-toggle=&quot;card-remove&quot;]</code></td>
-                  <td>CSS selector for remove buttons.</td>
-                </tr>
-                <tr>
-                  <td><code>maximizeTrigger</code></td>
-                  <td><code>[data-lte-toggle=&quot;card-maximize&quot;]</code></td>
-                  <td>CSS selector for maximize buttons.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="programmatic-api">Programmatic API</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">CardWidget</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
+                    <h5 id="events">Events</h5>
+                    <p>The plugin dispatches the following events on the trigger element:</p>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Event</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>collapsed.lte.card-widget</code></td>
+                          <td>Fired when the card body is collapsed.</td>
+                        </tr>
+                        <tr>
+                          <td><code>expanded.lte.card-widget</code></td>
+                          <td>Fired when the card body is expanded.</td>
+                        </tr>
+                        <tr>
+                          <td><code>remove.lte.card-widget</code></td>
+                          <td>Fired when the card is removed.</td>
+                        </tr>
+                        <tr>
+                          <td><code>maximized.lte.card-widget</code></td>
+                          <td>Fired when the card is maximized.</td>
+                        </tr>
+                        <tr>
+                          <td><code>minimized.lte.card-widget</code></td>
+                          <td>Fired when the card is minimized (restored from maximized).</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="css-classes">CSS Classes</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Class</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>collapsed-card</code></td>
+                          <td>Applied to the card when collapsed.</td>
+                        </tr>
+                        <tr>
+                          <td><code>maximized-card</code></td>
+                          <td>Applied to the card when maximized.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="configuration">Configuration</h5>
+                    <p>
+                      The plugin reads no <code>data-*</code> configuration attributes. To customize
+                      behaviour, instantiate it programmatically and pass a config:
+                    </p>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Option</th>
+                          <th>Default</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>animationSpeed</code></td>
+                          <td><code>500</code></td>
+                          <td>Slide animation duration in milliseconds.</td>
+                        </tr>
+                        <tr>
+                          <td><code>collapseTrigger</code></td>
+                          <td><code>[data-lte-toggle=&quot;card-collapse&quot;]</code></td>
+                          <td>CSS selector for collapse buttons.</td>
+                        </tr>
+                        <tr>
+                          <td><code>removeTrigger</code></td>
+                          <td><code>[data-lte-toggle=&quot;card-remove&quot;]</code></td>
+                          <td>CSS selector for remove buttons.</td>
+                        </tr>
+                        <tr>
+                          <td><code>maximizeTrigger</code></td>
+                          <td><code>[data-lte-toggle=&quot;card-maximize&quot;]</code></td>
+                          <td>CSS selector for maximize buttons.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="programmatic-api">Programmatic API</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">CardWidget</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> card</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;#chart-card&quot;</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> widget</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> CardWidget</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">card</span><span style="color:#D4D4D4">, { </span><span style="color:#9CDCFE">animationSpeed:</span><span style="color:#B5CEA8"> 250</span><span style="color:#D4D4D4"> })</span></span>
@@ -761,90 +766,95 @@
 <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">remove</span><span style="color:#D4D4D4">()       </span><span style="color:#6A9955">// animate out and remove from DOM</span></span>
 <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggle</span><span style="color:#D4D4D4">()       </span><span style="color:#6A9955">// expand / collapse based on current state</span></span>
 <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggleMaximize</span><span style="color:#D4D4D4">()  </span><span style="color:#6A9955">// maximize / minimize based on current state</span></span></code></pre>
-            <h6 id="methods">Methods</h6>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Method</th>
-                  <th>Returns</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>collapse()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Slides up body and footer, adds <code>collapsed-card</code>. Fires
-                    <code>collapsed.lte.card-widget</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>expand()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Slides down body and footer, removes <code>collapsed-card</code>. Fires
-                    <code>expanded.lte.card-widget</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>toggle()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Calls <code>collapse()</code> or <code>expand()</code> based on the
-                    <code>collapsed-card</code> class.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>maximize()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Sets the card to fixed fullscreen positioning, adds <code>maximized-card</code>.
-                    Fires <code>maximized.lte.card-widget</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>minimize()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Restores original size, removes <code>maximized-card</code>. Fires
-                    <code>minimized.lte.card-widget</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>toggleMaximize()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Calls <code>maximize()</code> or <code>minimize()</code> based on the
-                    <code>maximized-card</code> class.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>remove()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Animates the card out and removes it from the DOM. Fires
-                    <code>remove.lte.card-widget</code>.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="notes">Notes</h5>
-            <ul>
-              <li>
-                Nested cards are handled correctly: collapsing a parent card does not affect child
-                cards.
-              </li>
-              <li>
-                Maximizing a card also adds <code>maximized-card</code> to
-                <code>&lt;html&gt;</code> so global styles can react.
-              </li>
-              <li>
-                A card that’s collapsed when you maximize it remembers that — the
-                <code>was-collapsed</code> class tracks this state.
-              </li>
-            </ul>
+                    <h6 id="methods">Methods</h6>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Method</th>
+                          <th>Returns</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>collapse()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Slides up body and footer, adds <code>collapsed-card</code>. Fires
+                            <code>collapsed.lte.card-widget</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>expand()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Slides down body and footer, removes <code>collapsed-card</code>. Fires
+                            <code>expanded.lte.card-widget</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>toggle()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Calls <code>collapse()</code> or <code>expand()</code> based on the
+                            <code>collapsed-card</code> class.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>maximize()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Sets the card to fixed fullscreen positioning, adds
+                            <code>maximized-card</code>. Fires
+                            <code>maximized.lte.card-widget</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>minimize()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Restores original size, removes <code>maximized-card</code>. Fires
+                            <code>minimized.lte.card-widget</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>toggleMaximize()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Calls <code>maximize()</code> or <code>minimize()</code> based on the
+                            <code>maximized-card</code> class.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>remove()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Animates the card out and removes it from the DOM. Fires
+                            <code>remove.lte.card-widget</code>.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="notes">Notes</h5>
+                    <ul>
+                      <li>
+                        Nested cards are handled correctly: collapsing a parent card does not affect
+                        child cards.
+                      </li>
+                      <li>
+                        Maximizing a card also adds <code>maximized-card</code> to
+                        <code>&lt;html&gt;</code> so global styles can react.
+                      </li>
+                      <li>
+                        A card that’s collapsed when you maximize it remembers that — the
+                        <code>was-collapsed</code> class tracks this state.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/javascript/direct-chat.html

@@ -615,20 +615,24 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>The DirectChat plugin toggles the contacts pane in a direct chat widget.</p>
-            <h5 id="usage">Usage</h5>
-            <p>This plugin is activated via data attributes.</p>
-            <p><strong>Data API</strong></p>
-            <p>
-              Add <code>data-lte-toggle=&quot;chat-pane&quot;</code> to a button inside a
-              <code>.direct-chat</code> container to toggle the contacts list.
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card direct-chat&quot;</span><span style="color:#808080">&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>The DirectChat plugin toggles the contacts pane in a direct chat widget.</p>
+                    <h5 id="usage">Usage</h5>
+                    <p>This plugin is activated via data attributes.</p>
+                    <p><strong>Data API</strong></p>
+                    <p>
+                      Add <code>data-lte-toggle=&quot;chat-pane&quot;</code> to a button inside a
+                      <code>.direct-chat</code> container to toggle the contacts list.
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card direct-chat&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-header&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">    &lt;</span><span style="color:#569CD6">h3</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-title&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Direct Chat</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">h3</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">    &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-tools&quot;</span><span style="color:#808080">&gt;</span></span>
@@ -646,83 +650,88 @@
 <span class="line"><span style="color:#808080">    &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <h5 id="events">Events</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Event</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>expanded.lte.direct-chat</code></td>
-                  <td>Fired when the contacts pane is opened.</td>
-                </tr>
-                <tr>
-                  <td><code>collapsed.lte.direct-chat</code></td>
-                  <td>Fired when the contacts pane is closed.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="css-classes">CSS Classes</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Class</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>direct-chat-contacts-open</code></td>
-                  <td>
-                    Applied to the <code>.direct-chat</code> container when the contacts pane is
-                    visible.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="programmatic-api">Programmatic API</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">DirectChat</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
+                    <h5 id="events">Events</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Event</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>expanded.lte.direct-chat</code></td>
+                          <td>Fired when the contacts pane is opened.</td>
+                        </tr>
+                        <tr>
+                          <td><code>collapsed.lte.direct-chat</code></td>
+                          <td>Fired when the contacts pane is closed.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="css-classes">CSS Classes</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Class</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>direct-chat-contacts-open</code></td>
+                          <td>
+                            Applied to the <code>.direct-chat</code> container when the contacts
+                            pane is visible.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="programmatic-api">Programmatic API</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">DirectChat</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> chat</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;.direct-chat&quot;</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> dc</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> DirectChat</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">chat</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#9CDCFE">dc</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggle</span><span style="color:#D4D4D4">()  </span><span style="color:#6A9955">// show or hide the contacts pane</span></span></code></pre>
-            <h6 id="methods">Methods</h6>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Method</th>
-                  <th>Returns</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>toggle()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Toggles the <code>direct-chat-contacts-open</code> class on the
-                    <code>.direct-chat</code> container. Fires
-                    <code>expanded.lte.direct-chat</code> or <code>collapsed.lte.direct-chat</code>.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <p>
-              The constructor takes no config object — pass only the
-              <code>.direct-chat</code> element.
-            </p>
+                    <h6 id="methods">Methods</h6>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Method</th>
+                          <th>Returns</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>toggle()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Toggles the <code>direct-chat-contacts-open</code> class on the
+                            <code>.direct-chat</code> container. Fires
+                            <code>expanded.lte.direct-chat</code> or
+                            <code>collapsed.lte.direct-chat</code>.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <p>
+                      The constructor takes no config object — pass only the
+                      <code>.direct-chat</code> element.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/javascript/fullscreen.html

@@ -615,52 +615,56 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>The FullScreen plugin toggles the browser’s native fullscreen mode.</p>
-            <h5 id="usage">Usage</h5>
-            <p>This plugin is activated via data attributes.</p>
-            <p><strong>Data API</strong></p>
-            <p>
-              Add <code>data-lte-toggle=&quot;fullscreen&quot;</code> to a button element. Use
-              <code>data-lte-icon=&quot;maximize&quot;</code> and
-              <code>data-lte-icon=&quot;minimize&quot;</code> on child icon elements to toggle their
-              visibility.
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">button</span><span style="color:#9CDCFE"> type</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;button&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;btn&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;fullscreen&quot;</span><span style="color:#808080">&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>The FullScreen plugin toggles the browser’s native fullscreen mode.</p>
+                    <h5 id="usage">Usage</h5>
+                    <p>This plugin is activated via data attributes.</p>
+                    <p><strong>Data API</strong></p>
+                    <p>
+                      Add <code>data-lte-toggle=&quot;fullscreen&quot;</code> to a button element.
+                      Use <code>data-lte-icon=&quot;maximize&quot;</code> and
+                      <code>data-lte-icon=&quot;minimize&quot;</code> on child icon elements to
+                      toggle their visibility.
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">button</span><span style="color:#9CDCFE"> type</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;button&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;btn&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;fullscreen&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> data-lte-icon</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;maximize&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;bi bi-arrows-fullscreen&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> data-lte-icon</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;minimize&quot;</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;bi bi-fullscreen-exit d-none&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">button</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <h5 id="events">Events</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Event</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>maximized.lte.fullscreen</code></td>
-                  <td>Fired when entering fullscreen mode.</td>
-                </tr>
-                <tr>
-                  <td><code>minimized.lte.fullscreen</code></td>
-                  <td>Fired when exiting fullscreen mode.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="programmatic-api">Programmatic API</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">FullScreen</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
+                    <h5 id="events">Events</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Event</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>maximized.lte.fullscreen</code></td>
+                          <td>Fired when entering fullscreen mode.</td>
+                        </tr>
+                        <tr>
+                          <td><code>minimized.lte.fullscreen</code></td>
+                          <td>Fired when exiting fullscreen mode.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="programmatic-api">Programmatic API</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">FullScreen</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> btn</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&#39;[data-lte-toggle=&quot;fullscreen&quot;]&#39;</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> fs</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> FullScreen</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">btn</span><span style="color:#D4D4D4">)</span></span>
@@ -668,68 +672,75 @@
 <span class="line"><span style="color:#9CDCFE">fs</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggleFullScreen</span><span style="color:#D4D4D4">()  </span><span style="color:#6A9955">// enter or exit based on current state</span></span>
 <span class="line"><span style="color:#9CDCFE">fs</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">inFullScreen</span><span style="color:#D4D4D4">()      </span><span style="color:#6A9955">// request fullscreen</span></span>
 <span class="line"><span style="color:#9CDCFE">fs</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">outFullscreen</span><span style="color:#D4D4D4">()     </span><span style="color:#6A9955">// exit fullscreen</span></span></code></pre>
-            <h6 id="methods">Methods</h6>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Method</th>
-                  <th>Returns</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>toggleFullScreen()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Calls <code>inFullScreen()</code> if not in fullscreen, otherwise
-                    <code>outFullscreen()</code>. Checks
-                    <code>document.fullscreenEnabled</code> first.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>inFullScreen()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Calls <code>document.documentElement.requestFullscreen()</code>, toggles
-                    <code>.d-none</code> on the maximize/minimize icons. Fires
-                    <code>maximized.lte.fullscreen</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>outFullscreen()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Calls <code>document.exitFullscreen()</code>, toggles <code>.d-none</code> on
-                    the maximize/minimize icons. Fires <code>minimized.lte.fullscreen</code>.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <p>The constructor takes no config — pass only the trigger element.</p>
-            <h5 id="notes">Notes</h5>
-            <ul>
-              <li>
-                Requires browser support for the
-                <a href="https://developer.mozilla.org/docs/Web/API/Fullscreen_API"
-                  >Fullscreen API</a
-                >. Check <code>document.fullscreenEnabled</code> before invoking.
-              </li>
-              <li>
-                The maximize icon is hidden via the <code>d-none</code> Bootstrap utility class (not
-                inline <code>display</code>) so it doesn’t override the icon library’s natural
-                display value — this works correctly with FontAwesome, Lucide, Tabler Icons, etc.
-              </li>
-              <li>
-                Fullscreen on <code>document.documentElement</code> (i.e. <code>&lt;html&gt;</code>)
-                means the entire page goes fullscreen. To fullscreen just a card, use the
-                <a href="card-widget.html#programmatic-api"
-                  >CardWidget <code>maximize()</code> method</a
-                >
-                instead.
-              </li>
-            </ul>
+                    <h6 id="methods">Methods</h6>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Method</th>
+                          <th>Returns</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>toggleFullScreen()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Calls <code>inFullScreen()</code> if not in fullscreen, otherwise
+                            <code>outFullscreen()</code>. Checks
+                            <code>document.fullscreenEnabled</code> first.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>inFullScreen()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Calls <code>document.documentElement.requestFullscreen()</code>, toggles
+                            <code>.d-none</code> on the maximize/minimize icons. Fires
+                            <code>maximized.lte.fullscreen</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>outFullscreen()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Calls <code>document.exitFullscreen()</code>, toggles
+                            <code>.d-none</code> on the maximize/minimize icons. Fires
+                            <code>minimized.lte.fullscreen</code>.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <p>The constructor takes no config — pass only the trigger element.</p>
+                    <h5 id="notes">Notes</h5>
+                    <ul>
+                      <li>
+                        Requires browser support for the
+                        <a href="https://developer.mozilla.org/docs/Web/API/Fullscreen_API"
+                          >Fullscreen API</a
+                        >. Check <code>document.fullscreenEnabled</code> before invoking.
+                      </li>
+                      <li>
+                        The maximize icon is hidden via the <code>d-none</code> Bootstrap utility
+                        class (not inline <code>display</code>) so it doesn’t override the icon
+                        library’s natural display value — this works correctly with FontAwesome,
+                        Lucide, Tabler Icons, etc.
+                      </li>
+                      <li>
+                        Fullscreen on <code>document.documentElement</code> (i.e.
+                        <code>&lt;html&gt;</code>) means the entire page goes fullscreen. To
+                        fullscreen just a card, use the
+                        <a href="card-widget.html#programmatic-api"
+                          >CardWidget <code>maximize()</code> method</a
+                        >
+                        instead.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/javascript/layout.html

@@ -615,63 +615,67 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              The Layout plugin manages CSS transitions during layout changes and signals when the
-              app has finished loading.
-            </p>
-            <h5 id="behavior">Behavior</h5>
-            <p>The Layout plugin performs two key tasks automatically:</p>
-            <ol>
-              <li>
-                <p>
-                  <strong>Hold Transitions</strong> - During window resize, CSS transitions on the
-                  sidebar, navbar, and content area are temporarily disabled to prevent visual
-                  glitches. The <code>hold-transition</code> class is added to
-                  <code>&lt;body&gt;</code> for the duration.
-                </p>
-              </li>
-              <li>
-                <p>
-                  <strong>App Loaded Signal</strong> - After a 400ms delay on DOMContentLoaded, the
-                  <code>app-loaded</code> class is added to <code>&lt;body&gt;</code>. Use this
-                  class in CSS to defer animations until the app is ready, preventing flicker on
-                  initial page load.
-                </p>
-              </li>
-            </ol>
-            <h5 id="css-classes">CSS Classes</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Class</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>hold-transition</code></td>
-                  <td>
-                    Temporarily disables CSS transitions on layout elements. Applied during window
-                    resize.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>app-loaded</code></td>
-                  <td>
-                    Added to <code>&lt;body&gt;</code> after the initial layout is ready. Use for
-                    entrance animations.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="usage-in-css">Usage in CSS</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="css"
-            ><code><span class="line"><span style="color:#6A9955">/* Hide sidebar transitions until the app is loaded */</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      The Layout plugin manages CSS transitions during layout changes and signals
+                      when the app has finished loading.
+                    </p>
+                    <h5 id="behavior">Behavior</h5>
+                    <p>The Layout plugin performs two key tasks automatically:</p>
+                    <ol>
+                      <li>
+                        <p>
+                          <strong>Hold Transitions</strong> - During window resize, CSS transitions
+                          on the sidebar, navbar, and content area are temporarily disabled to
+                          prevent visual glitches. The <code>hold-transition</code> class is added
+                          to <code>&lt;body&gt;</code> for the duration.
+                        </p>
+                      </li>
+                      <li>
+                        <p>
+                          <strong>App Loaded Signal</strong> - After a 400ms delay on
+                          DOMContentLoaded, the <code>app-loaded</code> class is added to
+                          <code>&lt;body&gt;</code>. Use this class in CSS to defer animations until
+                          the app is ready, preventing flicker on initial page load.
+                        </p>
+                      </li>
+                    </ol>
+                    <h5 id="css-classes">CSS Classes</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Class</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>hold-transition</code></td>
+                          <td>
+                            Temporarily disables CSS transitions on layout elements. Applied during
+                            window resize.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>app-loaded</code></td>
+                          <td>
+                            Added to <code>&lt;body&gt;</code> after the initial layout is ready.
+                            Use for entrance animations.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="usage-in-css">Usage in CSS</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="css"
+                    ><code><span class="line"><span style="color:#6A9955">/* Hide sidebar transitions until the app is loaded */</span></span>
 <span class="line"><span style="color:#D7BA7D">body:not</span><span style="color:#D4D4D4">(</span><span style="color:#D7BA7D">.app-loaded</span><span style="color:#D4D4D4">) </span><span style="color:#D7BA7D">.app-sidebar</span><span style="color:#D4D4D4"> {</span></span>
 <span class="line"><span style="color:#9CDCFE">  transition</span><span style="color:#D4D4D4">: </span><span style="color:#CE9178">none</span><span style="color:#569CD6"> !important</span><span style="color:#D4D4D4">;</span></span>
 <span class="line"><span style="color:#D4D4D4">}</span></span>
@@ -680,62 +684,66 @@
 <span class="line"><span style="color:#D7BA7D">body.app-loaded</span><span style="color:#D7BA7D"> .app-sidebar</span><span style="color:#D4D4D4"> {</span></span>
 <span class="line"><span style="color:#9CDCFE">  transition</span><span style="color:#D4D4D4">: width </span><span style="color:#B5CEA8">0.3s</span><span style="color:#CE9178"> ease</span><span style="color:#D4D4D4">;</span></span>
 <span class="line"><span style="color:#D4D4D4">}</span></span></code></pre>
-            <h5 id="programmatic-api">Programmatic API</h5>
-            <p>
-              The Layout plugin self-initializes on <code>DOMContentLoaded</code> — there’s nothing
-              to wire up manually. The only public method is exposed for advanced cases where you
-              want to suppress transitions around your own DOM mutations:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">Layout</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
+                    <h5 id="programmatic-api">Programmatic API</h5>
+                    <p>
+                      The Layout plugin self-initializes on <code>DOMContentLoaded</code> — there’s
+                      nothing to wire up manually. The only public method is exposed for advanced
+                      cases where you want to suppress transitions around your own DOM mutations:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">Layout</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> layout</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> Layout</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">body</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"><span style="color:#9CDCFE">layout</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">holdTransition</span><span style="color:#D4D4D4">(</span><span style="color:#B5CEA8">200</span><span style="color:#D4D4D4">)   </span><span style="color:#6A9955">// disable transitions for 200ms</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#6A9955">// ... do something that would otherwise animate awkwardly</span></span>
 <span class="line"><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">body</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">classList</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggle</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;sidebar-mini&quot;</span><span style="color:#D4D4D4">)</span></span></code></pre>
-            <h6 id="methods">Methods</h6>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Method</th>
-                  <th>Returns</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>holdTransition(time?)</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Adds <code>hold-transition</code> to <code>&lt;body&gt;</code>, removes it after
-                    <code>time</code> milliseconds (default <code>100</code>). Use to suppress CSS
-                    transitions during programmatic layout changes.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="notes">Notes</h5>
-            <ul>
-              <li>
-                The <code>hold-transition</code> class is automatically removed after the timeout.
-                You don’t need to clean up.
-              </li>
-              <li>
-                No data attributes — the plugin reads no config and initialises with the body
-                element on page load.
-              </li>
-              <li>
-                If you need to detect when the initial page-load animations are done, watch for the
-                <code>app-loaded</code> class on <code>&lt;body&gt;</code> or listen for the
-                standard <code>load</code> event.
-              </li>
-            </ul>
+                    <h6 id="methods">Methods</h6>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Method</th>
+                          <th>Returns</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>holdTransition(time?)</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Adds <code>hold-transition</code> to <code>&lt;body&gt;</code>, removes
+                            it after <code>time</code> milliseconds (default <code>100</code>). Use
+                            to suppress CSS transitions during programmatic layout changes.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="notes">Notes</h5>
+                    <ul>
+                      <li>
+                        The <code>hold-transition</code> class is automatically removed after the
+                        timeout. You don’t need to clean up.
+                      </li>
+                      <li>
+                        No data attributes — the plugin reads no config and initialises with the
+                        body element on page load.
+                      </li>
+                      <li>
+                        If you need to detect when the initial page-load animations are done, watch
+                        for the <code>app-loaded</code> class on <code>&lt;body&gt;</code> or listen
+                        for the standard <code>load</code> event.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/javascript/pushmenu.html

@@ -615,255 +615,272 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              The PushMenu plugin toggles the sidebar between expanded and collapsed states. It
-              handles responsive behavior, optional localStorage persistence, and overlay management
-              on mobile.
-            </p>
-            <h5 id="usage">Usage</h5>
-            <p>
-              This plugin is activated via data attributes on the sidebar element and toggle
-              buttons.
-            </p>
-            <p><strong>Data API</strong></p>
-            <p>
-              Add <code>data-lte-toggle=&quot;sidebar&quot;</code> to any button or link to toggle
-              the sidebar.
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Toggle Sidebar</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <h5 id="configuration">Configuration</h5>
-            <p>
-              Configure the sidebar via data attributes on the <code>.app-sidebar</code> element:
-            </p>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Attribute</th>
-                  <th>Default</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>data-sidebar-breakpoint</code></td>
-                  <td><code>992</code></td>
-                  <td>Screen width (px) below which the sidebar is considered mobile.</td>
-                </tr>
-                <tr>
-                  <td><code>data-enable-persistence</code></td>
-                  <td><code>false</code></td>
-                  <td>Save sidebar state to localStorage across page loads.</td>
-                </tr>
-              </tbody>
-            </table>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">aside</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;app-sidebar&quot;</span><span style="color:#9CDCFE"> data-enable-persistence</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;true&quot;</span><span style="color:#9CDCFE"> data-sidebar-breakpoint</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;768&quot;</span><span style="color:#808080">&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      The PushMenu plugin toggles the sidebar between expanded and collapsed states.
+                      It handles responsive behavior, optional localStorage persistence, and overlay
+                      management on mobile.
+                    </p>
+                    <h5 id="usage">Usage</h5>
+                    <p>
+                      This plugin is activated via data attributes on the sidebar element and toggle
+                      buttons.
+                    </p>
+                    <p><strong>Data API</strong></p>
+                    <p>
+                      Add <code>data-lte-toggle=&quot;sidebar&quot;</code> to any button or link to
+                      toggle the sidebar.
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;sidebar&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Toggle Sidebar</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span></code></pre>
+                    <h5 id="configuration">Configuration</h5>
+                    <p>
+                      Configure the sidebar via data attributes on the
+                      <code>.app-sidebar</code> element:
+                    </p>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Attribute</th>
+                          <th>Default</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>data-sidebar-breakpoint</code></td>
+                          <td><code>992</code></td>
+                          <td>Screen width (px) below which the sidebar is considered mobile.</td>
+                        </tr>
+                        <tr>
+                          <td><code>data-enable-persistence</code></td>
+                          <td><code>false</code></td>
+                          <td>Save sidebar state to localStorage across page loads.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">aside</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;app-sidebar&quot;</span><span style="color:#9CDCFE"> data-enable-persistence</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;true&quot;</span><span style="color:#9CDCFE"> data-sidebar-breakpoint</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;768&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#6A9955">  &lt;!-- sidebar content --&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">aside</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <h5 id="responsive-behavior">Responsive Behavior</h5>
-            <ul>
-              <li>
-                <strong>Desktop</strong> (above breakpoint): Sidebar is expanded by default.
-                Collapse is remembered if persistence is enabled.
-              </li>
-              <li>
-                <strong>Mobile</strong> (at or below breakpoint): Sidebar is collapsed by default.
-                An overlay appears when the sidebar is open, clicking it collapses the sidebar.
-              </li>
-            </ul>
-            <h5 id="css-classes">CSS Classes</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Class</th>
-                  <th>Applied to</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>sidebar-collapse</code></td>
-                  <td><code>&lt;body&gt;</code></td>
-                  <td>Sidebar is collapsed.</td>
-                </tr>
-                <tr>
-                  <td><code>sidebar-open</code></td>
-                  <td><code>&lt;body&gt;</code></td>
-                  <td>Sidebar is explicitly open on mobile.</td>
-                </tr>
-                <tr>
-                  <td><code>sidebar-mini</code></td>
-                  <td><code>&lt;body&gt;</code></td>
-                  <td>Enables mini sidebar mode (icons only when collapsed).</td>
-                </tr>
-                <tr>
-                  <td><code>sidebar-without-hover</code></td>
-                  <td><code>&lt;body&gt;</code></td>
-                  <td>Prevents collapsed sidebar from expanding on hover.</td>
-                </tr>
-                <tr>
-                  <td><code>sidebar-expand-{breakpoint}</code></td>
-                  <td><code>&lt;body&gt;</code></td>
-                  <td>
-                    Sets the responsive breakpoint (<code>sm</code>, <code>md</code>,
-                    <code>lg</code>, <code>xl</code>, <code>xxl</code>).
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="events">Events</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Event</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>open.lte.push-menu</code></td>
-                  <td>Fired when the sidebar is expanded.</td>
-                </tr>
-                <tr>
-                  <td><code>collapse.lte.push-menu</code></td>
-                  <td>Fired when the sidebar is collapsed.</td>
-                </tr>
-              </tbody>
-            </table>
-            <p>Both events bubble. Listen on <code>document</code> for a global hook:</p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;open.lte.push-menu&quot;</span><span style="color:#D4D4D4">, () </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
+                    <h5 id="responsive-behavior">Responsive Behavior</h5>
+                    <ul>
+                      <li>
+                        <strong>Desktop</strong> (above breakpoint): Sidebar is expanded by default.
+                        Collapse is remembered if persistence is enabled.
+                      </li>
+                      <li>
+                        <strong>Mobile</strong> (at or below breakpoint): Sidebar is collapsed by
+                        default. An overlay appears when the sidebar is open, clicking it collapses
+                        the sidebar.
+                      </li>
+                    </ul>
+                    <h5 id="css-classes">CSS Classes</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Class</th>
+                          <th>Applied to</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>sidebar-collapse</code></td>
+                          <td><code>&lt;body&gt;</code></td>
+                          <td>Sidebar is collapsed.</td>
+                        </tr>
+                        <tr>
+                          <td><code>sidebar-open</code></td>
+                          <td><code>&lt;body&gt;</code></td>
+                          <td>Sidebar is explicitly open on mobile.</td>
+                        </tr>
+                        <tr>
+                          <td><code>sidebar-mini</code></td>
+                          <td><code>&lt;body&gt;</code></td>
+                          <td>Enables mini sidebar mode (icons only when collapsed).</td>
+                        </tr>
+                        <tr>
+                          <td><code>sidebar-without-hover</code></td>
+                          <td><code>&lt;body&gt;</code></td>
+                          <td>Prevents collapsed sidebar from expanding on hover.</td>
+                        </tr>
+                        <tr>
+                          <td><code>sidebar-expand-{breakpoint}</code></td>
+                          <td><code>&lt;body&gt;</code></td>
+                          <td>
+                            Sets the responsive breakpoint (<code>sm</code>, <code>md</code>,
+                            <code>lg</code>, <code>xl</code>, <code>xxl</code>).
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="events">Events</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Event</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>open.lte.push-menu</code></td>
+                          <td>Fired when the sidebar is expanded.</td>
+                        </tr>
+                        <tr>
+                          <td><code>collapse.lte.push-menu</code></td>
+                          <td>Fired when the sidebar is collapsed.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <p>Both events bubble. Listen on <code>document</code> for a global hook:</p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;open.lte.push-menu&quot;</span><span style="color:#D4D4D4">, () </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
 <span class="line"><span style="color:#9CDCFE">  console</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">log</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;Sidebar opened&quot;</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"><span style="color:#D4D4D4">})</span></span></code></pre>
-            <h5 id="programmatic-api">Programmatic API</h5>
-            <p>
-              Import the class and instantiate it on any element (typically the sidebar toggle
-              button or <code>document.body</code>):
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">PushMenu</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
+                    <h5 id="programmatic-api">Programmatic API</h5>
+                    <p>
+                      Import the class and instantiate it on any element (typically the sidebar
+                      toggle button or <code>document.body</code>):
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">PushMenu</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> sidebar</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> PushMenu</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&#39;[data-lte-toggle=&quot;sidebar&quot;]&#39;</span><span style="color:#D4D4D4">), {</span></span>
 <span class="line"><span style="color:#9CDCFE">  sidebarBreakpoint:</span><span style="color:#B5CEA8"> 992</span><span style="color:#D4D4D4">,</span></span>
 <span class="line"><span style="color:#9CDCFE">  enablePersistence:</span><span style="color:#569CD6"> false</span></span>
 <span class="line"><span style="color:#D4D4D4">})</span></span></code></pre>
-            <h6 id="methods">Methods</h6>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Method</th>
-                  <th>Returns</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>toggle()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Expands or collapses the sidebar based on current state. Persists state if
-                    <code>enablePersistence</code> is <code>true</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>expand()</code></td>
-                  <td><code>void</code></td>
-                  <td>Expands the sidebar. Fires <code>open.lte.push-menu</code>.</td>
-                </tr>
-                <tr>
-                  <td><code>collapse()</code></td>
-                  <td><code>void</code></td>
-                  <td>Collapses the sidebar. Fires <code>collapse.lte.push-menu</code>.</td>
-                </tr>
-                <tr>
-                  <td><code>isCollapsed()</code></td>
-                  <td><code>boolean</code></td>
-                  <td>
-                    <code>true</code> if <code>&lt;body&gt;</code> has
-                    <code>sidebar-collapse</code> class.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>isExplicitlyOpen()</code></td>
-                  <td><code>boolean</code></td>
-                  <td>
-                    <code>true</code> if <code>&lt;body&gt;</code> has
-                    <code>sidebar-open</code> (mobile, user opened it).
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>isMiniMode()</code></td>
-                  <td><code>boolean</code></td>
-                  <td>
-                    <code>true</code> if <code>&lt;body&gt;</code> has <code>sidebar-mini</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>isMobileSize()</code></td>
-                  <td><code>boolean</code></td>
-                  <td><code>true</code> if <code>window.innerWidth ≤ sidebarBreakpoint</code>.</td>
-                </tr>
-                <tr>
-                  <td><code>saveSidebarState(state)</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Manually save state to localStorage (<code>&quot;sidebar-open&quot;</code> or
-                    <code>&quot;sidebar-collapse&quot;</code>).
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>loadSidebarState()</code></td>
-                  <td><code>void</code></td>
-                  <td>Read state from localStorage and apply it.</td>
-                </tr>
-                <tr>
-                  <td><code>clearSidebarState()</code></td>
-                  <td><code>void</code></td>
-                  <td>Remove saved state from localStorage.</td>
-                </tr>
-                <tr>
-                  <td><code>updateStateByResponsiveLogic()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Recompute correct state based on viewport size (collapse on mobile, expand on
-                    desktop unless mini). Called automatically on resize.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h6 id="storage-key">Storage key</h6>
-            <p>
-              When <code>enablePersistence</code> is enabled, the plugin reads/writes
-              <code>localStorage.getItem(&quot;lte.sidebar.state&quot;)</code>. The stored value is
-              one of:
-            </p>
-            <ul>
-              <li><code>&quot;sidebar-open&quot;</code> — user wants the sidebar expanded</li>
-              <li><code>&quot;sidebar-collapse&quot;</code> — user wants it collapsed</li>
-            </ul>
-            <h5 id="example">Example</h5>
-            <a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>
+                    <h6 id="methods">Methods</h6>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Method</th>
+                          <th>Returns</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>toggle()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Expands or collapses the sidebar based on current state. Persists state
+                            if <code>enablePersistence</code> is <code>true</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>expand()</code></td>
+                          <td><code>void</code></td>
+                          <td>Expands the sidebar. Fires <code>open.lte.push-menu</code>.</td>
+                        </tr>
+                        <tr>
+                          <td><code>collapse()</code></td>
+                          <td><code>void</code></td>
+                          <td>Collapses the sidebar. Fires <code>collapse.lte.push-menu</code>.</td>
+                        </tr>
+                        <tr>
+                          <td><code>isCollapsed()</code></td>
+                          <td><code>boolean</code></td>
+                          <td>
+                            <code>true</code> if <code>&lt;body&gt;</code> has
+                            <code>sidebar-collapse</code> class.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>isExplicitlyOpen()</code></td>
+                          <td><code>boolean</code></td>
+                          <td>
+                            <code>true</code> if <code>&lt;body&gt;</code> has
+                            <code>sidebar-open</code> (mobile, user opened it).
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>isMiniMode()</code></td>
+                          <td><code>boolean</code></td>
+                          <td>
+                            <code>true</code> if <code>&lt;body&gt;</code> has
+                            <code>sidebar-mini</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>isMobileSize()</code></td>
+                          <td><code>boolean</code></td>
+                          <td>
+                            <code>true</code> if <code>window.innerWidth ≤ sidebarBreakpoint</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>saveSidebarState(state)</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Manually save state to localStorage (<code
+                              >&quot;sidebar-open&quot;</code
+                            >
+                            or <code>&quot;sidebar-collapse&quot;</code>).
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>loadSidebarState()</code></td>
+                          <td><code>void</code></td>
+                          <td>Read state from localStorage and apply it.</td>
+                        </tr>
+                        <tr>
+                          <td><code>clearSidebarState()</code></td>
+                          <td><code>void</code></td>
+                          <td>Remove saved state from localStorage.</td>
+                        </tr>
+                        <tr>
+                          <td><code>updateStateByResponsiveLogic()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Recompute correct state based on viewport size (collapse on mobile,
+                            expand on desktop unless mini). Called automatically on resize.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h6 id="storage-key">Storage key</h6>
+                    <p>
+                      When <code>enablePersistence</code> is enabled, the plugin reads/writes
+                      <code>localStorage.getItem(&quot;lte.sidebar.state&quot;)</code>. The stored
+                      value is one of:
+                    </p>
+                    <ul>
+                      <li>
+                        <code>&quot;sidebar-open&quot;</code> — user wants the sidebar expanded
+                      </li>
+                      <li><code>&quot;sidebar-collapse&quot;</code> — user wants it collapsed</li>
+                    </ul>
+                    <h5 id="example">Example</h5>
+                    <a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/javascript/treeview.html

@@ -615,25 +615,29 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              The Treeview plugin converts a nested list into a collapsible tree where submenus
-              expand and contract on click. It’s what powers the sidebar navigation in the demo
-              dashboards.
-            </p>
-            <h5 id="usage">Usage</h5>
-            <h6 id="data-api">Data API</h6>
-            <p>
-              Add <code>data-lte-toggle=&quot;treeview&quot;</code> to the parent
-              <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code>. Inside, mark items that have
-              children with <code>.nav-item</code> and put the submenu in a nested
-              <code>&lt;ul class=&quot;nav-treeview&quot;&gt;</code>:
-            </p>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav sidebar-menu flex-column&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;treeview&quot;</span><span style="color:#9CDCFE"> role</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;menu&quot;</span><span style="color:#808080">&gt;</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      The Treeview plugin converts a nested list into a collapsible tree where
+                      submenus expand and contract on click. It’s what powers the sidebar navigation
+                      in the demo dashboards.
+                    </p>
+                    <h5 id="usage">Usage</h5>
+                    <h6 id="data-api">Data API</h6>
+                    <p>
+                      Add <code>data-lte-toggle=&quot;treeview&quot;</code> to the parent
+                      <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code>. Inside, mark items that
+                      have children with <code>.nav-item</code> and put the submenu in a nested
+                      <code>&lt;ul class=&quot;nav-treeview&quot;&gt;</code>:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav sidebar-menu flex-column&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;treeview&quot;</span><span style="color:#9CDCFE"> role</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;menu&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;</span><span style="color:#569CD6">li</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-item&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">    &lt;</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-link&quot;</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;#&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">      &lt;</span><span style="color:#569CD6">i</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav-icon bi bi-speedometer&quot;</span><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">i</span><span style="color:#808080">&gt;</span></span>
@@ -658,48 +662,49 @@
 <span class="line"><span style="color:#808080">    &lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">  &lt;/</span><span style="color:#569CD6">li</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <p>
-              To start with a submenu pre-expanded, add <code>menu-open</code> to its
-              <code>.nav-item</code>.
-            </p>
-            <h5 id="configuration">Configuration</h5>
-            <p>
-              Configure via <code>data-*</code> attributes on the parent <code>&lt;ul&gt;</code>:
-            </p>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Attribute</th>
-                  <th>Default</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>data-accordion</code></td>
-                  <td><code>true</code></td>
-                  <td>
-                    Close other open submenus when one opens. Set <code>false</code> for
-                    non-accordion behaviour (multiple submenus open at once).
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>data-animation-speed</code></td>
-                  <td><code>300</code></td>
-                  <td>
-                    Slide animation duration in milliseconds. Set <code>0</code> to disable
-                    animation.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="html"
-            ><code><span class="line"><span style="color:#6A9955">&lt;!-- Non-accordion mode: multiple submenus can stay open --&gt;</span></span>
+                    <p>
+                      To start with a submenu pre-expanded, add <code>menu-open</code> to its
+                      <code>.nav-item</code>.
+                    </p>
+                    <h5 id="configuration">Configuration</h5>
+                    <p>
+                      Configure via <code>data-*</code> attributes on the parent
+                      <code>&lt;ul&gt;</code>:
+                    </p>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Attribute</th>
+                          <th>Default</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>data-accordion</code></td>
+                          <td><code>true</code></td>
+                          <td>
+                            Close other open submenus when one opens. Set <code>false</code> for
+                            non-accordion behaviour (multiple submenus open at once).
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>data-animation-speed</code></td>
+                          <td><code>300</code></td>
+                          <td>
+                            Slide animation duration in milliseconds. Set <code>0</code> to disable
+                            animation.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="html"
+                    ><code><span class="line"><span style="color:#6A9955">&lt;!-- Non-accordion mode: multiple submenus can stay open --&gt;</span></span>
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav sidebar-menu&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;treeview&quot;</span><span style="color:#9CDCFE"> data-accordion</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;false&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#D4D4D4">  …</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span>
@@ -708,76 +713,76 @@
 <span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">ul</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;nav sidebar-menu&quot;</span><span style="color:#9CDCFE"> data-lte-toggle</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;treeview&quot;</span><span style="color:#9CDCFE"> data-animation-speed</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;150&quot;</span><span style="color:#808080">&gt;</span></span>
 <span class="line"><span style="color:#D4D4D4">  …</span></span>
 <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">ul</span><span style="color:#808080">&gt;</span></span></code></pre>
-            <h5 id="css-classes">CSS Classes</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Class</th>
-                  <th>Applied to</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>menu-open</code></td>
-                  <td><code>.nav-item</code> (the parent of a submenu)</td>
-                  <td>The submenu is currently expanded.</td>
-                </tr>
-                <tr>
-                  <td><code>nav-treeview</code></td>
-                  <td><code>&lt;ul&gt;</code> (nested)</td>
-                  <td>Marks a submenu so the plugin recognises it.</td>
-                </tr>
-                <tr>
-                  <td><code>nav-arrow</code></td>
-                  <td><code>&lt;i&gt;</code> inside <code>.nav-link</code></td>
-                  <td>The chevron icon that rotates when the submenu opens.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="events">Events</h5>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Event</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>expanded.lte.treeview</code></td>
-                  <td>Fired on the <code>.nav-item</code> when its submenu opens.</td>
-                </tr>
-                <tr>
-                  <td><code>collapsed.lte.treeview</code></td>
-                  <td>Fired on the <code>.nav-item</code> when its submenu closes.</td>
-                </tr>
-                <tr>
-                  <td><code>load.lte.treeview</code></td>
-                  <td>
-                    Fired once per page load for any submenu that’s already expanded via the
-                    <code>menu-open</code> class.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;expanded.lte.treeview&quot;</span><span style="color:#D4D4D4">, (</span><span style="color:#9CDCFE">e</span><span style="color:#D4D4D4">) </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
+                    <h5 id="css-classes">CSS Classes</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Class</th>
+                          <th>Applied to</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>menu-open</code></td>
+                          <td><code>.nav-item</code> (the parent of a submenu)</td>
+                          <td>The submenu is currently expanded.</td>
+                        </tr>
+                        <tr>
+                          <td><code>nav-treeview</code></td>
+                          <td><code>&lt;ul&gt;</code> (nested)</td>
+                          <td>Marks a submenu so the plugin recognises it.</td>
+                        </tr>
+                        <tr>
+                          <td><code>nav-arrow</code></td>
+                          <td><code>&lt;i&gt;</code> inside <code>.nav-link</code></td>
+                          <td>The chevron icon that rotates when the submenu opens.</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="events">Events</h5>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Event</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>expanded.lte.treeview</code></td>
+                          <td>Fired on the <code>.nav-item</code> when its submenu opens.</td>
+                        </tr>
+                        <tr>
+                          <td><code>collapsed.lte.treeview</code></td>
+                          <td>Fired on the <code>.nav-item</code> when its submenu closes.</td>
+                        </tr>
+                        <tr>
+                          <td><code>load.lte.treeview</code></td>
+                          <td>
+                            Fired once per page load for any submenu that’s already expanded via the
+                            <code>menu-open</code> class.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">addEventListener</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;expanded.lte.treeview&quot;</span><span style="color:#D4D4D4">, (</span><span style="color:#9CDCFE">e</span><span style="color:#D4D4D4">) </span><span style="color:#569CD6">=&gt;</span><span style="color:#D4D4D4"> {</span></span>
 <span class="line"><span style="color:#9CDCFE">  console</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">log</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;Opened submenu inside:&quot;</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">e</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">target</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"><span style="color:#D4D4D4">})</span></span></code></pre>
-            <h5 id="programmatic-api">Programmatic API</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="js"
-            ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">Treeview</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
+                    <h5 id="programmatic-api">Programmatic API</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">Treeview</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> item</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;.sidebar-menu .nav-item&quot;</span><span style="color:#D4D4D4">)</span></span>
 <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> tv</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> Treeview</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">item</span><span style="color:#D4D4D4">, { </span><span style="color:#9CDCFE">accordion:</span><span style="color:#569CD6"> true</span><span style="color:#D4D4D4">, </span><span style="color:#9CDCFE">animationSpeed:</span><span style="color:#B5CEA8"> 300</span><span style="color:#D4D4D4"> })</span></span>
@@ -785,69 +790,76 @@
 <span class="line"><span style="color:#9CDCFE">tv</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">open</span><span style="color:#D4D4D4">()    </span><span style="color:#6A9955">// expand this item&#39;s submenu</span></span>
 <span class="line"><span style="color:#9CDCFE">tv</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">close</span><span style="color:#D4D4D4">()   </span><span style="color:#6A9955">// collapse it</span></span>
 <span class="line"><span style="color:#9CDCFE">tv</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggle</span><span style="color:#D4D4D4">()  </span><span style="color:#6A9955">// toggle</span></span></code></pre>
-            <h6 id="methods">Methods</h6>
-
-            <table>
-              <thead>
-                <tr>
-                  <th>Method</th>
-                  <th>Returns</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>open()</code></td>
-                  <td><code>void</code></td>
-                  <td>
-                    Expands the submenu. If <code>accordion</code> is <code>true</code>, closes
-                    sibling submenus first. Fires <code>expanded.lte.treeview</code>.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>close()</code></td>
-                  <td><code>void</code></td>
-                  <td>Collapses the submenu. Fires <code>collapsed.lte.treeview</code>.</td>
-                </tr>
-                <tr>
-                  <td><code>toggle()</code></td>
-                  <td><code>void</code></td>
-                  <td>Calls <code>open()</code> or <code>close()</code> based on current state.</td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="example">Example</h5>
-            <ul
-              class="nav sidebar-menu flex-column"
-              data-lte-toggle="treeview"
-              role="menu"
-              style="
-                background: var(--bs-tertiary-bg);
-                padding: 0.5rem;
-                border-radius: var(--bs-border-radius);
-              "
-            >
-              <li class="nav-item">
-                <a class="nav-link" href="#"
-                  ><i class="nav-icon bi bi-circle"></i>
-                  <p>One level</p></a
-                >
-              </li>
-              <li class="nav-item menu-open">
-                <a class="nav-link" href="#"
-                  ><i class="nav-icon bi bi-folder"></i>
-                  <p>Multilevel <i class="nav-arrow bi bi-chevron-right"></i></p
-                ></a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="#" class="nav-link"
-                      ><i class="nav-icon bi bi-circle"></i>
-                      <p>Level 2</p></a
+                    <h6 id="methods">Methods</h6>
+
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Method</th>
+                          <th>Returns</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>open()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Expands the submenu. If <code>accordion</code> is <code>true</code>,
+                            closes sibling submenus first. Fires <code>expanded.lte.treeview</code>.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>close()</code></td>
+                          <td><code>void</code></td>
+                          <td>Collapses the submenu. Fires <code>collapsed.lte.treeview</code>.</td>
+                        </tr>
+                        <tr>
+                          <td><code>toggle()</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Calls <code>open()</code> or <code>close()</code> based on current
+                            state.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="example">Example</h5>
+                    <ul
+                      class="nav sidebar-menu flex-column"
+                      data-lte-toggle="treeview"
+                      role="menu"
+                      style="
+                        background: var(--bs-tertiary-bg);
+                        padding: 0.5rem;
+                        border-radius: var(--bs-border-radius);
+                      "
                     >
-                  </li>
-                </ul>
-              </li>
-            </ul>
+                      <li class="nav-item">
+                        <a class="nav-link" href="#"
+                          ><i class="nav-icon bi bi-circle"></i>
+                          <p>One level</p></a
+                        >
+                      </li>
+                      <li class="nav-item menu-open">
+                        <a class="nav-link" href="#"
+                          ><i class="nav-icon bi bi-folder"></i>
+                          <p>Multilevel <i class="nav-arrow bi bi-chevron-right"></i></p
+                        ></a>
+                        <ul class="nav nav-treeview">
+                          <li class="nav-item">
+                            <a href="#" class="nav-link"
+                              ><i class="nav-icon bi bi-circle"></i>
+                              <p>Level 2</p></a
+                            >
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>

dist/docs/layout.html

@@ -614,54 +614,70 @@
         <!--begin::App Content-->
         <div class="app-content">
           <div class="container-fluid">
-            <div class="callout callout-info mb-4">
-              <h5 class="fw-bold">Tips</h5>
-              <p>
-                The
-                <a
-                  href="/starter.html"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="callout-link"
-                >
-                  starter page
-                </a>
-                is a good place to start building your app if you’d like to start from scratch.
-              </p>
-            </div>
-
-            <p>The layout consists of five major parts:</p>
-            <ul>
-              <li>Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.</li>
-              <li>Main Header <code>.app-header</code> . Contains the logo and navbar.</li>
-              <li>
-                Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user panel and menu.
-              </li>
-              <li>Content <code>.app-main</code> . Contains the page header and content.</li>
-              <li>Main Footer <code>.app-footer</code> . Contains the footer.</li>
-            </ul>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <div class="callout callout-info mb-4">
+                      <h5 class="fw-bold">Tips</h5>
+                      <p>
+                        The
+                        <a
+                          href="https://github.com/ColorlibHQ/AdminLTE/tree/master/dist"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class="callout-link"
+                        >
+                          starter pages
+                        </a>
+                        are a good place to start building your app from scratch.
+                      </p>
+                    </div>
 
-            <h4>Layout Options</h4>
-            <p>
-              AdminLTE v4 provides a set of options to apply to your main layout. Each one of these
-              classes can be added to the
-              <code>body</code> tag to get the desired goal.
-            </p>
-            <ul>
-              <li>
-                Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.
-              </li>
-              <li>
-                Mini Sidebar on Toggle: use the class
-                <code>.sidebar-expand-* .sidebar-mini</code>
-                to have a collapsed sidebar upon loading.
-              </li>
-              <li>
-                Collapsed Sidebar: use the class
-                <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed
-                sidebar upon loading.
-              </li>
-            </ul>
+                    <p>The layout consists of five major parts:</p>
+                    <ul>
+                      <li>
+                        Wrapper <code>.app-wrapper</code> &mdash; a div that wraps the whole site.
+                      </li>
+                      <li>
+                        Main Header <code>.app-header</code> &mdash; contains the logo and navbar.
+                      </li>
+                      <li>
+                        Main Sidebar <code>.app-sidebar</code> &mdash; contains the sidebar user
+                        panel and menu.
+                      </li>
+                      <li>
+                        Content <code>.app-main</code> &mdash; contains the page header and content.
+                      </li>
+                      <li>Main Footer <code>.app-footer</code> &mdash; contains the footer.</li>
+                    </ul>
+
+                    <h4>Layout Options</h4>
+                    <p>
+                      AdminLTE v4 provides a set of options to apply to your main layout. Each one
+                      of these classes can be added to the
+                      <code>body</code> tag to get the desired goal.
+                    </p>
+                    <ul>
+                      <li>
+                        Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed
+                        sidebar.
+                      </li>
+                      <li>
+                        Mini Sidebar on Toggle: use the class
+                        <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar
+                        upon loading.
+                      </li>
+                      <li>
+                        Collapsed Sidebar: use the class
+                        <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a
+                        collapsed sidebar upon loading.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!-- /.container-fluid -->
         </div>

dist/docs/license.html

@@ -615,25 +615,34 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              AdminLTE is an open source project that is licensed under the
-              <a href="https://opensource.org/licenses/MIT">MIT license</a>. This allows you to do
-              pretty much anything you want as long as you include the copyright in “all copies or
-              substantial portions of the Software.” Attribution is not required (though very much
-              appreciated).
-            </p>
-            <h5 class="text-bold text-dark mt-3">
-              What You Are <span class="text-success">Allowed</span> To Do With AdminLTE
-            </h5>
-            <ul>
-              <li>Use in commercial projects.</li>
-              <li>Use in personal/private projects.</li>
-              <li>Modify and change the work.</li>
-              <li>Distribute the code.</li>
-              <li>
-                Sublicense: incorporate the work into something that has a more restrictive license.
-              </li>
-            </ul>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      AdminLTE is an open source project that is licensed under the
+                      <a href="https://opensource.org/licenses/MIT">MIT license</a>. This allows you
+                      to do pretty much anything you want as long as you include the copyright in
+                      “all copies or substantial portions of the Software.” Attribution is not
+                      required (though very much appreciated).
+                    </p>
+                    <h5 class="text-bold text-dark mt-3">
+                      What You Are <span class="text-success">Allowed</span> To Do With AdminLTE
+                    </h5>
+                    <ul>
+                      <li>Use in commercial projects.</li>
+                      <li>Use in personal/private projects.</li>
+                      <li>Modify and change the work.</li>
+                      <li>Distribute the code.</li>
+                      <li>
+                        Sublicense: incorporate the work into something that has a more restrictive
+                        license.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>