@birdycom/omniaui-blocks 0.0.0-stage → 0.11.0

package/blocks/sidebar-01.html

@@ -0,0 +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>

package/blocks/sidebar-02.html

@@ -0,0 +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>

package/blocks/sidebar-03.html

@@ -0,0 +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>

package/blocks/sidebar-04.html

@@ -0,0 +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>

package/blocks/sidebar-05.html

@@ -0,0 +1,68 @@
+<!-- OmniaUI block: sidebar-05 - Menu items that expand a submenu with details and summary. 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">Platform</div>
+        <ul class="oc-sidebar-menu">
+          <li>
+            <details class="oc-sidebar-collapsible" open>
+              <summary class="oc-sidebar-menu-button"><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="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="oc-sidebar-menu-label">Dashboard</span></summary>
+              <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="#">Analytics</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Reports</a></li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <details class="oc-sidebar-collapsible">
+              <summary class="oc-sidebar-menu-button"><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="M3 6a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="oc-sidebar-menu-label">Projects</span></summary>
+              <ul class="oc-sidebar-menu-sub">
+                <li><a class="oc-sidebar-menu-button" href="#">Active</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Archived</a></li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <details class="oc-sidebar-collapsible">
+              <summary class="oc-sidebar-menu-button"><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="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg><span class="oc-sidebar-menu-label">Team</span></summary>
+              <ul class="oc-sidebar-menu-sub">
+                <li><a class="oc-sidebar-menu-button" href="#">Members</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Roles</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Invitations</a></li>
+              </ul>
+            </details>
+          </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/signup-01.html

@@ -0,0 +1,53 @@
+<!-- OmniaUI block: signup-01 - Create-account card with name, e-mail, password and confirmation. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+-->
+<div class="oc-block-authpage oc-block-authpage--plain">
+  <form class="oc-block-authcard" action="#" method="post">
+    <span class="oc-block-authcard-logo"><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>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Create an account</h1>
+      <p class="oc-block-authcard-text">Enter your information to get started</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-signup01-name">Full name</label>
+        <input class="oc-input" id="oc-signup01-name" name="text" type="text" autocomplete="name" required placeholder="Ada Lovelace">
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-signup01-email">E-mail</label>
+        <input class="oc-input" id="oc-signup01-email" name="email" type="email" autocomplete="email" required placeholder="name@company.com">
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-signup01-password">Password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-signup01-password" name="oc-signup01-password" type="password" autocomplete="new-password" required>
+          <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+        </div>
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-signup01-confirm">Confirm password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-signup01-confirm" name="oc-signup01-confirm" type="password" autocomplete="new-password" required>
+          <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+        </div>
+      </div>
+      <p class="oc-block-authcard-hint">Must be at least 8 characters long.</p>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Create account</button>
+    </div>
+    <p class="oc-block-authcard-foot">Already have an account? <a href="#">Sign in</a></p>
+  </form>
+</div>

package/blocks/signup-02.html

@@ -0,0 +1,56 @@
+<!-- OmniaUI block: signup-02 - Registration form next to a brand panel with a quote; the panel hides on narrow containers. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+-->
+<div class="oc-block-authduo oc-block-authduo--reverse">
+  <div class="oc-block-authduo-grid">
+    <aside class="oc-block-authduo-panel oc-block-authduo-panel--image">
+      <a class="oc-block-authduo-logo" href="#"><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> OmniaDesk</a>
+      <blockquote class="oc-block-authduo-quote">
+        <p>&ldquo;Setup took ten minutes and the whole team was on board by lunch.&rdquo;</p>
+        <footer>Mina Park, product manager</footer>
+      </blockquote>
+    </aside>
+    <div class="oc-block-authduo-form">
+      <form class="oc-block-authcard oc-block-authcard--flat" action="#" method="post">
+        <div class="oc-block-authcard-head">
+          <h1 class="oc-block-authcard-title">Create your account</h1>
+          <p class="oc-block-authcard-text">Free for 14 days, no card needed</p>
+        </div>
+        <div class="oc-block-authcard-fields">
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-signup02-name">Full name</label>
+            <input class="oc-input" id="oc-signup02-name" name="text" type="text" autocomplete="name" required placeholder="Ada Lovelace">
+          </div>
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-signup02-email">E-mail</label>
+            <input class="oc-input" id="oc-signup02-email" name="email" type="email" autocomplete="email" required placeholder="name@company.com">
+          </div>
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-signup02-password">Password</label>
+            <div class="oc-input-reveal">
+              <input class="oc-input" id="oc-signup02-password" name="oc-signup02-password" type="password" autocomplete="new-password" required>
+              <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+            </div>
+          </div>
+          <label><input class="oc-checkbox" type="checkbox" name="terms" required> I agree to the <a class="oc-link" href="#">terms</a></label>
+          <button class="oc-btn oc-block-authcard-submit" type="submit">Create account</button>
+        </div>
+        <p class="oc-block-authcard-foot">Already registered? <a href="#">Sign in</a></p>
+      </form>
+    </div>
+  </div>
+</div>

