npm - @birdycom/omniaui-blocks - Versions diffs - 0.11.0 → 0.11.2 - Mend

@birdycom/omniaui-blocks 0.11.0 → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/LICENSE +21 -21
package/README.md +10 -10
package/blocks/about-timeline.html +23 -23
package/blocks/app-header.html +32 -32
package/blocks/app-shell.html +84 -84
package/blocks/auth-split.html +45 -45
package/blocks/auth.html +21 -21
package/blocks/contact-grid.html +38 -38
package/blocks/cta.html +8 -8
package/blocks/data-table.html +111 -111
package/blocks/faq.html +33 -33
package/blocks/features.html +18 -18
package/blocks/footer.html +41 -41
package/blocks/forgot-password.html +34 -34
package/blocks/form-page.html +28 -28
package/blocks/hero-code.html +27 -27
package/blocks/hero-orbit.html +38 -38
package/blocks/hero-split.html +12 -12
package/blocks/hero.html +10 -10
package/blocks/login-01.html +41 -41
package/blocks/login-02.html +55 -55
package/blocks/login-03.html +47 -47
package/blocks/module-header.html +24 -24
package/blocks/otp-01.html +36 -36
package/blocks/otp-02.html +46 -46
package/blocks/page-hero.html +10 -10
package/blocks/portfolio-grid.html +31 -31
package/blocks/pricing.html +42 -42
package/blocks/process.html +19 -19
package/blocks/product-grid.html +37 -37
package/blocks/profile-header.html +27 -27
package/blocks/reset-password.html +45 -45
package/blocks/showcase.html +27 -27
package/blocks/sidebar-01.html +56 -56
package/blocks/sidebar-02.html +55 -55
package/blocks/sidebar-03.html +53 -53
package/blocks/sidebar-04.html +56 -56
package/blocks/sidebar-05.html +68 -68
package/blocks/signup-01.html +53 -53
package/blocks/signup-02.html +56 -56
package/blocks/site-footer.html +39 -39
package/blocks/site-header.html +14 -14
package/blocks/spotlight.html +22 -22
package/blocks/stats-counter.html +15 -15
package/blocks/stats.html +19 -19
package/blocks/team-list.html +30 -30
package/blocks/two-factor.html +33 -33
package/blocks/wizard-dialog.html +36 -36
package/dist/blocks.css +371 -343
package/dist/blocks.min.css +1 -1
package/dist/parts/site-about-timeline.css +61 -61
package/dist/parts/site-contact-grid.css +58 -58
package/dist/parts/site-faq.css +52 -52
package/dist/parts/site-hero-orbit.css +62 -62
package/dist/parts/site-portfolio-grid.css +23 -23
package/dist/parts/site-profile-header.css +77 -77
package/package.json +55 -55

package/blocks/showcase.html CHANGED Viewed

