@birdycom/omniaui-blocks 0.11.0 → 0.11.1

package/blocks/hero-orbit.html

@@ -1,38 +1,38 @@
-<!-- OmniaUI block: hero-orbit - Landing hero with a code window and product marks that slowly orbit around it. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     File: packages/blocks/blocks/hero-orbit.html | Map: section -> container + split -> copy (eyebrow, display, lead, buttons) -> visual (ring with marks + center window)
-     Class API: .oc-block-orbit-visual (square stage), -ring (turning circle), -mark (style="--oc-orbit-angle: 60deg"),
-       -center (the code window or any visual). --oc-orbit-duration sets the speed (default 60s). Reduced motion: no orbit.
-       Copy uses the showcase classes (.oc-eyebrow, .oc-display, .oc-text-gradient, .oc-lead, .oc-btn--gradient / --glass).
--->
-<section class="oc-block-orbit oc-section-pad">
-  <div class="oc-container oc-split">
-    <div>
-      <p class="oc-eyebrow">Software studio &middot; since 2012</p>
-      <h1 class="oc-display">One team for all your <span class="oc-text-gradient">software</span>.</h1>
-      <p class="oc-lead">Business apps, websites and desktop tools. We design, build and maintain them, and stay your single point of contact.</p>
-      <div class="flex flex-wrap gap-1 mt-2">
-        <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#products">See our products &rarr;</a>
-        <a class="oc-btn oc-btn--glass oc-btn--lg" href="#contact">Start a project</a>
-      </div>
-    </div>
-    <div class="oc-block-orbit-visual">
-      <div class="oc-block-orbit-ring" aria-hidden="true">
-        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 0deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--green">&#9670;</span></span>
-        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 60deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--violet">&#9673;</span></span>
-        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 120deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--orange">&#9650;</span></span>
-        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 180deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--cyan">&#9733;</span></span>
-        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 240deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--red">&#9829;</span></span>
-        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 300deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--yellow">&#9728;</span></span>
-      </div>
-      <div class="oc-code-window oc-block-orbit-center">
-        <div class="oc-code-window__bar"><i></i><i></i><i></i><span class="oc-code-window__title">products.php</span></div>
-<pre class="oc-code-window__body">return [
-  'erp'    => AcmeDesk::class,
-  'shop'   => AcmeShop::class,
-  'design' => AcmeDesign::class,
-  'next'   => YourProject::class,
-];</pre>
-      </div>
-    </div>
-  </div>
-</section>
+<!-- OmniaUI block: hero-orbit - Landing hero with a code window and product marks that slowly orbit around it. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/hero-orbit.html | Map: section -> container + split -> copy (eyebrow, display, lead, buttons) -> visual (ring with marks + center window)
+     Class API: .oc-block-orbit-visual (square stage), -ring (turning circle), -mark (style="--oc-orbit-angle: 60deg"),
+       -center (the code window or any visual). --oc-orbit-duration sets the speed (default 60s). Reduced motion: no orbit.
+       Copy uses the showcase classes (.oc-eyebrow, .oc-display, .oc-text-gradient, .oc-lead, .oc-btn--gradient / --glass).
+-->
+<section class="oc-block-orbit oc-section-pad">
+  <div class="oc-container oc-split">
+    <div>
+      <p class="oc-eyebrow">Software studio &middot; since 2012</p>
+      <h1 class="oc-display">One team for all your <span class="oc-text-gradient">software</span>.</h1>
+      <p class="oc-lead">Business apps, websites and desktop tools. We design, build and maintain them, and stay your single point of contact.</p>
+      <div class="flex flex-wrap gap-1 mt-2">
+        <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#products">See our products &rarr;</a>
+        <a class="oc-btn oc-btn--glass oc-btn--lg" href="#contact">Start a project</a>
+      </div>
+    </div>
+    <div class="oc-block-orbit-visual">
+      <div class="oc-block-orbit-ring" aria-hidden="true">
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 0deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--green">&#9670;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 60deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--violet">&#9673;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 120deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--orange">&#9650;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 180deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--cyan">&#9733;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 240deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--red">&#9829;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 300deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--yellow">&#9728;</span></span>
+      </div>
+      <div class="oc-code-window oc-block-orbit-center">
+        <div class="oc-code-window__bar"><i></i><i></i><i></i><span class="oc-code-window__title">products.php</span></div>
+<pre class="oc-code-window__body">return [
+  'erp'    => AcmeDesk::class,
+  'shop'   => AcmeShop::class,
+  'design' => AcmeDesign::class,
+  'next'   => YourProject::class,
+];</pre>
+      </div>
+    </div>
+  </div>
+</section>

