@birdycom/omniaui-blocks 0.11.0 → 0.11.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Serge Cools (Birdycom)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Serge Cools (Birdycom)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,10 +1,10 @@
-# @birdycom/omniaui-blocks
-
-Ready-made page sections composed from OmniaCSS utilities and components: hero, hero-split, page-hero, features, pricing, stats, stats-counter, CTA, auth, footer.
-
-```bash
-npx omniacss add block pricing        # → omnia/blocks/pricing.html
-npx omniacss list blocks
-```
-
-CSS: `import "@birdycom/omniaui-blocks"` (or let `omniacss build` include it). MIT
+# @birdycom/omniaui-blocks
+
+Ready-made page sections composed from OmniaCSS utilities and components: hero, hero-split, page-hero, features, pricing, stats, stats-counter, CTA, auth, footer.
+
+```bash
+npx omniacss add block pricing        # → omnia/blocks/pricing.html
+npx omniacss list blocks
+```
+
+CSS: `import "@birdycom/omniaui-blocks"` (or let `omniacss build` include it). MIT

package/blocks/about-timeline.html

@@ -1,23 +1,23 @@
-<!-- OmniaUI block: about-timeline - About section: picture with a badge next to the company story and a year timeline. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     File: packages/blocks/blocks/about-timeline.html | Map: section.oc-block-about -> inner -> media (+ badge) -> copy (eyebrow, title, text, .oc-timeline)
-     Class API: .oc-block-about (modifier --reverse: picture right), -inner, -media (empty = gradient placeholder, or an <img>),
-       -badge, -copy, -title. Uses the timeline component (.oc-timeline) and an .oc-accent--* preset for the placeholder.
--->
-<section class="oc-block-about oc-accent--blue" aria-labelledby="oc-about-title">
-  <div class="oc-block-about-inner">
-    <figure class="oc-block-about-media" aria-hidden="true">
-      <span class="oc-block-about-badge"><strong>12+</strong>years of building software</span>
-    </figure>
-    <div class="oc-block-about-copy">
-      <p class="oc-eyebrow">About us</p>
-      <h2 class="oc-block-about-title" id="oc-about-title">Software for everyone. <span class="oc-text-gradient">Since 2012.</span></h2>
-      <p>Acme started as an IT partner for local businesses. That practical experience is in every line of code we write today.</p>
-      <p>You talk directly to the people who build your software. No layers in between.</p>
-      <ol class="oc-timeline">
-        <li class="oc-timeline__item"><span class="oc-timeline__date">2012</span><p class="oc-timeline__text">Acme is founded by two developers.</p></li>
-        <li class="oc-timeline__item"><span class="oc-timeline__date">2019</span><p class="oc-timeline__text">New office and a first own product.</p></li>
-        <li class="oc-timeline__item oc-timeline__item--current"><span class="oc-timeline__date">Today</span><p class="oc-timeline__text">Own products and custom work, from web apps to desktop tools.</p></li>
-      </ol>
-    </div>
-  </div>
-</section>
+<!-- OmniaUI block: about-timeline - About section: picture with a badge next to the company story and a year timeline. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/about-timeline.html | Map: section.oc-block-about -> inner -> media (+ badge) -> copy (eyebrow, title, text, .oc-timeline)
+     Class API: .oc-block-about (modifier --reverse: picture right), -inner, -media (empty = gradient placeholder, or an <img>),
+       -badge, -copy, -title. Uses the timeline component (.oc-timeline) and an .oc-accent--* preset for the placeholder.
+-->
+<section class="oc-block-about oc-accent--blue" aria-labelledby="oc-about-title">
+  <div class="oc-block-about-inner">
+    <figure class="oc-block-about-media" aria-hidden="true">
+      <span class="oc-block-about-badge"><strong>12+</strong>years of building software</span>
+    </figure>
+    <div class="oc-block-about-copy">
+      <p class="oc-eyebrow">About us</p>
+      <h2 class="oc-block-about-title" id="oc-about-title">Software for everyone. <span class="oc-text-gradient">Since 2012.</span></h2>
+      <p>Acme started as an IT partner for local businesses. That practical experience is in every line of code we write today.</p>
+      <p>You talk directly to the people who build your software. No layers in between.</p>
+      <ol class="oc-timeline">
+        <li class="oc-timeline__item"><span class="oc-timeline__date">2012</span><p class="oc-timeline__text">Acme is founded by two developers.</p></li>
+        <li class="oc-timeline__item"><span class="oc-timeline__date">2019</span><p class="oc-timeline__text">New office and a first own product.</p></li>
+        <li class="oc-timeline__item oc-timeline__item--current"><span class="oc-timeline__date">Today</span><p class="oc-timeline__text">Own products and custom work, from web apps to desktop tools.</p></li>
+      </ol>
+    </div>
+  </div>
+</section>

