@birdycom/omniaui-blocks 0.0.0-stage → 0.11.0

package/LICENSE

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

package/README.md

@@ -1,3 +1,10 @@
-# Temporary Holding Version
+# @birdycom/omniaui-blocks
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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

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

package/blocks/app-header.html

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

package/blocks/app-shell.html

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

package/blocks/auth-split.html

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

package/blocks/auth.html

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

package/blocks/contact-grid.html

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

package/blocks/cta.html

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

package/blocks/data-table.html

@@ -0,0 +1,111 @@
+<!-- OmniaUI block: data-table - Card with title, actions, search toolbar, sortable table, bulk bar and pagination footer. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-card.oc-block-datatable: Card root
+       .oc-block-datatable-head / -title / -description: Card header area
+       .oc-block-datatable-body: Padded body
+       .oc-table-toolbar: Search + filters row (.oc-table-toolbar-spacer pushes items right)
+       .oc-filter-pills / .oc-filter-pill: Segmented link filters (aria-current="true")
+       .oc-block-datatable-bulk: Selection bar (appears when rows are selected)
+       .oc-table-wrap > .oc-table: Table with .oc-table-sort headers, .oc-table-actions cells (see Table)
+       .oc-table-footer: Entries text, page-size select and .oc-pagination
+     Slots: title, description, header actions, toolbar, table, footer
+-->
+<section class="oc-card oc-block-datatable">
+  <header class="oc-block-datatable-head">
+    <div>
+      <h2 class="oc-block-datatable-title">Contacts</h2>
+      <p class="oc-block-datatable-description">All customers and suppliers.</p>
+    </div>
+    <div>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Export</button>
+      <button class="oc-btn oc-btn--sm" type="button">New contact</button>
+    </div>
+  </header>
+  <div class="oc-block-datatable-body">
+    <div class="oc-table-toolbar">
+      <input class="oc-input" type="search" placeholder="Search contacts..." aria-label="Search contacts">
+      <div class="oc-filter-pills" role="group" aria-label="Status filter">
+        <a class="oc-filter-pill" href="#" aria-current="true">Active</a>
+        <a class="oc-filter-pill" href="#">Including archived</a>
+        <a class="oc-filter-pill" href="#">Archived only</a>
+      </div>
+      <span class="oc-table-toolbar-spacer"></span>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" popovertarget="oc-datatable-columns">Columns</button>
+      <div class="oc-popover oc-popover--sm" id="oc-datatable-columns" popover>
+        <label><input class="oc-checkbox" type="checkbox" checked> Name</label><br>
+        <label><input class="oc-checkbox" type="checkbox" checked> E-mail</label><br>
+        <label><input class="oc-checkbox" type="checkbox" checked> Status</label>
+      </div>
+    </div>
+    <div class="oc-block-datatable-bulk"><span>2 selected</span><button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Export</button><button class="oc-btn oc-btn--destructive oc-btn--sm" type="button">Delete</button></div>
+    <div class="oc-table-wrap">
+      <table class="oc-table">
+        <thead>
+          <tr>
+            <th style="width:2.5rem"><input class="oc-checkbox" type="checkbox" aria-label="Select all"></th>
+            <th aria-sort="ascending"><a class="oc-table-sort" href="?sort=name">Name</a></th>
+            <th><a class="oc-table-sort" href="?sort=email">E-mail</a></th>
+            <th>Status</th>
+            <th data-numeric><a class="oc-table-sort" href="?sort=balance">Balance</a></th>
+            <th><span class="oc-visually-hidden">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Ada Lovelace"></td>
+          <td>Ada Lovelace</td>
+          <td>ada@example.com</td>
+          <td><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-numeric>420.00</td>
+          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        </tr>
+        <tr>
+          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Alan Turing"></td>
+          <td>Alan Turing</td>
+          <td>alan@example.com</td>
+          <td><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-numeric>840.00</td>
+          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        </tr>
+        <tr>
+          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Grace Hopper"></td>
+          <td>Grace Hopper</td>
+          <td>grace@example.com</td>
+          <td><span class="oc-badge oc-badge--warning">Pending</span></td>
+          <td data-numeric>1260.00</td>
+          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        </tr>
+        <tr>
+          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Linus Torvalds"></td>
+          <td>Linus Torvalds</td>
+          <td>linus@example.com</td>
+          <td><span class="oc-badge oc-badge--secondary">Archived</span></td>
+          <td data-numeric>1680.00</td>
+          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        </tr>
+        <tr>
+          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Margaret Hamilton"></td>
+          <td>Margaret Hamilton</td>
+          <td>margaret@example.com</td>
+          <td><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-numeric>2100.00</td>
+          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="oc-table-footer">
+      <span>Showing 1 to 5 of 48 entries</span>
+      <label>Rows per page <select class="oc-select" aria-label="Rows per page"><option>10</option><option>25</option><option>50</option></select></label>
+      <nav aria-label="Pagination">
+        <ul class="oc-pagination">
+          <li class="oc-pagination-item"><a href="#" aria-label="Previous">&lsaquo;</a></li>
+          <li class="oc-pagination-item is-active"><a href="#" aria-current="page">1</a></li>
+          <li class="oc-pagination-item"><a href="#">2</a></li>
+          <li class="oc-pagination-item"><a href="#">3</a></li>
+          <li class="oc-pagination-item"><a href="#" aria-label="Next">&rsaquo;</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</section>