@@ -1,27 +1,27 @@
-<!-- OmniaUI block: showcase — Portfolio grid: project cards with a browser frame around the screenshot. Needs @birdycom/omniaui. -->
-<section class="oc-section-pad">
-  <div class="oc-container">
-    <p class="oc-eyebrow">Work</p>
-    <h2 class="oc-display oc-display--md">Websites made to measure. <span class="oc-text-gradient">Different for every client.</span></h2>
-    <div class="oc-card-grid" style="--oc-card-min: 26rem;">
-      <a class="oc-product-card oc-accent--green p-0 overflow-hidden" href="#">
-        <span class="oc-browser-frame m-1"><span class="oc-browser-frame__bar"><i></i><i></i><i></i></span><span class="oc-browser-frame__body" style="background: linear-gradient(135deg, var(--color-green-40), var(--color-teal-80));"></span></span>
-        <span class="grid gap-0.5 p-1.5 pt-0">
-          <span class="oc-pill oc-pill--accent">Website with CMS</span>
-          <span class="oc-product-card__name">Verdavita</span>
-          <span class="oc-product-card__summary">Garden design and maintenance</span>
-          <span class="oc-product-card__more">View the project</span>
-        </span>
-      </a>
-      <a class="oc-product-card oc-accent--blue p-0 overflow-hidden" href="#">
-        <span class="oc-browser-frame m-1"><span class="oc-browser-frame__bar"><i></i><i></i><i></i></span><span class="oc-browser-frame__body" style="background: linear-gradient(135deg, var(--color-vividblue-60), var(--color-blue-40));"></span></span>
-        <span class="grid gap-0.5 p-1.5 pt-0">
-          <span class="oc-pill oc-pill--accent">Custom website</span>
-          <span class="oc-product-card__name">Kenis-Geerts</span>
-          <span class="oc-product-card__summary">Plumbing and central heating</span>
-          <span class="oc-product-card__more">View the project</span>
-        </span>
-      </a>
-    </div>
-  </div>
-</section>
+<!-- OmniaUI block: showcase — Portfolio grid: project cards with a browser frame around the screenshot. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container">
+    <p class="oc-eyebrow">Work</p>
+    <h2 class="oc-display oc-display--md">Websites made to measure. <span class="oc-text-gradient">Different for every client.</span></h2>
+    <div class="oc-card-grid" style="--oc-card-min: 26rem;">
+      <a class="oc-product-card oc-accent--green p-0 overflow-hidden" href="#">
+        <span class="oc-browser-frame m-1"><span class="oc-browser-frame__bar"><i></i><i></i><i></i></span><span class="oc-browser-frame__body" style="background: linear-gradient(135deg, var(--color-green-40), var(--color-teal-80));"></span></span>
+        <span class="grid gap-0.5 p-1.5 pt-0">
+          <span class="oc-pill oc-pill--accent">Website with CMS</span>
+          <span class="oc-product-card__name">Verdavita</span>
+          <span class="oc-product-card__summary">Garden design and maintenance</span>
+          <span class="oc-product-card__more">View the project</span>
+        </span>
+      </a>
+      <a class="oc-product-card oc-accent--blue p-0 overflow-hidden" href="#">
+        <span class="oc-browser-frame m-1"><span class="oc-browser-frame__bar"><i></i><i></i><i></i></span><span class="oc-browser-frame__body" style="background: linear-gradient(135deg, var(--color-vividblue-60), var(--color-blue-40));"></span></span>
+        <span class="grid gap-0.5 p-1.5 pt-0">
+          <span class="oc-pill oc-pill--accent">Custom website</span>
+          <span class="oc-product-card__name">Kenis-Geerts</span>
+          <span class="oc-product-card__summary">Plumbing and central heating</span>
+          <span class="oc-product-card__more">View the project</span>
+        </span>
+      </a>
+    </div>
+  </div>
+</section>

package/blocks/sidebar-01.html CHANGED Viewed

@@ -1,56 +1,56 @@
-<!-- OmniaUI block: sidebar-01 - The base layout: brand header, two labelled groups and a user footer. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
-       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
-       .oc-block-sb-ph: Content placeholder block (replace with real content)
-       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
-       .oc-block-sb-group: details element that makes a sidebar group label collapsible
-       .oc-block-sb-rail: Narrow icon rail for the double sidebar
-       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
-       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
--->
-<div class="oc-block-sb">
-  <aside class="oc-sidebar" aria-label="Main navigation">
-    <div class="oc-sidebar-header">
-      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
-        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
-        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
-      </a>
-    </div>
-    <div class="oc-sidebar-content">
-      <div class="oc-sidebar-group">
-        <div class="oc-sidebar-group-label">Getting started</div>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Configuration</span></a></li>
-        </ul>
-      </div>
-      <div class="oc-sidebar-group">
-        <div class="oc-sidebar-group-label">Building</div>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Charts</span></a></li>
-        </ul>
-      </div>
-    </div>
-    <div class="oc-sidebar-footer">
-      <div class="oc-user">
-        <span class="oc-avatar oc-avatar--sm">SC</span>
-        <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
-      </div>
-    </div>
-  </aside>
-  <div class="oc-block-sb-main">
-    <header class="oc-block-sb-bar">
-      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
-      <span class="oc-block-sb-sep"></span>
-      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
-    </header>
-    <div class="oc-block-sb-body">
-      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
-      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: sidebar-01 - The base layout: brand header, two labelled groups and a user footer. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
+       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
+       .oc-block-sb-ph: Content placeholder block (replace with real content)
+       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
+       .oc-block-sb-group: details element that makes a sidebar group label collapsible
+       .oc-block-sb-rail: Narrow icon rail for the double sidebar
+       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
+       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
+-->
+<div class="oc-block-sb">
+  <aside class="oc-sidebar" aria-label="Main navigation">
+    <div class="oc-sidebar-header">
+      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
+        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
+      </a>
+    </div>
+    <div class="oc-sidebar-content">
+      <div class="oc-sidebar-group">
+        <div class="oc-sidebar-group-label">Getting started</div>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Configuration</span></a></li>
+        </ul>
+      </div>
+      <div class="oc-sidebar-group">
+        <div class="oc-sidebar-group-label">Building</div>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Charts</span></a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="oc-sidebar-footer">
+      <div class="oc-user">
+        <span class="oc-avatar oc-avatar--sm">SC</span>
+        <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
+      </div>
+    </div>
+  </aside>
+  <div class="oc-block-sb-main">
+    <header class="oc-block-sb-bar">
+      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
+      <span class="oc-block-sb-sep"></span>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
+    </header>
+    <div class="oc-block-sb-body">
+      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
+      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
+    </div>
+  </div>
+</div>