package/blocks/app-header.html

@@ -1,32 +1,32 @@
-<!-- OmniaUI block: app-header - Top bar with sidebar toggle, module navigation and user actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-appbar: Bar (flex row)
-       .oc-block-appbar-nav: Navigation area; contains an .oc-navmenu
-       .oc-block-appbar-actions: Right-aligned actions (theme switch, switchers, user menu)
-       .oc-block-appbar-title: Optional page title
-     Slots: toggle, module nav, actions (theme switch, workspace select, user dropdown)
--->
-<header class="oc-block-appbar">
-  <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-appbar-toggle" title="Toggle sidebar"><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="M4 6h16M4 12h16M4 18h16"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
-  <nav class="oc-block-appbar-nav" aria-label="Module navigation">
-    <ul class="oc-navmenu">
-      <li><a class="oc-navmenu-link" href="#" aria-current="page">Contacts</a></li>
-      <li><a class="oc-navmenu-link" href="#">Companies</a></li>
-      <li><a class="oc-navmenu-link" href="#">Segments</a></li>
-    </ul>
-  </nav>
-  <div class="oc-block-appbar-actions">
-    <div class="oc-theme-switch" role="radiogroup" aria-label="Theme">
-      <label><input type="radio" name="oc-appbar-theme" value="light"> Light</label>
-      <label><input type="radio" name="oc-appbar-theme" value="dark"> Dark</label>
-    </div>
-    <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-appbar-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">SC</span></button>
-    <div class="oc-dropdown-menu" id="oc-appbar-user" popover>
-      <div class="oc-dropdown-label">serge@example.com</div>
-      <a class="oc-dropdown-item" href="#">Profile</a>
-      <a class="oc-dropdown-item" href="#">Settings</a>
-      <div class="oc-dropdown-separator"></div>
-      <a class="oc-dropdown-item" href="#">Log out</a>
-    </div>
-  </div>
-</header>
+<!-- OmniaUI block: app-header - Top bar with sidebar toggle, module navigation and user actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-appbar: Bar (flex row)
+       .oc-block-appbar-nav: Navigation area; contains an .oc-navmenu
+       .oc-block-appbar-actions: Right-aligned actions (theme switch, switchers, user menu)
+       .oc-block-appbar-title: Optional page title
+     Slots: toggle, module nav, actions (theme switch, workspace select, user dropdown)
+-->
+<header class="oc-block-appbar">
+  <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-appbar-toggle" title="Toggle sidebar"><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="M4 6h16M4 12h16M4 18h16"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
+  <nav class="oc-block-appbar-nav" aria-label="Module navigation">
+    <ul class="oc-navmenu">
+      <li><a class="oc-navmenu-link" href="#" aria-current="page">Contacts</a></li>
+      <li><a class="oc-navmenu-link" href="#">Companies</a></li>
+      <li><a class="oc-navmenu-link" href="#">Segments</a></li>
+    </ul>
+  </nav>
+  <div class="oc-block-appbar-actions">
+    <div class="oc-theme-switch" role="radiogroup" aria-label="Theme">
+      <label><input type="radio" name="oc-appbar-theme" value="light"> Light</label>
+      <label><input type="radio" name="oc-appbar-theme" value="dark"> Dark</label>
+    </div>
+    <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-appbar-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">SC</span></button>
+    <div class="oc-dropdown-menu" id="oc-appbar-user" popover>
+      <div class="oc-dropdown-label">serge@example.com</div>
+      <a class="oc-dropdown-item" href="#">Profile</a>
+      <a class="oc-dropdown-item" href="#">Settings</a>
+      <div class="oc-dropdown-separator"></div>
+      <a class="oc-dropdown-item" href="#">Log out</a>
+    </div>
+  </div>
+</header>