package/blocks/hero-split.html

@@ -1,12 +1,12 @@
-<!-- OmniaUI block: hero-split — Hero with text left and visual right. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
-<div class="oc-block-hero-split">
-  <div>
-    <h1>Ship products, not CSS</h1>
-    <p>Stop writing repetitive styles. Use pre-built utilities and components to move fast.</p>
-    <div class="oc-block-hero-actions justify-start">
-      <button class="oc-btn">Start building</button>
-      <button class="oc-btn oc-btn--ghost">Learn more</button>
-    </div>
-  </div>
-  <div class="oc-block-hero-visual">Preview / Image placeholder</div>
-</div>
+<!-- OmniaUI block: hero-split — Hero with text left and visual right. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-hero-split">
+  <div>
+    <h1>Ship products, not CSS</h1>
+    <p>Stop writing repetitive styles. Use pre-built utilities and components to move fast.</p>
+    <div class="oc-block-hero-actions justify-start">
+      <button class="oc-btn">Start building</button>
+      <button class="oc-btn oc-btn--ghost">Learn more</button>
+    </div>
+  </div>
+  <div class="oc-block-hero-visual">Preview / Image placeholder</div>
+</div>

package/blocks/hero.html

@@ -1,10 +1,10 @@
-<!-- OmniaUI block: hero — Centered hero with badge, headline, text and actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
-<div class="oc-block-hero">
-  <span class="oc-block-hero-badge">New in v0.1.6</span>
-  <h1>Build faster with OmniaCSS</h1>
-  <p>A utility-first CSS framework with component primitives and pre-composed blocks for modern web apps.</p>
-  <div class="oc-block-hero-actions">
-    <button class="oc-btn oc-btn--lg">Get started</button>
-    <button class="oc-btn oc-btn--outline oc-btn--lg">View docs</button>
-  </div>
-</div>
+<!-- OmniaUI block: hero — Centered hero with badge, headline, text and actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-hero">
+  <span class="oc-block-hero-badge">New in v0.1.6</span>
+  <h1>Build faster with OmniaCSS</h1>
+  <p>A utility-first CSS framework with component primitives and pre-composed blocks for modern web apps.</p>
+  <div class="oc-block-hero-actions">
+    <button class="oc-btn oc-btn--lg">Get started</button>
+    <button class="oc-btn oc-btn--outline oc-btn--lg">View docs</button>
+  </div>
+</div>

package/blocks/login-01.html

@@ -1,41 +1,41 @@
-<!-- OmniaUI block: login-01 - Centered sign-in card with e-mail, password and a link to sign up. 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">Login to your account</h1>
-      <p class="oc-block-authcard-text">Enter your e-mail below to login</p>
-    </div>
-    <div class="oc-block-authcard-fields">
-      <div class="oc-field">
-        <label class="oc-field-label" for="oc-login01-email">E-mail</label>
-        <input class="oc-input" id="oc-login01-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
-      </div>
-      <div class="oc-field">
-        <label class="oc-field-label" for="oc-login01-password">Password</label>
-        <div class="oc-input-reveal">
-          <input class="oc-input" id="oc-login01-password" name="oc-login01-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>
-      <button class="oc-btn oc-block-authcard-submit" type="submit">Login</button>
-    </div>
-    <p class="oc-block-authcard-foot">Don't have an account? <a href="#">Sign up</a></p>
-  </form>
-</div>
+<!-- OmniaUI block: login-01 - Centered sign-in card with e-mail, password and a link to sign up. 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">Login to your account</h1>
+      <p class="oc-block-authcard-text">Enter your e-mail below to login</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login01-email">E-mail</label>
+        <input class="oc-input" id="oc-login01-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login01-password">Password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-login01-password" name="oc-login01-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>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Login</button>
+    </div>
+    <p class="oc-block-authcard-foot">Don't have an account? <a href="#">Sign up</a></p>
+  </form>
+</div>

package/blocks/login-02.html

