@birdycom/omniaui-blocks 0.11.0 → 0.11.1

package/blocks/otp-02.html

@@ -1,46 +1,46 @@
-<!-- OmniaUI block: otp-02 - Verification form beside a brand panel (container-query split). 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-authduo">
-  <div class="oc-block-authduo-grid">
-    <aside class="oc-block-authduo-panel oc-block-authduo-panel--muted">
-      <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;Two-step verification keeps our client data where it belongs.&rdquo;</p>
-        <footer>Security team</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">Verify your login</h1>
-          <p class="oc-block-authcard-text">Enter the code from your authenticator app</p>
-        </div>
-        <div class="oc-block-authcard-fields">
-          <div class="oc-field">
-            <label class="oc-field-label" for="oc-otp02-code">Verification code</label>
-            <input class="oc-otp" id="oc-otp02-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" style="--oc-otp-length: 6" value="482">
-            <p class="oc-field-description">Enter the 6-digit code we sent to your authenticator app.</p>
-          </div>
-          <button class="oc-btn oc-block-authcard-submit" type="submit">Verify</button>
-        </div>
-        <p class="oc-block-authcard-foot">Lost your device? <a href="#">Use a recovery code</a></p>
-      </form>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: otp-02 - Verification form beside a brand panel (container-query split). 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-authduo">
+  <div class="oc-block-authduo-grid">
+    <aside class="oc-block-authduo-panel oc-block-authduo-panel--muted">
+      <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;Two-step verification keeps our client data where it belongs.&rdquo;</p>
+        <footer>Security team</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">Verify your login</h1>
+          <p class="oc-block-authcard-text">Enter the code from your authenticator app</p>
+        </div>
+        <div class="oc-block-authcard-fields">
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-otp02-code">Verification code</label>
+            <input class="oc-otp" id="oc-otp02-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" style="--oc-otp-length: 6" value="482">
+            <p class="oc-field-description">Enter the 6-digit code we sent to your authenticator app.</p>
+          </div>
+          <button class="oc-btn oc-block-authcard-submit" type="submit">Verify</button>
+        </div>
+        <p class="oc-block-authcard-foot">Lost your device? <a href="#">Use a recovery code</a></p>
+      </form>
+    </div>
+  </div>
+</div>

package/blocks/page-hero.html

@@ -1,10 +1,10 @@
-<!-- OmniaUI block: page-hero — Page header (the oc-hero used on every docs page): eyebrow, title, text, actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
-<section class="oc-hero">
-  <span class="oc-hero-eyebrow">Components</span>
-  <h1 class="oc-hero-title">Build interfaces with native HTML</h1>
-  <p class="oc-hero-text">Dialogs, menus and accordions without JavaScript — styled with OmniaCSS.</p>
-  <div class="oc-hero-actions">
-    <a class="oc-btn" href="#start">Get started</a>
-    <a class="oc-btn oc-btn--outline" href="#docs">Documentation</a>
-  </div>
-</section>
+<!-- OmniaUI block: page-hero — Page header (the oc-hero used on every docs page): eyebrow, title, text, actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<section class="oc-hero">
+  <span class="oc-hero-eyebrow">Components</span>
+  <h1 class="oc-hero-title">Build interfaces with native HTML</h1>
+  <p class="oc-hero-text">Dialogs, menus and accordions without JavaScript — styled with OmniaCSS.</p>
+  <div class="oc-hero-actions">
+    <a class="oc-btn" href="#start">Get started</a>
+    <a class="oc-btn oc-btn--outline" href="#docs">Documentation</a>
+  </div>
+</section>

package/blocks/portfolio-grid.html