package/blocks/app-shell.html

@@ -1,84 +1,84 @@
-<!-- OmniaUI block: app-shell - Application layout: sidebar, header bar, breadcrumb strip and scrolling content. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-shell: Grid root. Height via --oc-block-shell-height (default 100dvh).
-       .oc-block-shell-toggle: Hidden checkbox that collapses the sidebar (label for it in the header bar)
-       .oc-sidebar: Sidebar component (first grid child)
-       .oc-block-shell-main: Column holding the header bar, breadcrumbs and content
-       .oc-block-shell-breadcrumbs: Strip under the header bar
-       .oc-block-shell-content: Scrolling page content (the only scroll container)
-       .oc-block-shell-menu-button: Shown below 48rem to open the sidebar sheet
-     Slots: sidebar, header bar (see App header), breadcrumbs, content (default)
--->
-<div class="oc-block-shell" style="--oc-block-shell-height: 30rem">
-  <input class="oc-block-shell-toggle" type="checkbox" id="oc-shell-toggle" aria-label="Collapse sidebar">
-  <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="#">
-        <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"><strong>OmniaDesk</strong></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><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="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></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="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg><span class="oc-sidebar-menu-label">Contacts</span><span class="oc-sidebar-menu-badge">12</span></a></li>
-          <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="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Invoices</span></summary>
-              <ul class="oc-sidebar-menu-sub">
-                <li><a class="oc-sidebar-menu-button" href="#">Sales</a></li>
-                <li><a class="oc-sidebar-menu-button" href="#">Purchases</a></li>
-              </ul>
-            </details>
-          </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">Reports</span></a></li>
-        </ul>
-      </div>
-      <div class="oc-sidebar-separator"></div>
-      <div class="oc-sidebar-group">
-        <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">Settings</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-shell-main">
-    <header class="oc-block-appbar">
-      <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-shell-toggle" title="Toggle sidebar"><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="M4 6h16M4 12h16M4 18h16"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
-      <nav class="oc-block-appbar-nav" aria-label="Module navigation">
-        <ul class="oc-navmenu">
-          <li><a class="oc-navmenu-link" href="#" aria-current="page">Contacts</a></li>
-          <li><a class="oc-navmenu-link" href="#">Companies</a></li>
-          <li><a class="oc-navmenu-link" href="#">Segments</a></li>
-        </ul>
-      </nav>
-      <div class="oc-block-appbar-actions">
-        <div class="oc-theme-switch" role="radiogroup" aria-label="Theme">
-          <label><input type="radio" name="oc-shell-theme" value="light"> Light</label>
-          <label><input type="radio" name="oc-shell-theme" value="dark"> Dark</label>
-        </div>
-        <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-shell-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">SC</span></button>
-        <div class="oc-dropdown-menu" id="oc-shell-user" popover>
-          <div class="oc-dropdown-label">serge@example.com</div>
-          <a class="oc-dropdown-item" href="#">Profile</a>
-          <a class="oc-dropdown-item" href="#">Settings</a>
-          <div class="oc-dropdown-separator"></div>
-          <a class="oc-dropdown-item" href="#">Log out</a>
-        </div>
-      </div>
-    </header>
-    <div class="oc-block-shell-breadcrumbs"><nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Home</a></li><li class="oc-breadcrumb-item"><a href="#">CRM</a></li><li class="oc-breadcrumb-item" aria-current="page">Contacts</li></ol></nav></div>
-    <main class="oc-block-shell-content">
-      <h1 class="oc-heading-title">Contacts</h1>
-      <p class="oc-heading-description">Page content scrolls here.</p>
-    </main>
-  </div>
-</div>
+<!-- OmniaUI block: app-shell - Application layout: sidebar, header bar, breadcrumb strip and scrolling content. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-shell: Grid root. Height via --oc-block-shell-height (default 100dvh).
+       .oc-block-shell-toggle: Hidden checkbox that collapses the sidebar (label for it in the header bar)
+       .oc-sidebar: Sidebar component (first grid child)
+       .oc-block-shell-main: Column holding the header bar, breadcrumbs and content
+       .oc-block-shell-breadcrumbs: Strip under the header bar
+       .oc-block-shell-content: Scrolling page content (the only scroll container)
+       .oc-block-shell-menu-button: Shown below 48rem to open the sidebar sheet
+     Slots: sidebar, header bar (see App header), breadcrumbs, content (default)
+-->
+<div class="oc-block-shell" style="--oc-block-shell-height: 30rem">
+  <input class="oc-block-shell-toggle" type="checkbox" id="oc-shell-toggle" aria-label="Collapse sidebar">
+  <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="#">
+        <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"><strong>OmniaDesk</strong></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><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="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></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="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg><span class="oc-sidebar-menu-label">Contacts</span><span class="oc-sidebar-menu-badge">12</span></a></li>
+          <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="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Invoices</span></summary>
+              <ul class="oc-sidebar-menu-sub">
+                <li><a class="oc-sidebar-menu-button" href="#">Sales</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Purchases</a></li>
+              </ul>
+            </details>
+          </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">Reports</span></a></li>
+        </ul>
+      </div>
+      <div class="oc-sidebar-separator"></div>
+      <div class="oc-sidebar-group">
+        <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">Settings</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-shell-main">
+    <header class="oc-block-appbar">
+      <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-shell-toggle" title="Toggle sidebar"><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="M4 6h16M4 12h16M4 18h16"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
+      <nav class="oc-block-appbar-nav" aria-label="Module navigation">
+        <ul class="oc-navmenu">
+          <li><a class="oc-navmenu-link" href="#" aria-current="page">Contacts</a></li>
+          <li><a class="oc-navmenu-link" href="#">Companies</a></li>
+          <li><a class="oc-navmenu-link" href="#">Segments</a></li>
+        </ul>
+      </nav>
+      <div class="oc-block-appbar-actions">
+        <div class="oc-theme-switch" role="radiogroup" aria-label="Theme">
+          <label><input type="radio" name="oc-shell-theme" value="light"> Light</label>
+          <label><input type="radio" name="oc-shell-theme" value="dark"> Dark</label>
+        </div>
+        <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-shell-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">SC</span></button>
+        <div class="oc-dropdown-menu" id="oc-shell-user" popover>
+          <div class="oc-dropdown-label">serge@example.com</div>
+          <a class="oc-dropdown-item" href="#">Profile</a>
+          <a class="oc-dropdown-item" href="#">Settings</a>
+          <div class="oc-dropdown-separator"></div>
+          <a class="oc-dropdown-item" href="#">Log out</a>
+        </div>
+      </div>
+    </header>
+    <div class="oc-block-shell-breadcrumbs"><nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Home</a></li><li class="oc-breadcrumb-item"><a href="#">CRM</a></li><li class="oc-breadcrumb-item" aria-current="page">Contacts</li></ol></nav></div>
+    <main class="oc-block-shell-content">
+      <h1 class="oc-heading-title">Contacts</h1>
+      <p class="oc-heading-description">Page content scrolls here.</p>
+    </main>
+  </div>
+</div>

