@birdycom/omniaui-blocks 0.11.0 → 0.11.2

package/blocks/data-table.html

@@ -1,111 +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>
+<!-- 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

@@ -1,33 +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>
+<!-- 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

@@ -1,18 +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>
+<!-- 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

@@ -1,41 +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>
+<!-- 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

@@ -1,34 +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>
+<!-- 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, --photo with style="--oc-authduo-photo: url(…)") 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

@@ -1,28 +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>
+<!-- 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

@@ -1,27 +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>
+<!-- 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>