package/blocks/faq.html

@@ -0,0 +1,33 @@
+<!-- OmniaUI block: faq - FAQ section: eyebrow, title, lead and an exclusive accordion on native details name (no JavaScript). Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/faq.html | Map: section.oc-block-faq -> inner -> head -> .oc-accordion (details name) -> more line
+     Class API: .oc-block-faq (modifier --split: head left, questions right), -inner, -head, -title, -lead,
+       -list (on the .oc-accordion), -more. Items: details.oc-accordion-item name="…" + summary.oc-accordion-trigger + .oc-accordion-content
+-->
+<section class="oc-block-faq" aria-labelledby="oc-faq-title">
+  <div class="oc-block-faq-inner">
+    <div class="oc-block-faq-head">
+      <p class="oc-eyebrow">FAQ</p>
+      <h2 class="oc-block-faq-title" id="oc-faq-title">Frequently asked questions</h2>
+      <p class="oc-block-faq-lead">Everything you need to know before you start. Can't find your answer? Just ask.</p>
+    </div>
+    <div class="oc-accordion oc-block-faq-list">
+      <details class="oc-accordion-item" name="oc-faq" open>
+        <summary class="oc-accordion-trigger">Can I try it for free?</summary>
+        <div class="oc-accordion-content">Yes. Every plan starts with a 30-day trial. No credit card needed.</div>
+      </details>
+      <details class="oc-accordion-item" name="oc-faq">
+        <summary class="oc-accordion-trigger">Can I switch plans later?</summary>
+        <div class="oc-accordion-content">Any time. Upgrades apply at once; downgrades start at the next billing period.</div>
+      </details>
+      <details class="oc-accordion-item" name="oc-faq">
+        <summary class="oc-accordion-trigger">Where is my data stored?</summary>
+        <div class="oc-accordion-content">In data centers inside the European Union, with daily encrypted backups.</div>
+      </details>
+      <details class="oc-accordion-item" name="oc-faq">
+        <summary class="oc-accordion-trigger">Do you offer support?</summary>
+        <div class="oc-accordion-content">E-mail support is included in every plan. Pro plans also get phone support.</div>
+      </details>
+    </div>
+    <p class="oc-block-faq-more">Still have questions? <a class="oc-link-arrow" href="#contact">Contact us</a></p>
+  </div>
+</section>

package/blocks/features.html

@@ -0,0 +1,18 @@
+<!-- OmniaUI block: features — Feature grid with icons. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-features">
+  <h2>Everything you need</h2>
+  <p>Built for speed, customization and developer experience.</p>
+  <div class="oc-block-features-grid">
+    <div class="oc-block-feature-card">
+      <div class="oc-block-feature-icon">&#9889;</div>
+      <h3>Fast by default</h3>
+      <p>Optimized CSS output with PostCSS and cssnano.</p>
+    </div>
+    <div class="oc-block-feature-card">
+      <div class="oc-block-feature-icon">&#127912;</div>
+      <h3>Themeable</h3>
+      <p>CSS variables for every token. Swap colors, spacing and radii in one place.</p>
+    </div>
+    <!-- ... more cards ... -->
+  </div>
+</div>

package/blocks/footer.html

@@ -0,0 +1,41 @@
+<!-- OmniaUI block: footer — Multi-column site footer. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-footer">
+  <div class="oc-block-footer-grid">
+    <div class="oc-block-footer-col">
+      <h4>Product</h4>
+      <ul>
+        <li><a href="#">Features</a></li>
+        <li><a href="#">Pricing</a></li>
+        <li><a href="#">Changelog</a></li>
+      </ul>
+    </div>
+    <div class="oc-block-footer-col">
+      <h4>Docs</h4>
+      <ul>
+        <li><a href="#">Getting started</a></li>
+        <li><a href="#">Components</a></li>
+        <li><a href="#">Blocks</a></li>
+      </ul>
+    </div>
+    <div class="oc-block-footer-col">
+      <h4>Community</h4>
+      <ul>
+        <li><a href="#">GitHub</a></li>
+        <li><a href="#">Discord</a></li>
+        <li><a href="#">Twitter</a></li>
+      </ul>
+    </div>
+    <div class="oc-block-footer-col">
+      <h4>Legal</h4>
+      <ul>
+        <li><a href="#">Privacy</a></li>
+        <li><a href="#">Terms</a></li>
+        <li><a href="#">License</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="oc-block-footer-bottom">
+    <span>&copy; 2026 Birdycom. All rights reserved.</span>
+    <span>Built with OmniaCSS</span>
+  </div>
+</div>