@@ -1,31 +1,31 @@
-<!-- OmniaUI block: portfolio-grid - Portfolio section: heading with an "all projects" link and a grid of project cards. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     File: packages/blocks/blocks/portfolio-grid.html | Map: section -> container -> head (eyebrow, title, lead, link) -> grid of .oc-project-card
-     Class API: .oc-block-portfolio (modifier --two: wider cards), -head, -lead, -grid (--oc-portfolio-min sets the card width).
-       Cards are the project-card component; give each an .oc-accent--* preset for its placeholder.
--->
-<section class="oc-block-portfolio oc-section-pad" aria-labelledby="oc-portfolio-title">
-  <div class="oc-container">
-    <div class="oc-block-portfolio-head">
-      <div>
-        <p class="oc-eyebrow">Our work</p>
-        <h2 class="oc-display oc-display--md" id="oc-portfolio-title">Selected <span class="oc-text-gradient">projects</span></h2>
-        <p class="oc-block-portfolio-lead">Websites and apps we designed, built and still maintain.</p>
-      </div>
-      <a class="oc-link-arrow" href="#projects">All projects</a>
-    </div>
-    <div class="oc-block-portfolio-grid">
-      <a class="oc-project-card oc-accent--green" href="#p1">
-        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Northwind Bakery, screenshot"></span></span>
-        <span class="oc-project-card__body"><span class="oc-project-card__type">Website</span><span class="oc-project-card__name">Northwind Bakery</span><span class="oc-project-card__meta">Food &amp; retail &middot; Antwerp</span><span class="oc-project-card__more">View project</span></span>
-      </a>
-      <a class="oc-project-card oc-accent--violet" href="#p2">
-        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Fjord Interiors, screenshot"></span></span>
-        <span class="oc-project-card__body"><span class="oc-project-card__type">Web app</span><span class="oc-project-card__name">Fjord Interiors</span><span class="oc-project-card__meta">Interior design &middot; Ghent</span><span class="oc-project-card__more">View project</span></span>
-      </a>
-      <a class="oc-project-card oc-accent--orange" href="#p3">
-        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Harbor Logistics, screenshot"></span></span>
-        <span class="oc-project-card__body"><span class="oc-project-card__type">Desktop tool</span><span class="oc-project-card__name">Harbor Logistics</span><span class="oc-project-card__meta">Transport &middot; Rotterdam</span><span class="oc-project-card__more">View project</span></span>
-      </a>
-    </div>
-  </div>
-</section>
+<!-- OmniaUI block: portfolio-grid - Portfolio section: heading with an "all projects" link and a grid of project cards. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/portfolio-grid.html | Map: section -> container -> head (eyebrow, title, lead, link) -> grid of .oc-project-card
+     Class API: .oc-block-portfolio (modifier --two: wider cards), -head, -lead, -grid (--oc-portfolio-min sets the card width).
+       Cards are the project-card component; give each an .oc-accent--* preset for its placeholder.
+-->
+<section class="oc-block-portfolio oc-section-pad" aria-labelledby="oc-portfolio-title">
+  <div class="oc-container">
+    <div class="oc-block-portfolio-head">
+      <div>
+        <p class="oc-eyebrow">Our work</p>
+        <h2 class="oc-display oc-display--md" id="oc-portfolio-title">Selected <span class="oc-text-gradient">projects</span></h2>
+        <p class="oc-block-portfolio-lead">Websites and apps we designed, built and still maintain.</p>
+      </div>
+      <a class="oc-link-arrow" href="#projects">All projects</a>
+    </div>
+    <div class="oc-block-portfolio-grid">
+      <a class="oc-project-card oc-accent--green" href="#p1">
+        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Northwind Bakery, screenshot"></span></span>
+        <span class="oc-project-card__body"><span class="oc-project-card__type">Website</span><span class="oc-project-card__name">Northwind Bakery</span><span class="oc-project-card__meta">Food &amp; retail &middot; Antwerp</span><span class="oc-project-card__more">View project</span></span>
+      </a>
+      <a class="oc-project-card oc-accent--violet" href="#p2">
+        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Fjord Interiors, screenshot"></span></span>
+        <span class="oc-project-card__body"><span class="oc-project-card__type">Web app</span><span class="oc-project-card__name">Fjord Interiors</span><span class="oc-project-card__meta">Interior design &middot; Ghent</span><span class="oc-project-card__more">View project</span></span>
+      </a>
+      <a class="oc-project-card oc-accent--orange" href="#p3">
+        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Harbor Logistics, screenshot"></span></span>
+        <span class="oc-project-card__body"><span class="oc-project-card__type">Desktop tool</span><span class="oc-project-card__name">Harbor Logistics</span><span class="oc-project-card__meta">Transport &middot; Rotterdam</span><span class="oc-project-card__more">View project</span></span>
+      </a>
+    </div>
+  </div>
+</section>

package/blocks/pricing.html