@@ -1,55 +1,55 @@
-<!-- OmniaUI block: login-02 - Two columns: image/brand panel with a quote and the form on the other side; the panel hides when the block is narrow. 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">
-  <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;This workspace saved me hours of admin every week.&rdquo;</p>
-        <footer>Sofia Davis, operations lead</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">Welcome back</h1>
-          <p class="oc-block-authcard-text">Sign in to your workspace</p>
-        </div>
-        <div class="oc-block-authcard-fields">
-          <div class="oc-field">
-            <label class="oc-field-label" for="oc-login02-email">E-mail</label>
-            <input class="oc-input" id="oc-login02-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
-          </div>
-          <div class="oc-field">
-            <label class="oc-field-label" for="oc-login02-password">Password</label>
-            <div class="oc-input-reveal">
-              <input class="oc-input" id="oc-login02-password" name="oc-login02-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-authcard-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 oc-block-authcard-submit" type="submit">Sign in</button>
-        </div>
-        <p class="oc-block-authcard-foot">No account yet? <a href="#">Create one</a></p>
-      </form>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: login-02 - Two columns: image/brand panel with a quote and the form on the other side; the panel hides when the block is narrow. 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">
+  <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;This workspace saved me hours of admin every week.&rdquo;</p>
+        <footer>Sofia Davis, operations lead</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">Welcome back</h1>
+          <p class="oc-block-authcard-text">Sign in to your workspace</p>
+        </div>
+        <div class="oc-block-authcard-fields">
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-login02-email">E-mail</label>
+            <input class="oc-input" id="oc-login02-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
+          </div>
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-login02-password">Password</label>
+            <div class="oc-input-reveal">
+              <input class="oc-input" id="oc-login02-password" name="oc-login02-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-authcard-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 oc-block-authcard-submit" type="submit">Sign in</button>
+        </div>
+        <p class="oc-block-authcard-foot">No account yet? <a href="#">Create one</a></p>
+      </form>
+    </div>
+  </div>
+</div>

package/blocks/login-03.html

@@ -1,47 +1,47 @@
-<!-- OmniaUI block: login-03 - Card on a muted page with social sign-in buttons above the e-mail form. 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">
-  <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">Welcome back</h1>
-      <p class="oc-block-authcard-text">Login with your Apple or Google account</p>
-    </div>
-    <div class="oc-block-authsocial">
-      <button class="oc-btn oc-btn--outline" type="button">Apple</button>
-      <button class="oc-btn oc-btn--outline" type="button">Google</button>
-    </div>
-    <div class="oc-separator-text">Or continue with</div>
-    <div class="oc-block-authcard-fields">
-      <div class="oc-field">
-        <label class="oc-field-label" for="oc-login03-email">E-mail</label>
-        <input class="oc-input" id="oc-login03-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
-      </div>
-      <div class="oc-field">
-        <label class="oc-field-label" for="oc-login03-password">Password</label>
-        <div class="oc-input-reveal">
-          <input class="oc-input" id="oc-login03-password" name="oc-login03-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>
-      <button class="oc-btn oc-block-authcard-submit" type="submit">Login</button>
-    </div>
-    <p class="oc-block-authcard-foot">Don't have an account? <a href="#">Sign up</a></p>
-    <p class="oc-block-authcard-legal">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
-  </form>
-</div>
+<!-- OmniaUI block: login-03 - Card on a muted page with social sign-in buttons above the e-mail form. 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">
+  <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">Welcome back</h1>
+      <p class="oc-block-authcard-text">Login with your Apple or Google account</p>
+    </div>
+    <div class="oc-block-authsocial">
+      <button class="oc-btn oc-btn--outline" type="button">Apple</button>
+      <button class="oc-btn oc-btn--outline" type="button">Google</button>
+    </div>
+    <div class="oc-separator-text">Or continue with</div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login03-email">E-mail</label>
+        <input class="oc-input" id="oc-login03-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login03-password">Password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-login03-password" name="oc-login03-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>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Login</button>
+    </div>
+    <p class="oc-block-authcard-foot">Don't have an account? <a href="#">Sign up</a></p>
+    <p class="oc-block-authcard-legal">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
+  </form>
+</div>

package/blocks/module-header.html