package/blocks/forgot-password.html

@@ -0,0 +1,34 @@
+<!-- OmniaUI block: forgot-password - Request a reset link: e-mail field, submit and a back link. 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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Forgot your password?</h1>
+      <p class="oc-block-authcard-text">Enter your e-mail and we will send you a reset link</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-forgot-email">E-mail</label>
+        <input class="oc-input" id="oc-forgot-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
+      </div>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Send reset link</button>
+    </div>
+    <p class="oc-block-authcard-foot"><a href="#">Back to sign in</a></p>
+  </form>
+</div>

package/blocks/form-page.html

@@ -0,0 +1,28 @@
+<!-- OmniaUI block: form-page - Collapsible form sections in a grid with a sticky action bar. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-formpage: Column wrapper (max 56rem)
+       details.oc-collapsible: Section (see Collapsible section)
+       .oc-block-formpage-grid: Two-column field grid from 40rem
+       .oc-block-formpage-actions: Sticky bottom action bar
+-->
+<form class="oc-block-formpage" action="#" method="post">
+  <details class="oc-collapsible" open>
+    <summary><svg class="oc-collapsible-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="9"/><path d="M12 11v5M12 8h.01"/></svg><span class="oc-collapsible-title">General information</span></summary>
+    <div class="oc-collapsible-content">
+      <div class="oc-block-formpage-grid">
+        <div class="oc-field"><label class="oc-field-label" for="oc-form-name">Name</label><input class="oc-input" id="oc-form-name" name="name"></div>
+        <div class="oc-field"><label class="oc-field-label" for="oc-form-vat">VAT number</label><input class="oc-input" id="oc-form-vat" name="vat"></div>
+        <div class="oc-field"><label class="oc-field-label" for="oc-form-email">E-mail</label><input class="oc-input" id="oc-form-email" name="email" type="email"></div>
+        <div class="oc-field"><label class="oc-field-label" for="oc-form-country">Country</label><select class="oc-select" id="oc-form-country" name="country"><option>Belgium</option><option>Netherlands</option></select></div>
+      </div>
+    </div>
+  </details>
+  <details class="oc-collapsible">
+    <summary><svg class="oc-collapsible-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"/></svg><span class="oc-collapsible-title">Notes</span></summary>
+    <div class="oc-collapsible-content"><textarea class="oc-input" name="notes" rows="3" aria-label="Notes"></textarea></div>
+  </details>
+  <div class="oc-block-formpage-actions">
+    <button class="oc-btn oc-btn--outline" type="button">Cancel</button>
+    <button class="oc-btn" type="submit">Save</button>
+  </div>
+</form>

package/blocks/hero-code.html

@@ -0,0 +1,27 @@
+<!-- OmniaUI block: hero-code — Landing hero: eyebrow, display title with gradient word, lead, two buttons and a code window with floating icon tiles. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container oc-split">
+    <div>
+      <p class="oc-eyebrow">Software development &middot; since 2001</p>
+      <h1 class="oc-display">We build software that moves your business <span class="oc-text-gradient">forward</span>.</h1>
+      <p class="oc-lead">From a modular ERP to a custom app for a single customer: we design, build and maintain web applications, desktop tools and plugins.</p>
+      <div class="flex flex-wrap gap-1 mt-2">
+        <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#software">View our software &rarr;</a>
+        <a class="oc-btn oc-btn--glass oc-btn--lg" href="#contact">Discuss your project</a>
+      </div>
+    </div>
+    <div class="relative p-2">
+      <span class="oc-icon-tile oc-icon-tile--float oc-accent--green absolute" style="inset: -0.5rem auto auto 8%;" aria-hidden="true">&#9670;</span>
+      <span class="oc-icon-tile oc-icon-tile--float oc-accent--violet absolute" style="inset: 0 6% auto auto; animation-delay: -2s;" aria-hidden="true">&#9673;</span>
+      <span class="oc-icon-tile oc-icon-tile--float oc-accent--orange absolute" style="inset: auto 10% -0.5rem auto; animation-delay: -4s;" aria-hidden="true">&#9650;</span>
+      <div class="oc-code-window">
+        <div class="oc-code-window__bar"><i></i><i></i><i></i><span class="oc-code-window__title">projects.php</span></div>
+<pre class="oc-code-window__body">return [
+  'erp'    => OmniaDesk::class,
+  'design' => OmniaCSS::class,
+  'next'   => YourProject::class,
+];</pre>
+      </div>
+    </div>
+  </div>
+</section>