@@ -1,42 +1,42 @@
-<!-- OmniaUI block: pricing — Pricing cards with a featured plan. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
-<div class="oc-block-pricing">
-  <h2>Simple, transparent pricing</h2>
-  <p>Choose the plan that fits your needs.</p>
-  <div class="oc-block-pricing-grid">
-    <div class="oc-block-pricing-card">
-      <p class="oc-block-pricing-name">Free</p>
-      <p class="oc-block-pricing-desc">For personal projects</p>
-      <p class="oc-block-pricing-price">&euro;0 <span>/month</span></p>
-      <ul class="oc-block-pricing-features">
-        <li>Core utilities</li>
-        <li>5 components</li>
-        <li>Community support</li>
-      </ul>
-      <button class="oc-btn oc-btn--outline" style="width:100%;">Get started</button>
-    </div>
-    <div class="oc-block-pricing-card oc-block-pricing-card--featured">
-      <p class="oc-block-pricing-name">Pro</p>
-      <p class="oc-block-pricing-desc">For teams and businesses</p>
-      <p class="oc-block-pricing-price">&euro;29 <span>/month</span></p>
-      <ul class="oc-block-pricing-features">
-        <li>All utilities + responsive</li>
-        <li>All components</li>
-        <li>All blocks</li>
-        <li>Priority support</li>
-      </ul>
-      <button class="oc-btn" style="width:100%;">Subscribe</button>
-    </div>
-    <div class="oc-block-pricing-card">
-      <p class="oc-block-pricing-name">Enterprise</p>
-      <p class="oc-block-pricing-desc">Custom solutions</p>
-      <p class="oc-block-pricing-price">Custom</p>
-      <ul class="oc-block-pricing-features">
-        <li>Everything in Pro</li>
-        <li>Custom adapters</li>
-        <li>Dedicated support</li>
-        <li>SLA guarantee</li>
-      </ul>
-      <button class="oc-btn oc-btn--outline" style="width:100%;">Contact sales</button>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI block: pricing — Pricing cards with a featured plan. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-pricing">
+  <h2>Simple, transparent pricing</h2>
+  <p>Choose the plan that fits your needs.</p>
+  <div class="oc-block-pricing-grid">
+    <div class="oc-block-pricing-card">
+      <p class="oc-block-pricing-name">Free</p>
+      <p class="oc-block-pricing-desc">For personal projects</p>
+      <p class="oc-block-pricing-price">&euro;0 <span>/month</span></p>
+      <ul class="oc-block-pricing-features">
+        <li>Core utilities</li>
+        <li>5 components</li>
+        <li>Community support</li>
+      </ul>
+      <button class="oc-btn oc-btn--outline" style="width:100%;">Get started</button>
+    </div>
+    <div class="oc-block-pricing-card oc-block-pricing-card--featured">
+      <p class="oc-block-pricing-name">Pro</p>
+      <p class="oc-block-pricing-desc">For teams and businesses</p>
+      <p class="oc-block-pricing-price">&euro;29 <span>/month</span></p>
+      <ul class="oc-block-pricing-features">
+        <li>All utilities + responsive</li>
+        <li>All components</li>
+        <li>All blocks</li>
+        <li>Priority support</li>
+      </ul>
+      <button class="oc-btn" style="width:100%;">Subscribe</button>
+    </div>
+    <div class="oc-block-pricing-card">
+      <p class="oc-block-pricing-name">Enterprise</p>
+      <p class="oc-block-pricing-desc">Custom solutions</p>
+      <p class="oc-block-pricing-price">Custom</p>
+      <ul class="oc-block-pricing-features">
+        <li>Everything in Pro</li>
+        <li>Custom adapters</li>
+        <li>Dedicated support</li>
+        <li>SLA guarantee</li>
+      </ul>
+      <button class="oc-btn oc-btn--outline" style="width:100%;">Contact sales</button>
+    </div>
+  </div>
+</div>

package/blocks/process.html