package/blocks/auth-split.html

@@ -1,45 +1,45 @@
-<!-- OmniaUI block: auth-split - Sign-in with a brand panel (logo, quote) next to the form. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-authsplit: Grid root (two columns from 62rem)
-       .oc-block-authsplit-brand: Left brand panel (primary gradient)
-       .oc-block-authsplit-logo: Logo link
-       .oc-block-authsplit-quote: Quote (blockquote with p + footer)
-       .oc-block-authsplit-form: Right column that centers the card
-       .oc-block-authsplit-card: Form width limiter
-       .oc-block-authsplit-title / -subtitle: Heading and sub line
-       .oc-block-authsplit-fields / -row: Field stack and a justified row (remember me / forgot password)
-     Slots: logo, quote, title, subtitle, fields, submit, footer link
--->
-<div class="oc-block-authsplit">
-  <aside class="oc-block-authsplit-brand">
-    <a class="oc-block-authsplit-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="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg> OmniaDesk</a>
-    <blockquote class="oc-block-authsplit-quote">
-      <p>&ldquo;One calm place for contacts, invoices and the day-to-day work.&rdquo;</p>
-      <footer>Serge Cools, founder</footer>
-    </blockquote>
-  </aside>
-  <div class="oc-block-authsplit-form">
-    <form class="oc-block-authsplit-card" action="#" method="post">
-      <h1 class="oc-block-authsplit-title">Welcome back</h1>
-      <p class="oc-block-authsplit-subtitle">Sign in to your workspace</p>
-      <div class="oc-block-authsplit-fields">
-        <div class="oc-field">
-          <label class="oc-field-label" for="oc-authsplit-email">E-mail</label>
-          <input class="oc-input" id="oc-authsplit-email" name="email" type="email" autocomplete="username" placeholder="name@company.com" required>
-        </div>
-        <div class="oc-field">
-          <label class="oc-field-label" for="oc-authsplit-password">Password</label>
-          <div class="oc-input-reveal">
-            <input class="oc-input" id="oc-authsplit-password" name="password" type="password" autocomplete="current-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-block-authsplit-row">
-          <label><input class="oc-checkbox" type="checkbox" name="remember"> Remember me</label>
-          <a class="oc-link" href="#">Forgot password?</a>
-        </div>
-        <button class="oc-btn" type="submit" style="width:100%">Sign in</button>
-      </div>
-    </form>
-  </div>
-</div>
+<!-- OmniaUI block: auth-split - Sign-in with a brand panel (logo, quote) next to the form. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authsplit: Grid root (two columns from 62rem)
+       .oc-block-authsplit-brand: Left brand panel (primary gradient). Modifier --photo with style="--oc-authsplit-photo: url(…)" for a photo under a dark layer
+       .oc-block-authsplit-logo: Logo link
+       .oc-block-authsplit-quote: Quote (blockquote with p + footer)
+       .oc-block-authsplit-form: Right column that centers the card
+       .oc-block-authsplit-card: Form width limiter
+       .oc-block-authsplit-title / -subtitle: Heading and sub line
+       .oc-block-authsplit-fields / -row: Field stack and a justified row (remember me / forgot password)
+     Slots: logo, quote, title, subtitle, fields, submit, footer link
+-->
+<div class="oc-block-authsplit">
+  <aside class="oc-block-authsplit-brand">
+    <a class="oc-block-authsplit-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="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg> OmniaDesk</a>
+    <blockquote class="oc-block-authsplit-quote">
+      <p>&ldquo;One calm place for contacts, invoices and the day-to-day work.&rdquo;</p>
+      <footer>Serge Cools, founder</footer>
+    </blockquote>
+  </aside>
+  <div class="oc-block-authsplit-form">
+    <form class="oc-block-authsplit-card" action="#" method="post">
+      <h1 class="oc-block-authsplit-title">Welcome back</h1>
+      <p class="oc-block-authsplit-subtitle">Sign in to your workspace</p>
+      <div class="oc-block-authsplit-fields">
+        <div class="oc-field">
+          <label class="oc-field-label" for="oc-authsplit-email">E-mail</label>
+          <input class="oc-input" id="oc-authsplit-email" name="email" type="email" autocomplete="username" placeholder="name@company.com" required>
+        </div>
+        <div class="oc-field">
+          <label class="oc-field-label" for="oc-authsplit-password">Password</label>
+          <div class="oc-input-reveal">
+            <input class="oc-input" id="oc-authsplit-password" name="password" type="password" autocomplete="current-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-block-authsplit-row">
+          <label><input class="oc-checkbox" type="checkbox" name="remember"> Remember me</label>
+          <a class="oc-link" href="#">Forgot password?</a>
+        </div>
+        <button class="oc-btn" type="submit" style="width:100%">Sign in</button>
+      </div>
+    </form>
+  </div>
+</div>