package/blocks/site-footer.html

@@ -0,0 +1,39 @@
+<!-- OmniaUI block: site-footer — Brand column, three link columns and a bottom bar. Needs @birdycom/omniaui. -->
+<footer class="oc-site-footer">
+  <div class="oc-container">
+    <div class="oc-site-footer__grid">
+      <div class="oc-site-footer__about">
+        <a class="oc-site-header__brand" href="/"><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9670;</span>brandco</a>
+        <p>Software development since 2001: web applications, desktop tools and plugins, built and maintained in-house.</p>
+      </div>
+      <div>
+        <h2 class="oc-site-footer__title">Software</h2>
+        <ul class="oc-site-footer__list">
+          <li><a href="#">ERP</a></li>
+          <li><a href="#">CSS framework</a></li>
+          <li><a href="#">Desktop tools</a></li>
+        </ul>
+      </div>
+      <div>
+        <h2 class="oc-site-footer__title">Company</h2>
+        <ul class="oc-site-footer__list">
+          <li><a href="#">Work</a></li>
+          <li><a href="#">Services</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+      </div>
+      <div>
+        <h2 class="oc-site-footer__title">Contact</h2>
+        <address class="oc-site-footer__list">
+          <a href="mailto:hello@example.com">hello@example.com</a>
+          <span>Main street 1</span>
+          <span>2530 Boechout</span>
+        </address>
+      </div>
+    </div>
+    <div class="oc-site-footer__bottom">
+      <span>&copy; 2026 brandco. All rights reserved.</span>
+      <span>Built with OmniaCSS</span>
+    </div>
+  </div>
+</footer>

package/blocks/site-header.html

@@ -0,0 +1,14 @@
+<!-- OmniaUI block: site-header — Sticky header that turns into glass after scrolling; mobile menu via popover. No JavaScript. Needs @birdycom/omniaui. -->
+<header class="oc-site-header">
+  <div class="oc-container oc-site-header__inner">
+    <a class="oc-site-header__brand" href="/"><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9670;</span>brand<span class="oc-text-gradient">co</span></a>
+    <button class="oc-site-header__toggle" popovertarget="site-nav" aria-label="Menu">&#9776;</button>
+    <nav class="oc-site-header__nav" id="site-nav" popover aria-label="Main">
+      <a href="#software" aria-current="page">Software</a>
+      <a href="#work">Work</a>
+      <a href="#services">Services</a>
+      <a href="#about">About</a>
+      <a class="oc-btn oc-btn--gradient oc-btn--sm" href="#contact">Start a project</a>
+    </nav>
+  </div>
+</header>

package/blocks/spotlight.html

@@ -0,0 +1,22 @@
+<!-- OmniaUI block: spotlight — Highlighted flagship product: badge, big title with icon tile, tagline, copy, button and a module list. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container">
+    <div class="oc-spotlight oc-accent--green">
+      <div>
+        <span class="oc-pill oc-pill--accent"><span class="oc-status-dot"></span>Our flagship</span>
+        <h2 class="oc-spotlight__title"><span class="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">&#9670;</span>OmniaDesk</h2>
+        <p class="oc-spotlight__tagline">The modular ERP for small businesses</p>
+        <p class="oc-lead">One web application for CRM, sales, invoicing, bookkeeping and stock - built from integrated modules, so your data never lives on separate islands again.</p>
+        <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#">Discover OmniaDesk &rarr;</a>
+      </div>
+      <ul class="oc-spotlight__modules">
+        <li><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9787;</span>CRM &amp; contacts</li>
+        <li><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#8364;</span>Sales &amp; invoicing</li>
+        <li><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9636;</span>Finance</li>
+        <li><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9635;</span>Stock &amp; catalogue</li>
+        <li><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9776;</span>Powerful lists</li>
+        <li><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9737;</span>Secure by design</li>
+      </ul>
+    </div>
+  </div>
+</section>