@@ -1,19 +1,19 @@
-<!-- OmniaUI block: process — Numbered steps (CSS counter) + an endless marquee of technologies. Needs @birdycom/omniaui. -->
-<section class="oc-section-pad">
-  <div class="oc-container">
-    <p class="oc-eyebrow">How we work</p>
-    <h2 class="oc-display oc-display--md">From idea to <span class="oc-text-gradient">support</span>, one point of contact.</h2>
-    <ol class="oc-steps">
-      <li><h3>Listen</h3><p>We start with your workflow, not with technology.</p></li>
-      <li><h3>Design</h3><p>Screens and data model, approved before we build.</p></li>
-      <li><h3>Build</h3><p>Short iterations you can test along the way.</p></li>
-      <li><h3>Support</h3><p>Updates, hosting and help - for years.</p></li>
-    </ol>
-    <div class="oc-marquee mt-4" aria-label="Technologies">
-      <div class="oc-marquee__track">
-        <span class="oc-marquee__item">PHP 8.4</span><span class="oc-marquee__item">MySQL</span><span class="oc-marquee__item">OmniaCSS</span><span class="oc-marquee__item">WordPress</span><span class="oc-marquee__item">.NET</span><span class="oc-marquee__item">npm</span>
-        <span class="oc-marquee__item" aria-hidden="true">PHP 8.4</span><span class="oc-marquee__item" aria-hidden="true">MySQL</span><span class="oc-marquee__item" aria-hidden="true">OmniaCSS</span><span class="oc-marquee__item" aria-hidden="true">WordPress</span><span class="oc-marquee__item" aria-hidden="true">.NET</span><span class="oc-marquee__item" aria-hidden="true">npm</span>
-      </div>
-    </div>
-  </div>
-</section>
+<!-- OmniaUI block: process — Numbered steps (CSS counter) + an endless marquee of technologies. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container">
+    <p class="oc-eyebrow">How we work</p>
+    <h2 class="oc-display oc-display--md">From idea to <span class="oc-text-gradient">support</span>, one point of contact.</h2>
+    <ol class="oc-steps">
+      <li><h3>Listen</h3><p>We start with your workflow, not with technology.</p></li>
+      <li><h3>Design</h3><p>Screens and data model, approved before we build.</p></li>
+      <li><h3>Build</h3><p>Short iterations you can test along the way.</p></li>
+      <li><h3>Support</h3><p>Updates, hosting and help - for years.</p></li>
+    </ol>
+    <div class="oc-marquee mt-4" aria-label="Technologies">
+      <div class="oc-marquee__track">
+        <span class="oc-marquee__item">PHP 8.4</span><span class="oc-marquee__item">MySQL</span><span class="oc-marquee__item">OmniaCSS</span><span class="oc-marquee__item">WordPress</span><span class="oc-marquee__item">.NET</span><span class="oc-marquee__item">npm</span>
+        <span class="oc-marquee__item" aria-hidden="true">PHP 8.4</span><span class="oc-marquee__item" aria-hidden="true">MySQL</span><span class="oc-marquee__item" aria-hidden="true">OmniaCSS</span><span class="oc-marquee__item" aria-hidden="true">WordPress</span><span class="oc-marquee__item" aria-hidden="true">.NET</span><span class="oc-marquee__item" aria-hidden="true">npm</span>
+      </div>
+    </div>
+  </div>
+</section>

package/blocks/product-grid.html

