@birdycom/omniaui-blocks 0.11.0 → 0.11.2

package/blocks/sidebar-05.html

@@ -1,68 +1,68 @@
-<!-- OmniaUI block: sidebar-05 - Menu items that expand a submenu with details and summary. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
-       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
-       .oc-block-sb-ph: Content placeholder block (replace with real content)
-       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
-       .oc-block-sb-group: details element that makes a sidebar group label collapsible
-       .oc-block-sb-rail: Narrow icon rail for the double sidebar
-       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
-       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
--->
-<div class="oc-block-sb">
-  <aside class="oc-sidebar" aria-label="Main navigation">
-    <div class="oc-sidebar-header">
-      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
-        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
-        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
-      </a>
-    </div>
-    <div class="oc-sidebar-content">
-      <div class="oc-sidebar-group">
-        <div class="oc-sidebar-group-label">Platform</div>
-        <ul class="oc-sidebar-menu">
-          <li>
-            <details class="oc-sidebar-collapsible" open>
-              <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="oc-sidebar-menu-label">Dashboard</span></summary>
-              <ul class="oc-sidebar-menu-sub">
-                <li><a class="oc-sidebar-menu-button" href="#">Overview</a></li>
-                <li><a class="oc-sidebar-menu-button" href="#">Analytics</a></li>
-                <li><a class="oc-sidebar-menu-button" href="#">Reports</a></li>
-              </ul>
-            </details>
-          </li>
-          <li>
-            <details class="oc-sidebar-collapsible">
-              <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="oc-sidebar-menu-label">Projects</span></summary>
-              <ul class="oc-sidebar-menu-sub">
-                <li><a class="oc-sidebar-menu-button" href="#">Active</a></li>
-                <li><a class="oc-sidebar-menu-button" href="#">Archived</a></li>
-              </ul>
-            </details>
-          </li>
-          <li>
-            <details class="oc-sidebar-collapsible">
-              <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg><span class="oc-sidebar-menu-label">Team</span></summary>
-              <ul class="oc-sidebar-menu-sub">
-                <li><a class="oc-sidebar-menu-button" href="#">Members</a></li>
-                <li><a class="oc-sidebar-menu-button" href="#">Roles</a></li>
-                <li><a class="oc-sidebar-menu-button" href="#">Invitations</a></li>
-              </ul>
-            </details>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </aside>
-  <div class="oc-block-sb-main">
-    <header class="oc-block-sb-bar">
-      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
-      <span class="oc-block-sb-sep"></span>
-      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
-    </header>
-    <div class="oc-block-sb-body">
-      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
-      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: sidebar-05 - Menu items that expand a submenu with details and summary. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-sb: Frame: grid of sidebar + main. Height via --oc-block-sb-height. Modifiers: --right, --both, --double, --floating, --inset
+       .oc-block-sb-main / -bar / -body: Main column, top bar (modifier --sticky) and placeholder body (modifier --scroll)
+       .oc-block-sb-ph: Content placeholder block (replace with real content)
+       .oc-block-sb-toggle: Hidden checkbox: its label collapses the sidebar to icons (CSS only, :has())
+       .oc-block-sb-group: details element that makes a sidebar group label collapsible
+       .oc-block-sb-rail: Narrow icon rail for the double sidebar
+       .oc-block-sb-tile / -sub: Square brand tile and small secondary line inside a menu button
+       .oc-sidebar: The sidebar component (modifiers --collapsed, --right, --floating); see Sidebar
+-->
+<div class="oc-block-sb">
+  <aside class="oc-sidebar" aria-label="Main navigation">
+    <div class="oc-sidebar-header">
+      <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
+        <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+        <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
+      </a>
+    </div>
+    <div class="oc-sidebar-content">
+      <div class="oc-sidebar-group">
+        <div class="oc-sidebar-group-label">Platform</div>
+        <ul class="oc-sidebar-menu">
+          <li>
+            <details class="oc-sidebar-collapsible" open>
+              <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="oc-sidebar-menu-label">Dashboard</span></summary>
+              <ul class="oc-sidebar-menu-sub">
+                <li><a class="oc-sidebar-menu-button" href="#">Overview</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Analytics</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Reports</a></li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <details class="oc-sidebar-collapsible">
+              <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="oc-sidebar-menu-label">Projects</span></summary>
+              <ul class="oc-sidebar-menu-sub">
+                <li><a class="oc-sidebar-menu-button" href="#">Active</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Archived</a></li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <details class="oc-sidebar-collapsible">
+              <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg><span class="oc-sidebar-menu-label">Team</span></summary>
+              <ul class="oc-sidebar-menu-sub">
+                <li><a class="oc-sidebar-menu-button" href="#">Members</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Roles</a></li>
+                <li><a class="oc-sidebar-menu-button" href="#">Invitations</a></li>
+              </ul>
+            </details>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </aside>
+  <div class="oc-block-sb-main">
+    <header class="oc-block-sb-bar">
+      <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
+      <span class="oc-block-sb-sep"></span>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Building</a></li><li class="oc-breadcrumb-item" aria-current="page">Overview</li></ol></nav>
+    </header>
+    <div class="oc-block-sb-body">
+      <div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div><div class="oc-block-sb-ph"></div>
+      <div class="oc-block-sb-ph oc-block-sb-ph--wide"></div>
+    </div>
+  </div>
+</div>

package/blocks/signup-01.html

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

package/blocks/signup-02.html

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

package/blocks/site-footer.html

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

package/blocks/site-header.html

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

package/blocks/spotlight.html

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

package/blocks/stats-counter.html

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

package/blocks/stats.html

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