@@ -1,24 +1,24 @@
-<!-- OmniaUI block: module-header - Page header with icon tile, title, intro, meta badges and action row. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-block-modulehead: Wrapper
-       .oc-block-modulehead-band: Tinted band with icon and text
-       .oc-block-modulehead-icon: Icon tile
-       .oc-block-modulehead-title / -intro: Title and intro
-       .oc-block-modulehead-meta: Row for badges under the title (optional)
-       .oc-block-modulehead-actions: Row for buttons below the band (optional)
-     Slots: icon, title, intro, meta, actions
--->
-<header class="oc-block-modulehead">
-  <div class="oc-block-modulehead-band">
-    <span class="oc-block-modulehead-icon" 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"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg></span>
-    <div class="oc-block-modulehead-body">
-      <h1 class="oc-block-modulehead-title">Contacts</h1>
-      <p class="oc-block-modulehead-intro">Manage customers, suppliers and the people who work there.</p>
-      <div class="oc-block-modulehead-meta"><span class="oc-badge oc-badge--info">Pro</span><span class="oc-badge oc-badge--success">Synced</span></div>
-    </div>
-  </div>
-  <div class="oc-block-modulehead-actions">
-    <a class="oc-back-link" href="#">Back to CRM</a>
-    <button class="oc-btn" type="button">New contact</button>
-  </div>
-</header>
+<!-- OmniaUI block: module-header - Page header with icon tile, title, intro, meta badges and action row. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-modulehead: Wrapper
+       .oc-block-modulehead-band: Tinted band with icon and text
+       .oc-block-modulehead-icon: Icon tile
+       .oc-block-modulehead-title / -intro: Title and intro
+       .oc-block-modulehead-meta: Row for badges under the title (optional)
+       .oc-block-modulehead-actions: Row for buttons below the band (optional)
+     Slots: icon, title, intro, meta, actions
+-->
+<header class="oc-block-modulehead">
+  <div class="oc-block-modulehead-band">
+    <span class="oc-block-modulehead-icon" 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"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg></span>
+    <div class="oc-block-modulehead-body">
+      <h1 class="oc-block-modulehead-title">Contacts</h1>
+      <p class="oc-block-modulehead-intro">Manage customers, suppliers and the people who work there.</p>
+      <div class="oc-block-modulehead-meta"><span class="oc-badge oc-badge--info">Pro</span><span class="oc-badge oc-badge--success">Synced</span></div>
+    </div>
+  </div>
+  <div class="oc-block-modulehead-actions">
+    <a class="oc-back-link" href="#">Back to CRM</a>
+    <button class="oc-btn" type="button">New contact</button>
+  </div>
+</header>

package/blocks/otp-01.html

@@ -1,36 +1,36 @@
-<!-- OmniaUI block: otp-01 - Verification card: six-digit code, verify button and a resend 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)
-       .oc-otp: Code input drawn as cells (component); set --oc-otp-length and maxlength
--->
-<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 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></span>
-    <div class="oc-block-authcard-head">
-      <h1 class="oc-block-authcard-title">Enter verification code</h1>
-      <p class="oc-block-authcard-text">We sent a 6-digit code to your e-mail</p>
-    </div>
-    <div class="oc-block-authcard-fields">
-      <div class="oc-field">
-        <label class="oc-field-label" for="oc-otp01-code">Verification code</label>
-        <input class="oc-otp" id="oc-otp01-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" style="--oc-otp-length: 6">
-        <p class="oc-field-description">Enter the 6-digit code we sent to name@company.com.</p>
-      </div>
-      <button class="oc-btn oc-block-authcard-submit" type="submit">Verify</button>
-    </div>
-    <p class="oc-block-authcard-foot">Didn't receive the code? <a href="#">Resend</a></p>
-  </form>
-</div>
+<!-- OmniaUI block: otp-01 - Verification card: six-digit code, verify button and a resend 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)
+       .oc-otp: Code input drawn as cells (component); set --oc-otp-length and maxlength
+-->
+<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 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></span>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Enter verification code</h1>
+      <p class="oc-block-authcard-text">We sent a 6-digit code to your e-mail</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-otp01-code">Verification code</label>
+        <input class="oc-otp" id="oc-otp01-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" style="--oc-otp-length: 6">
+        <p class="oc-field-description">Enter the 6-digit code we sent to name@company.com.</p>
+      </div>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Verify</button>
+    </div>
+    <p class="oc-block-authcard-foot">Didn't receive the code? <a href="#">Resend</a></p>
+  </form>
+</div>