@@ -1,37 +1,37 @@
-<!-- OmniaUI block: product-grid — Section title + grid of product cards, each with its own accent color. Needs @birdycom/omniaui. -->
-<section class="oc-section-pad">
-  <div class="oc-container">
-    <p class="oc-eyebrow">Software</p>
-    <h2 class="oc-display oc-display--md">Products, custom work and tools. <span class="oc-text-gradient">All our own work.</span></h2>
-    <div class="oc-card-grid">
-      <a class="oc-product-card oc-accent--green" href="#">
-        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9670;</span><span class="oc-pill">Own product</span></div>
-        <h3 class="oc-product-card__name">OmniaDesk</h3>
-        <p class="oc-product-card__tagline">Modular ERP for small businesses</p>
-        <p class="oc-product-card__summary">CRM, sales, invoicing, bookkeeping and stock in one web application.</p>
-        <span class="oc-product-card__more">Discover OmniaDesk</span>
-      </a>
-      <a class="oc-product-card oc-accent--orange" href="#">
-        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9874;</span><span class="oc-pill">Custom work</span></div>
-        <h3 class="oc-product-card__name">Korrekt Hub</h3>
-        <p class="oc-product-card__tagline">Custom platform for interior builders</p>
-        <p class="oc-product-card__summary">Work orders, projects, quotes, stock, planning and HR in one app.</p>
-        <span class="oc-product-card__more">Discover Korrekt Hub</span>
-      </a>
-      <a class="oc-product-card oc-accent--violet" href="#">
-        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9673;</span><span class="oc-pill">Framework</span></div>
-        <h3 class="oc-product-card__name">OmniaCSS</h3>
-        <p class="oc-product-card__tagline">The design system behind our apps</p>
-        <p class="oc-product-card__summary">Utility-first CSS with ready components, blocks and more than 10,000 icons.</p>
-        <span class="oc-product-card__more">Discover OmniaCSS</span>
-      </a>
-      <a class="oc-product-card oc-accent--cyan" href="#">
-        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9638;</span><span class="oc-pill">Tool</span></div>
-        <h3 class="oc-product-card__name">HistoryTabs</h3>
-        <p class="oc-product-card__tagline">Never lose your tabs again</p>
-        <p class="oc-product-card__summary">A Windows tool that brings back browser windows with all their tabs.</p>
-        <span class="oc-product-card__more">Discover HistoryTabs</span>
-      </a>
-    </div>
-  </div>
-</section>
+<!-- OmniaUI block: product-grid — Section title + grid of product cards, each with its own accent color. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container">
+    <p class="oc-eyebrow">Software</p>
+    <h2 class="oc-display oc-display--md">Products, custom work and tools. <span class="oc-text-gradient">All our own work.</span></h2>
+    <div class="oc-card-grid">
+      <a class="oc-product-card oc-accent--green" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9670;</span><span class="oc-pill">Own product</span></div>
+        <h3 class="oc-product-card__name">OmniaDesk</h3>
+        <p class="oc-product-card__tagline">Modular ERP for small businesses</p>
+        <p class="oc-product-card__summary">CRM, sales, invoicing, bookkeeping and stock in one web application.</p>
+        <span class="oc-product-card__more">Discover OmniaDesk</span>
+      </a>
+      <a class="oc-product-card oc-accent--orange" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9874;</span><span class="oc-pill">Custom work</span></div>
+        <h3 class="oc-product-card__name">Korrekt Hub</h3>
+        <p class="oc-product-card__tagline">Custom platform for interior builders</p>
+        <p class="oc-product-card__summary">Work orders, projects, quotes, stock, planning and HR in one app.</p>
+        <span class="oc-product-card__more">Discover Korrekt Hub</span>
+      </a>
+      <a class="oc-product-card oc-accent--violet" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9673;</span><span class="oc-pill">Framework</span></div>
+        <h3 class="oc-product-card__name">OmniaCSS</h3>
+        <p class="oc-product-card__tagline">The design system behind our apps</p>
+        <p class="oc-product-card__summary">Utility-first CSS with ready components, blocks and more than 10,000 icons.</p>
+        <span class="oc-product-card__more">Discover OmniaCSS</span>
+      </a>
+      <a class="oc-product-card oc-accent--cyan" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9638;</span><span class="oc-pill">Tool</span></div>
+        <h3 class="oc-product-card__name">HistoryTabs</h3>
+        <p class="oc-product-card__tagline">Never lose your tabs again</p>
+        <p class="oc-product-card__summary">A Windows tool that brings back browser windows with all their tabs.</p>
+        <span class="oc-product-card__more">Discover HistoryTabs</span>
+      </a>
+    </div>
+  </div>
+</section>

package/blocks/profile-header.html