package/blocks/stats-counter.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI block: stats-counter — Key figures that count up when they scroll into view (CSS only). Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-stats">
+  <div class="oc-block-stat">
+    <strong class="oc-block-stat-value oc-counter oc-counter--on-view" style="--oc-counter-to: 640; --oc-counter-suffix: '+'"></strong>
+    <span class="oc-block-stat-label">Utility families</span>
+  </div>
+  <div class="oc-block-stat">
+    <strong class="oc-block-stat-value oc-counter oc-counter--on-view" style="--oc-counter-to: 98; --oc-counter-suffix: '%'"></strong>
+    <span class="oc-block-stat-label">Smaller CSS on demand</span>
+  </div>
+  <div class="oc-block-stat">
+    <strong class="oc-block-stat-value oc-counter oc-counter--on-view" style="--oc-counter-to: 0"></strong>
+    <span class="oc-block-stat-label">Lines of JavaScript needed</span>
+  </div>
+</div>

package/blocks/stats.html

@@ -0,0 +1,19 @@
+<!-- OmniaUI block: stats — Key figures row. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-stats">
+  <div class="oc-block-stat">
+    <div class="oc-block-stat-value">100K+</div>
+    <div class="oc-block-stat-label">CSS utility classes</div>
+  </div>
+  <div class="oc-block-stat">
+    <div class="oc-block-stat-value">14</div>
+    <div class="oc-block-stat-label">Component primitives</div>
+  </div>
+  <div class="oc-block-stat">
+    <div class="oc-block-stat-value">8</div>
+    <div class="oc-block-stat-label">Block compositions</div>
+  </div>
+  <div class="oc-block-stat">
+    <div class="oc-block-stat-value">3</div>
+    <div class="oc-block-stat-label">Color palettes</div>
+  </div>
+</div>

package/blocks/team-list.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI block: team-list - Member rows with avatar, role badge and a row action menu. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-team: List container
+       .oc-block-team-row: One member
+       .oc-user: Avatar + name + e-mail
+       .oc-block-team-meta: Right side (badges, actions)
+-->
+<div class="oc-block-team">
+  <div class="oc-block-team-row">
+    <div class="oc-user"><span class="oc-avatar">AL</span><span class="oc-user-text"><span class="oc-user-name">Ada Lovelace</span><span class="oc-user-email">ada@example.com</span></span></div>
+    <div class="oc-block-team-meta"><span class="oc-badge">Owner</span></div>
+  </div>
+  <div class="oc-block-team-row">
+    <div class="oc-user"><span class="oc-avatar">AT</span><span class="oc-user-text"><span class="oc-user-name">Alan Turing</span><span class="oc-user-email">alan@example.com</span></span></div>
+    <div class="oc-block-team-meta">
+      <span class="oc-badge oc-badge--secondary">Accountant</span>
+      <button class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" type="button" popovertarget="oc-team-menu" aria-label="Member actions">&hellip;</button>
+      <div class="oc-dropdown-menu" id="oc-team-menu" popover>
+        <a class="oc-dropdown-item" href="#">View profile</a>
+        <a class="oc-dropdown-item" href="#">Change role</a>
+        <div class="oc-dropdown-separator"></div>
+        <button class="oc-dropdown-item" type="button">Remove</button>
+      </div>
+    </div>
+  </div>
+  <div class="oc-block-team-row">
+    <div class="oc-user"><span class="oc-avatar">GH</span><span class="oc-user-text"><span class="oc-user-name">Grace Hopper</span><span class="oc-user-email">grace@example.com</span></span></div>
+    <div class="oc-block-team-meta"><span class="oc-badge oc-badge--warning">Invited</span></div>
+  </div>
+</div>