package/blocks/auth.html

@@ -1,21 +1,21 @@
-<!-- OmniaUI block: auth — Sign-in card. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
-<div class="oc-block-auth">
-  <div class="oc-block-auth-card">
-    <h2>Sign in</h2>
-    <p class="oc-block-subtitle">Enter your credentials to continue</p>
-    <div class="oc-form-group">
-      <label class="oc-label">Email</label>
-      <input class="oc-input" type="email" placeholder="name@company.com">
-    </div>
-    <div class="oc-form-group">
-      <label class="oc-label">Password</label>
-      <input class="oc-input" type="password" placeholder="********">
-    </div>
-    <button class="oc-btn" style="width:100%;">Sign in</button>
-    <div class="oc-block-auth-divider">or continue with</div>
-    <button class="oc-btn oc-btn--outline" style="width:100%;">Sign in with Google</button>
-  </div>
-  <div class="oc-block-auth-footer">
-    Don't have an account? <a href="#">Sign up</a>
-  </div>
-</div>
+<!-- OmniaUI block: auth — Sign-in card. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-auth">
+  <div class="oc-block-auth-card">
+    <h2>Sign in</h2>
+    <p class="oc-block-subtitle">Enter your credentials to continue</p>
+    <div class="oc-form-group">
+      <label class="oc-label">Email</label>
+      <input class="oc-input" type="email" placeholder="name@company.com">
+    </div>
+    <div class="oc-form-group">
+      <label class="oc-label">Password</label>
+      <input class="oc-input" type="password" placeholder="********">
+    </div>
+    <button class="oc-btn" style="width:100%;">Sign in</button>
+    <div class="oc-block-auth-divider">or continue with</div>
+    <button class="oc-btn oc-btn--outline" style="width:100%;">Sign in with Google</button>
+  </div>
+  <div class="oc-block-auth-footer">
+    Don't have an account? <a href="#">Sign up</a>
+  </div>
+</div>