@@ -1,27 +1,27 @@
-<!-- OmniaUI block: profile-header - Channel / profile header: banner, overhanging avatar, name, meta, actions and a tab bar. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
-     File: packages/blocks/blocks/profile-header.html | Map: section.oc-block-profile -> banner -> bar (avatar, info, actions) -> nav tabs
-     Class API: .oc-block-profile (modifier --compact: low banner, smaller avatar), -banner (style="--oc-profile-banner: url(…)",
-       default gradient from the .oc-accent--* preset), -bar, -avatar (on an .oc-avatar), -info, -name, -meta, -bio, -actions,
-       -tabs (nav), -tab (link; aria-current="page" marks the active tab).
--->
-<section class="oc-block-profile oc-accent--violet" aria-labelledby="oc-profile-name">
-  <div class="oc-block-profile-banner" aria-hidden="true"></div>
-  <div class="oc-block-profile-bar">
-    <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true">AS</span>
-    <div class="oc-block-profile-info">
-      <h1 class="oc-block-profile-name" id="oc-profile-name">Acme Studio</h1>
-      <p class="oc-block-profile-meta">@acmestudio &middot; 12.4K followers &middot; 86 videos</p>
-      <p class="oc-block-profile-bio">Short tutorials about web design, CSS and building small business apps.</p>
-    </div>
-    <div class="oc-block-profile-actions">
-      <button class="oc-btn" type="button">Follow</button>
-      <button class="oc-btn oc-btn--outline" type="button">Share</button>
-    </div>
-  </div>
-  <nav class="oc-block-profile-tabs" aria-label="Profile sections">
-    <a class="oc-block-profile-tab" href="#home" aria-current="page">Home</a>
-    <a class="oc-block-profile-tab" href="#videos">Videos</a>
-    <a class="oc-block-profile-tab" href="#playlists">Playlists</a>
-    <a class="oc-block-profile-tab" href="#about">About</a>
-  </nav>
-</section>
+<!-- OmniaUI block: profile-header - Channel / profile header: banner, overhanging avatar, name, meta, actions and a tab bar. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/profile-header.html | Map: section.oc-block-profile -> banner -> bar (avatar, info, actions) -> nav tabs
+     Class API: .oc-block-profile (modifier --compact: low banner, smaller avatar), -banner (style="--oc-profile-banner: url(…)",
+       default gradient from the .oc-accent--* preset), -bar, -avatar (on an .oc-avatar), -info, -name, -meta, -bio, -actions,
+       -tabs (nav), -tab (link; aria-current="page" marks the active tab).
+-->
+<section class="oc-block-profile oc-accent--violet" aria-labelledby="oc-profile-name">
+  <div class="oc-block-profile-banner" aria-hidden="true"></div>
+  <div class="oc-block-profile-bar">
+    <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true">AS</span>
+    <div class="oc-block-profile-info">
+      <h1 class="oc-block-profile-name" id="oc-profile-name">Acme Studio</h1>
+      <p class="oc-block-profile-meta">@acmestudio &middot; 12.4K followers &middot; 86 videos</p>
+      <p class="oc-block-profile-bio">Short tutorials about web design, CSS and building small business apps.</p>
+    </div>
+    <div class="oc-block-profile-actions">
+      <button class="oc-btn" type="button">Follow</button>
+      <button class="oc-btn oc-btn--outline" type="button">Share</button>
+    </div>
+  </div>
+  <nav class="oc-block-profile-tabs" aria-label="Profile sections">
+    <a class="oc-block-profile-tab" href="#home" aria-current="page">Home</a>
+    <a class="oc-block-profile-tab" href="#videos">Videos</a>
+    <a class="oc-block-profile-tab" href="#playlists">Playlists</a>
+    <a class="oc-block-profile-tab" href="#about">About</a>
+  </nav>
+</section>

package/blocks/reset-password.html

@@ -1,45 +1,45 @@
-<!-- OmniaUI block: reset-password - Choose a new password: password with reveal, confirmation, a rules hint and submit. 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="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span>
-    <div class="oc-block-authcard-head">
-      <h1 class="oc-block-authcard-title">Set a new password</h1>
-      <p class="oc-block-authcard-text">Your new password must differ from earlier ones</p>
-    </div>
-    <div class="oc-block-authcard-fields">
-      <div class="oc-field">
-        <label class="oc-field-label" for="oc-reset-password">New password</label>
-        <div class="oc-input-reveal">
-          <input class="oc-input" id="oc-reset-password" name="oc-reset-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-reset-confirm">Confirm password</label>
-        <div class="oc-input-reveal">
-          <input class="oc-input" id="oc-reset-confirm" name="oc-reset-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">At least 8 characters, with a number and a symbol.</p>
-      <button class="oc-btn oc-block-authcard-submit" type="submit">Reset password</button>
-    </div>
-    <p class="oc-block-authcard-foot"><a href="#">Back to sign in</a></p>
-  </form>
-</div>
+<!-- OmniaUI block: reset-password - Choose a new password: password with reveal, confirmation, a rules hint and submit. 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="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Set a new password</h1>
+      <p class="oc-block-authcard-text">Your new password must differ from earlier ones</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-reset-password">New password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-reset-password" name="oc-reset-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-reset-confirm">Confirm password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-reset-confirm" name="oc-reset-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">At least 8 characters, with a number and a symbol.</p>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Reset password</button>
+    </div>
+    <p class="oc-block-authcard-foot"><a href="#">Back to sign in</a></p>
+  </form>
+</div>