package/blocks/sidebar-02.html CHANGED Viewed

@@ -1,55 +1,55 @@
-<!-- OmniaUI block: sidebar-02 - Each group label is a native details element; click a label to fold the group. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
-       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
-       .oc-block-sb-ph: Content placeholder block (replace with real content)
-       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
-       .oc-block-sb-group: details element that makes a sidebar group label collapsible
-       .oc-block-sb-rail: Narrow icon rail for the double sidebar
-       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
-       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
--->
-<div class="oc-block-sb">
-  <aside class="oc-sidebar" aria-label="Main navigation">
-    <div class="oc-sidebar-header">
-      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
-        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
-        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
-      </a>
-    </div>
-    <div class="oc-sidebar-content">
-      <details class="oc-block-sb-group" open>
-        <summary>Getting started</summary>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
-        </ul>
-      </details>
-      <details class="oc-block-sb-group" open>
-        <summary>Building</summary>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
-        </ul>
-      </details>
-      <details class="oc-block-sb-group">
-        <summary>Reference</summary>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Configuration</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Charts</span></a></li>
-        </ul>
-      </details>
-    </div>
-  </aside>
-  <div class="oc-block-sb-main">
-    <header class="oc-block-sb-bar">
-      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
-      <span class="oc-block-sb-sep"></span>
-      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
-    </header>
-    <div class="oc-block-sb-body">
-      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
-      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: sidebar-02 - Each group label is a native details element; click a label to fold the group. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
+       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
+       .oc-block-sb-ph: Content placeholder block (replace with real content)
+       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
+       .oc-block-sb-group: details element that makes a sidebar group label collapsible
+       .oc-block-sb-rail: Narrow icon rail for the double sidebar
+       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
+       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
+-->
+<div class="oc-block-sb">
+  <aside class="oc-sidebar" aria-label="Main navigation">
+    <div class="oc-sidebar-header">
+      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
+        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
+      </a>
+    </div>
+    <div class="oc-sidebar-content">
+      <details class="oc-block-sb-group" open>
+        <summary>Getting started</summary>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
+        </ul>
+      </details>
+      <details class="oc-block-sb-group" open>
+        <summary>Building</summary>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
+        </ul>
+      </details>
+      <details class="oc-block-sb-group">
+        <summary>Reference</summary>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Configuration</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Charts</span></a></li>
+        </ul>
+      </details>
+    </div>
+  </aside>
+  <div class="oc-block-sb-main">
+    <header class="oc-block-sb-bar">
+      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
+      <span class="oc-block-sb-sep"></span>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
+    </header>
+    <div class="oc-block-sb-body">
+      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
+      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
+    </div>
+  </div>
+</div>

package/blocks/sidebar-03.html CHANGED Viewed

@@ -1,53 +1,53 @@
-<!-- OmniaUI block: sidebar-03 - Menu items with nested lists that stay visible, guided by a vertical line. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
-       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
-       .oc-block-sb-ph: Content placeholder block (replace with real content)
-       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
-       .oc-block-sb-group: details element that makes a sidebar group label collapsible
-       .oc-block-sb-rail: Narrow icon rail for the double sidebar
-       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
-       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
--->
-<div class="oc-block-sb">
-  <aside class="oc-sidebar" aria-label="Main navigation">
-    <div class="oc-sidebar-header">
-      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
-        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
-        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
-      </a>
-    </div>
-    <div class="oc-sidebar-content">
-      <div class="oc-sidebar-group">
-        <div class="oc-sidebar-group-label">Getting started</div>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a>
-            <ul class="oc-sidebar-menu-sub">
-              <li><a class="oc-sidebar-menu-button" href="#">Overview</a></li>
-              <li><a class="oc-sidebar-menu-button" href="#">Quick start</a></li>
-              <li><a class="oc-sidebar-menu-button" href="#">Tokens</a></li>
-            </ul>
-          </li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span></a>
-            <ul class="oc-sidebar-menu-sub">
-              <li><a class="oc-sidebar-menu-button" href="#">Buttons</a></li>
-              <li><a class="oc-sidebar-menu-button" href="#">Forms</a></li>
-              <li><a class="oc-sidebar-menu-button" href="#">Navigation</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </aside>
-  <div class="oc-block-sb-main">
-    <header class="oc-block-sb-bar">
-      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
-      <span class="oc-block-sb-sep"></span>
-      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
-    </header>
-    <div class="oc-block-sb-body">
-      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
-      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: sidebar-03 - Menu items with nested lists that stay visible, guided by a vertical line. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
+       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
+       .oc-block-sb-ph: Content placeholder block (replace with real content)
+       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
+       .oc-block-sb-group: details element that makes a sidebar group label collapsible
+       .oc-block-sb-rail: Narrow icon rail for the double sidebar
+       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
+       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
+-->
+<div class="oc-block-sb">
+  <aside class="oc-sidebar" aria-label="Main navigation">
+    <div class="oc-sidebar-header">
+      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
+        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
+      </a>
+    </div>
+    <div class="oc-sidebar-content">
+      <div class="oc-sidebar-group">
+        <div class="oc-sidebar-group-label">Getting started</div>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a>
+            <ul class="oc-sidebar-menu-sub">
+              <li><a class="oc-sidebar-menu-button" href="#">Overview</a></li>
+              <li><a class="oc-sidebar-menu-button" href="#">Quick start</a></li>
+              <li><a class="oc-sidebar-menu-button" href="#">Tokens</a></li>
+            </ul>
+          </li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span></a>
+            <ul class="oc-sidebar-menu-sub">
+              <li><a class="oc-sidebar-menu-button" href="#">Buttons</a></li>
+              <li><a class="oc-sidebar-menu-button" href="#">Forms</a></li>
+              <li><a class="oc-sidebar-menu-button" href="#">Navigation</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </aside>
+  <div class="oc-block-sb-main">
+    <header class="oc-block-sb-bar">
+      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
+      <span class="oc-block-sb-sep"></span>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
+    </header>
+    <div class="oc-block-sb-body">
+      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
+      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
+    </div>
+  </div>
+</div>