package/blocks/contact-grid.html

@@ -1,38 +1,38 @@
-<!-- OmniaUI block: contact-grid - Contact section with info cards for e-mail, phone, address and opening hours. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     File: packages/blocks/blocks/contact-grid.html | Map: section.oc-block-contact -> head -> grid -> cards (mark, title, lines)
-     Class API: .oc-block-contact (modifier --plain: no card frames), -head, -heading, -lead, -grid, -card (article or address),
-       -title, -line (p or a). Cards start with a product mark (.oc-product-mark--sm .oc-product-mark--soft).
--->
-<section class="oc-block-contact" aria-labelledby="oc-contact-title">
-  <div class="oc-block-contact-head">
-    <p class="oc-eyebrow">Contact</p>
-    <h2 class="oc-block-contact-heading" id="oc-contact-title">Let's talk about your project</h2>
-    <p class="oc-block-contact-lead">Mail, call or drop by. We answer every question within one working day.</p>
-  </div>
-  <div class="oc-block-contact-grid">
-    <article class="oc-block-contact-card">
-      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--blue" aria-hidden="true">&#9993;</span>
-      <h3 class="oc-block-contact-title">E-mail</h3>
-      <a class="oc-block-contact-line" href="mailto:hello@example.com">hello@example.com</a>
-      <p class="oc-block-contact-line">For quotes and questions.</p>
-    </article>
-    <article class="oc-block-contact-card">
-      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--green" aria-hidden="true">&#9742;</span>
-      <h3 class="oc-block-contact-title">Phone</h3>
-      <a class="oc-block-contact-line" href="tel:+3230000000">+32 3 000 00 00</a>
-      <p class="oc-block-contact-line">Monday to Friday.</p>
-    </article>
-    <address class="oc-block-contact-card">
-      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--orange" aria-hidden="true">&#9873;</span>
-      <span class="oc-block-contact-title">Office</span>
-      <span class="oc-block-contact-line">Acme Software</span>
-      <span class="oc-block-contact-line">Main Street 1, 2000 Antwerp</span>
-    </address>
-    <article class="oc-block-contact-card">
-      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--violet" aria-hidden="true">&#9719;</span>
-      <h3 class="oc-block-contact-title">Opening hours</h3>
-      <p class="oc-block-contact-line">Mon&ndash;Fri: 9:00 &ndash; 17:30</p>
-      <p class="oc-block-contact-line">Sat&ndash;Sun: closed</p>
-    </article>
-  </div>
-</section>
+<!-- OmniaUI block: contact-grid - Contact section with info cards for e-mail, phone, address and opening hours. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/contact-grid.html | Map: section.oc-block-contact -> head -> grid -> cards (mark, title, lines)
+     Class API: .oc-block-contact (modifier --plain: no card frames), -head, -heading, -lead, -grid, -card (article or address),
+       -title, -line (p or a). Cards start with a product mark (.oc-product-mark--sm .oc-product-mark--soft).
+-->
+<section class="oc-block-contact" aria-labelledby="oc-contact-title">
+  <div class="oc-block-contact-head">
+    <p class="oc-eyebrow">Contact</p>
+    <h2 class="oc-block-contact-heading" id="oc-contact-title">Let's talk about your project</h2>
+    <p class="oc-block-contact-lead">Mail, call or drop by. We answer every question within one working day.</p>
+  </div>
+  <div class="oc-block-contact-grid">
+    <article class="oc-block-contact-card">
+      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--blue" aria-hidden="true">&#9993;</span>
+      <h3 class="oc-block-contact-title">E-mail</h3>
+      <a class="oc-block-contact-line" href="mailto:hello@example.com">hello@example.com</a>
+      <p class="oc-block-contact-line">For quotes and questions.</p>
+    </article>
+    <article class="oc-block-contact-card">
+      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--green" aria-hidden="true">&#9742;</span>
+      <h3 class="oc-block-contact-title">Phone</h3>
+      <a class="oc-block-contact-line" href="tel:+3230000000">+32 3 000 00 00</a>
+      <p class="oc-block-contact-line">Monday to Friday.</p>
+    </article>
+    <address class="oc-block-contact-card">
+      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--orange" aria-hidden="true">&#9873;</span>
+      <span class="oc-block-contact-title">Office</span>
+      <span class="oc-block-contact-line">Acme Software</span>
+      <span class="oc-block-contact-line">Main Street 1, 2000 Antwerp</span>
+    </address>
+    <article class="oc-block-contact-card">
+      <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--violet" aria-hidden="true">&#9719;</span>
+      <h3 class="oc-block-contact-title">Opening hours</h3>
+      <p class="oc-block-contact-line">Mon&ndash;Fri: 9:00 &ndash; 17:30</p>
+      <p class="oc-block-contact-line">Sat&ndash;Sun: closed</p>
+    </article>
+  </div>
+</section>

package/blocks/cta.html

@@ -1,8 +1,8 @@
-<!-- OmniaUI block: cta — Call to action banner. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
-<div class="oc-block-cta">
-  <h2>Ready to start building?</h2>
-  <p>Get OmniaCSS and ship your next project faster.</p>
-  <div class="oc-block-hero-actions">
-    <button class="oc-btn oc-btn--lg">Get started free</button>
-  </div>
-</div>
+<!-- OmniaUI block: cta — Call to action banner. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-cta">
+  <h2>Ready to start building?</h2>
+  <p>Get OmniaCSS and ship your next project faster.</p>
+  <div class="oc-block-hero-actions">
+    <button class="oc-btn oc-btn--lg">Get started free</button>
+  </div>
+</div>