package/blocks/sidebar-04.html CHANGED Viewed

@@ -1,56 +1,56 @@
-<!-- OmniaUI block: sidebar-04 - The sidebar floats as a rounded, shadowed panel over a muted page. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
-       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
-       .oc-block-sb-ph: Content placeholder block (replace with real content)
-       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
-       .oc-block-sb-group: details element that makes a sidebar group label collapsible
-       .oc-block-sb-rail: Narrow icon rail for the double sidebar
-       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
-       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
--->
-<div class="oc-block-sb oc-block-sb--floating">
-  <aside class="oc-sidebar oc-sidebar--floating" aria-label="Main navigation">
-    <div class="oc-sidebar-header">
-      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
-        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
-        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
-      </a>
-    </div>
-    <div class="oc-sidebar-content">
-      <div class="oc-sidebar-group">
-        <div class="oc-sidebar-group-label">Getting started</div>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Configuration</span></a></li>
-        </ul>
-      </div>
-      <div class="oc-sidebar-group">
-        <div class="oc-sidebar-group-label">Building</div>
-        <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Charts</span></a></li>
-        </ul>
-      </div>
-    </div>
-    <div class="oc-sidebar-footer">
-      <div class="oc-user">
-        <span class="oc-avatar oc-avatar--sm">SC</span>
-        <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
-      </div>
-    </div>
-  </aside>
-  <div class="oc-block-sb-main">
-    <header class="oc-block-sb-bar">
-      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
-      <span class="oc-block-sb-sep"></span>
-      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
-    </header>
-    <div class="oc-block-sb-body">
-      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
-      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: sidebar-04 - The sidebar floats as a rounded, shadowed panel over a muted page. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
+       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
+       .oc-block-sb-ph: Content placeholder block (replace with real content)
+       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
+       .oc-block-sb-group: details element that makes a sidebar group label collapsible
+       .oc-block-sb-rail: Narrow icon rail for the double sidebar
+       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
+       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
+-->
+<div class="oc-block-sb oc-block-sb--floating">
+  <aside class="oc-sidebar oc-sidebar--floating" aria-label="Main navigation">
+    <div class="oc-sidebar-header">
+      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
+        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
+      </a>
+    </div>
+    <div class="oc-sidebar-content">
+      <div class="oc-sidebar-group">
+        <div class="oc-sidebar-group-label">Getting started</div>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Configuration</span></a></li>
+        </ul>
+      </div>
+      <div class="oc-sidebar-group">
+        <div class="oc-sidebar-group-label">Building</div>
+        <ul class="oc-sidebar-menu">
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Charts</span></a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="oc-sidebar-footer">
+      <div class="oc-user">
+        <span class="oc-avatar oc-avatar--sm">SC</span>
+        <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
+      </div>
+    </div>
+  </aside>
+  <div class="oc-block-sb-main">
+    <header class="oc-block-sb-bar">
+      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
+      <span class="oc-block-sb-sep"></span>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
+    </header>
+    <div class="oc-block-sb-body">
+      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
+      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
+    </div>
+  </div>
+</div>