@birdycom/omniaui-blocks 0.12.5 → 0.12.6

package/blocks/app-header.html

@@ -20,9 +20,9 @@
       <label><input type="radio" name="oc-appbar-theme" value="light"> Light</label>
       <label><input type="radio" name="oc-appbar-theme" value="dark"> Dark</label>
     </div>
-    <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-appbar-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">SC</span></button>
+    <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-appbar-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">U1</span></button>
     <div class="oc-dropdown-menu" id="oc-appbar-user" popover>
-      <div class="oc-dropdown-label">serge@example.com</div>
+      <div class="oc-dropdown-label">user1@company1.example</div>
       <a class="oc-dropdown-item" href="#">Profile</a>
       <a class="oc-dropdown-item" href="#">Settings</a>
       <div class="oc-dropdown-separator"></div>

package/blocks/app-shell.html

@@ -15,7 +15,7 @@
     <div class="oc-sidebar-header">
       <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
         <svg data-icon="mdi:home-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg>
-        <span class="oc-sidebar-menu-label"><strong>OmniaDesk</strong></span>
+        <span class="oc-sidebar-menu-label"><strong>Company 1</strong></span>
       </a>
     </div>
     <div class="oc-sidebar-content">
@@ -45,8 +45,8 @@
     </div>
     <div class="oc-sidebar-footer">
       <div class="oc-user">
-        <span class="oc-avatar oc-avatar--sm">SC</span>
-        <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
+        <span class="oc-avatar oc-avatar--sm">U1</span>
+        <span class="oc-user-text"><span class="oc-user-name">User 1</span><span class="oc-user-email">user1@company1.example</span></span>
       </div>
     </div>
   </aside>
@@ -65,9 +65,9 @@
           <label><input type="radio" name="oc-shell-theme" value="light"> Light</label>
           <label><input type="radio" name="oc-shell-theme" value="dark"> Dark</label>
         </div>
-        <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-shell-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">SC</span></button>
+        <button class="oc-btn oc-btn--ghost oc-btn--icon" type="button" popovertarget="oc-shell-user" aria-label="User menu"><span class="oc-avatar oc-avatar--sm">U1</span></button>
         <div class="oc-dropdown-menu" id="oc-shell-user" popover>
-          <div class="oc-dropdown-label">serge@example.com</div>
+          <div class="oc-dropdown-label">user1@company1.example</div>
           <a class="oc-dropdown-item" href="#">Profile</a>
           <a class="oc-dropdown-item" href="#">Settings</a>
           <div class="oc-dropdown-separator"></div>
@@ -75,7 +75,7 @@
         </div>
       </div>
     </header>
-    <div class="oc-block-shell-breadcrumbs"><nav aria-label="Breadcrumb"><ol class="oc-breadcrumb"><li class="oc-breadcrumb-item"><a href="#">Home</a></li><li class="oc-breadcrumb-item"><a href="#">CRM</a></li><li class="oc-breadcrumb-item" aria-current="page">Contacts</li></ol></nav></div>
+    <div class="oc-block-shell-breadcrumbs"><nav aria-label="Breadcrumb"><ol class="oc-breadcrumb oc-breadcrumb--chevron"><li class="oc-breadcrumb-item"><a href="#"><svg data-icon="mdi:home-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg>Home</a></li><li class="oc-breadcrumb-item"><a href="#"><svg data-icon="mdi:account-group-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 5a3.5 3.5 0 0 0-3.5 3.5A3.5 3.5 0 0 0 12 12a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 12 5m0 2a1.5 1.5 0 0 1 1.5 1.5A1.5 1.5 0 0 1 12 10a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 12 7M5.5 8A2.5 2.5 0 0 0 3 10.5c0 .94.53 1.75 1.29 2.18c.36.2.77.32 1.21.32s.85-.12 1.21-.32c.37-.21.68-.51.91-.87A5.42 5.42 0 0 1 6.5 8.5v-.28c-.3-.14-.64-.22-1-.22m13 0c-.36 0-.7.08-1 .22v.28c0 1.2-.39 2.36-1.12 3.31c.12.19.25.34.4.49a2.48 2.48 0 0 0 1.72.7c.44 0 .85-.12 1.21-.32c.76-.43 1.29-1.24 1.29-2.18A2.5 2.5 0 0 0 18.5 8M12 14c-2.34 0-7 1.17-7 3.5V19h14v-1.5c0-2.33-4.66-3.5-7-3.5m-7.29.55C2.78 14.78 0 15.76 0 17.5V19h3v-1.93c0-1.01.69-1.85 1.71-2.52m14.58 0c1.02.67 1.71 1.51 1.71 2.52V19h3v-1.5c0-1.74-2.78-2.72-4.71-2.95M12 16c1.53 0 3.24.5 4.23 1H7.77c.99-.5 2.7-1 4.23-1"/></svg>CRM</a></li><li class="oc-breadcrumb-item" aria-current="page"><svg data-icon="mdi:card-account-details-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22 3H2c-1.09.04-1.96.91-2 2v14c.04 1.09.91 1.96 2 2h20c1.09-.04 1.96-.91 2-2V5a2.074 2.074 0 0 0-2-2m0 16H2V5h20zm-8-2v-1.25c0-1.66-3.34-2.5-5-2.5s-5 .84-5 2.5V17zM9 7a2.5 2.5 0 0 0-2.5 2.5A2.5 2.5 0 0 0 9 12a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 9 7m5 0v1h6V7zm0 2v1h6V9zm0 2v1h4v-1z"/></svg>Contacts</li></ol></nav></div>
     <main class="oc-block-shell-content">
       <h1 class="oc-heading-title">Contacts</h1>
       <p class="oc-heading-description">Page content scrolls here.</p>

package/blocks/auth-split.html

@@ -12,10 +12,10 @@
 -->
 <div class="oc-block-authsplit">
   <aside class="oc-block-authsplit-brand">
-    <a class="oc-block-authsplit-logo" href="#"><svg data-icon="mdi:home-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg> OmniaDesk</a>
+    <a class="oc-block-authsplit-logo" href="#"><svg data-icon="mdi:home-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg> Company 1</a>
     <blockquote class="oc-block-authsplit-quote">
       <p>&ldquo;One calm place for contacts, invoices and the day-to-day work.&rdquo;</p>
-      <footer>Serge Cools, founder</footer>
+      <footer>User 1, founder</footer>
     </blockquote>
   </aside>
   <div class="oc-block-authsplit-form">

package/blocks/contact-grid.html

@@ -13,7 +13,7 @@
     <article class="oc-block-contact-card">
       <span class="oc-product-mark oc-product-mark--sm oc-product-mark--soft oc-accent--blue" aria-hidden="true">&#9993;</span>
       <h3 class="oc-block-contact-title">E-mail</h3>
-      <a class="oc-block-contact-line" href="mailto:hello@example.com">hello@example.com</a>
+      <a class="oc-block-contact-line" href="mailto:info@company1.example">info@company1.example</a>
       <p class="oc-block-contact-line">For quotes and questions.</p>
     </article>
     <article class="oc-block-contact-card">

package/blocks/data-table.html

@@ -1,111 +1,156 @@
 <!-- OmniaUI block: data-table - Card with title, actions, search toolbar, sortable table, bulk bar and pagination footer. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/data-table.html | Map: card header -> toolbar (search, status pills) -> bulk bar -> table -> footer
+     Works in the browser with @birdycom/omniaui/data-table.js (data-oc-data-table on the card): search, status filter,
+     sort, selection, bulk export/delete, row delete, rows per page and pages. Server side (Livewire) leave the
+     data-oc-* hooks out and render links instead.
      Class API (modifiers are extra classes / attributes on the same element):
-       .oc-card.oc-block-datatable: Card root
+       .oc-card.oc-block-datatable[data-oc-data-table]: Card root (data-oc-live="true": the demo changes its own rows)
        .oc-block-datatable-head / -title / -description: Card header area
        .oc-block-datatable-body: Padded body
-       .oc-table-toolbar: Search + filters row (.oc-table-toolbar-spacer pushes items right)
-       .oc-filter-pills / .oc-filter-pill: Segmented link filters (aria-current="true")
-       .oc-block-datatable-bulk: Selection bar (appears when rows are selected)
-       .oc-table-wrap > .oc-table: Table with .oc-table-sort headers, .oc-table-actions cells (see Table)
-       .oc-table-footer: Entries text, page-size select and .oc-pagination
+       .oc-table-toolbar: Search (.oc-data-table-search) + status pills (data-oc-filter="active|all|archived")
+       .oc-block-datatable-bulk.oc-data-table-bulk: Selection bar (shown while rows are selected)
+       .oc-table-wrap > .oc-table: Table; th[data-oc-col] with button.oc-table-sort, rows tr[data-oc-row][data-oc-key][data-oc-status]
+       .oc-table-footer: Count (data-oc-summary), page size (data-oc-page-size) and pages (data-oc-pager)
      Slots: title, description, header actions, toolbar, table, footer
 -->
-<section class="oc-card oc-block-datatable">
+<section class="oc-card oc-block-datatable" id="oc-block-contacts" data-oc-data-table="" data-oc-live="true">
   <header class="oc-block-datatable-head">
     <div>
       <h2 class="oc-block-datatable-title">Contacts</h2>
       <p class="oc-block-datatable-description">All customers and suppliers.</p>
     </div>
     <div>
-      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Export</button>
-      <button class="oc-btn oc-btn--sm" type="button">New contact</button>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-export=""><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 12h2v5h16v-5h2v5c0 1.11-.89 2-2 2H4a2 2 0 0 1-2-2zm10 3l5.55-5.46l-1.42-1.41L13 11.25V2h-2v9.25L7.88 8.13L6.46 9.55z"/></svg>Export</button>
+      <button class="oc-btn oc-btn--sm" type="button"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></svg>New contact</button>
     </div>
   </header>
   <div class="oc-block-datatable-body">
     <div class="oc-table-toolbar">
-      <input class="oc-input" type="search" placeholder="Search contacts..." aria-label="Search contacts">
+      <input class="oc-input oc-data-table-search" type="search" placeholder="Search contacts..." aria-label="Search contacts">
       <div class="oc-filter-pills" role="group" aria-label="Status filter">
-        <a class="oc-filter-pill" href="#" aria-current="true">Active</a>
-        <a class="oc-filter-pill" href="#">Including archived</a>
-        <a class="oc-filter-pill" href="#">Archived only</a>
-      </div>
-      <span class="oc-table-toolbar-spacer"></span>
-      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" popovertarget="oc-datatable-columns">Columns</button>
-      <div class="oc-popover oc-popover--sm" id="oc-datatable-columns" popover>
-        <label><input class="oc-checkbox" type="checkbox" checked> Name</label><br>
-        <label><input class="oc-checkbox" type="checkbox" checked> E-mail</label><br>
-        <label><input class="oc-checkbox" type="checkbox" checked> Status</label>
+        <button class="oc-filter-pill" type="button" data-oc-filter="active" aria-current="true">Active</button>
+        <button class="oc-filter-pill" type="button" data-oc-filter="all">Including archived</button>
+        <button class="oc-filter-pill" type="button" data-oc-filter="archived">Archived only</button>
       </div>
     </div>
-    <div class="oc-block-datatable-bulk"><span>2 selected</span><button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Export</button><button class="oc-btn oc-btn--destructive oc-btn--sm" type="button">Delete</button></div>
+    <div class="oc-block-datatable-bulk oc-data-table-bulk" hidden><span data-oc-selected-count="">0 selected</span><button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="export"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 12h2v5h16v-5h2v5c0 1.11-.89 2-2 2H4a2 2 0 0 1-2-2zm10 3l5.55-5.46l-1.42-1.41L13 11.25V2h-2v9.25L7.88 8.13L6.46 9.55z"/></svg>Export</button><button class="oc-btn oc-btn--destructive oc-btn--sm" type="button" data-oc-bulk="delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg>Delete</button></div>
     <div class="oc-table-wrap">
       <table class="oc-table">
         <thead>
           <tr>
-            <th style="width:2.5rem"><input class="oc-checkbox" type="checkbox" aria-label="Select all"></th>
-            <th aria-sort="ascending"><a class="oc-table-sort" href="?sort=name">Name</a></th>
-            <th><a class="oc-table-sort" href="?sort=email">E-mail</a></th>
-            <th>Status</th>
-            <th data-numeric><a class="oc-table-sort" href="?sort=balance">Balance</a></th>
-            <th><span class="oc-visually-hidden">Actions</span></th>
+            <th data-oc-col="select" style="width:2.5rem"><input class="oc-checkbox" type="checkbox" data-oc-select-all="" aria-label="Select all"></th>
+            <th data-oc-col="name" aria-sort="ascending"><button class="oc-table-sort" type="button">Name</button></th>
+            <th data-oc-col="email"><button class="oc-table-sort" type="button">E-mail</button></th>
+            <th data-oc-col="status"><button class="oc-table-sort" type="button">Status</button></th>
+            <th data-oc-col="balance" data-numeric=""><button class="oc-table-sort" type="button">Balance</button></th>
+            <th data-oc-col="actions"><span class="oc-visually-hidden">Actions</span></th>
           </tr>
         </thead>
         <tbody>
-        <tr>
-          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Ada Lovelace"></td>
-          <td>Ada Lovelace</td>
-          <td>ada@example.com</td>
-          <td><span class="oc-badge oc-badge--success">Active</span></td>
-          <td data-numeric>420.00</td>
-          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        <tr data-oc-row="" data-oc-key="contact-1" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 1"></td>
+          <td data-oc-col="name">Contact 1</td>
+          <td data-oc-col="email">info@contact1.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-oc-col="balance" data-numeric="">420.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 1" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 1" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
+        </tr>
+        <tr data-oc-row="" data-oc-key="contact-2" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 2"></td>
+          <td data-oc-col="name">Contact 2</td>
+          <td data-oc-col="email">info@contact2.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-oc-col="balance" data-numeric="">840.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 2" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 2" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
+        </tr>
+        <tr data-oc-row="" data-oc-key="contact-3" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 3"></td>
+          <td data-oc-col="name">Contact 3</td>
+          <td data-oc-col="email">info@contact3.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--warning">Pending</span></td>
+          <td data-oc-col="balance" data-numeric="">1260.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 3" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 3" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
+        </tr>
+        <tr data-oc-row="" data-oc-key="contact-4" data-oc-status="archived">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 4"></td>
+          <td data-oc-col="name">Contact 4</td>
+          <td data-oc-col="email">info@contact4.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--secondary">Archived</span></td>
+          <td data-oc-col="balance" data-numeric="">1680.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 4" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 4" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
+        </tr>
+        <tr data-oc-row="" data-oc-key="contact-5" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 5"></td>
+          <td data-oc-col="name">Contact 5</td>
+          <td data-oc-col="email">info@contact5.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-oc-col="balance" data-numeric="">2100.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 5" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 5" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
+        </tr>
+        <tr data-oc-row="" data-oc-key="contact-6" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 6"></td>
+          <td data-oc-col="name">Contact 6</td>
+          <td data-oc-col="email">info@contact6.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--warning">Pending</span></td>
+          <td data-oc-col="balance" data-numeric="">310.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 6" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 6" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
+        </tr>
+        <tr data-oc-row="" data-oc-key="contact-7" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 7"></td>
+          <td data-oc-col="name">Contact 7</td>
+          <td data-oc-col="email">info@contact7.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-oc-col="balance" data-numeric="">975.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 7" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 7" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
+        </tr>
+        <tr data-oc-row="" data-oc-key="contact-8" data-oc-status="archived">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 8"></td>
+          <td data-oc-col="name">Contact 8</td>
+          <td data-oc-col="email">info@contact8.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--secondary">Archived</span></td>
+          <td data-oc-col="balance" data-numeric="">150.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 8" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 8" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
         </tr>
-        <tr>
-          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Alan Turing"></td>
-          <td>Alan Turing</td>
-          <td>alan@example.com</td>
-          <td><span class="oc-badge oc-badge--success">Active</span></td>
-          <td data-numeric>840.00</td>
-          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        <tr data-oc-row="" data-oc-key="contact-9" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 9"></td>
+          <td data-oc-col="name">Contact 9</td>
+          <td data-oc-col="email">info@contact9.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-oc-col="balance" data-numeric="">3240.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 9" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 9" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
         </tr>
-        <tr>
-          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Grace Hopper"></td>
-          <td>Grace Hopper</td>
-          <td>grace@example.com</td>
-          <td><span class="oc-badge oc-badge--warning">Pending</span></td>
-          <td data-numeric>1260.00</td>
-          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        <tr data-oc-row="" data-oc-key="contact-10" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 10"></td>
+          <td data-oc-col="name">Contact 10</td>
+          <td data-oc-col="email">info@contact10.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-oc-col="balance" data-numeric="">560.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 10" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 10" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
         </tr>
-        <tr>
-          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Linus Torvalds"></td>
-          <td>Linus Torvalds</td>
-          <td>linus@example.com</td>
-          <td><span class="oc-badge oc-badge--secondary">Archived</span></td>
-          <td data-numeric>1680.00</td>
-          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        <tr data-oc-row="" data-oc-key="contact-11" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 11"></td>
+          <td data-oc-col="name">Contact 11</td>
+          <td data-oc-col="email">info@contact11.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--warning">Pending</span></td>
+          <td data-oc-col="balance" data-numeric="">1890.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 11" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 11" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
         </tr>
-        <tr>
-          <td><input class="oc-checkbox" type="checkbox" aria-label="Select Margaret Hamilton"></td>
-          <td>Margaret Hamilton</td>
-          <td>margaret@example.com</td>
-          <td><span class="oc-badge oc-badge--success">Active</span></td>
-          <td data-numeric>2100.00</td>
-          <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+        <tr data-oc-row="" data-oc-key="contact-12" data-oc-status="active">
+          <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Contact 12"></td>
+          <td data-oc-col="name">Contact 12</td>
+          <td data-oc-col="email">info@contact12.example</td>
+          <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
+          <td data-oc-col="balance" data-numeric="">720.00</td>
+          <td class="oc-table-actions" data-oc-col="actions"><a class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" href="#" aria-label="Edit Contact 12" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z"/></svg></a><button class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" type="button" data-oc-row-action="delete" aria-label="Delete Contact 12" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z"/></svg></button></td>
         </tr>
         </tbody>
       </table>
+      <p class="oc-data-table-empty" hidden>No contacts found.</p>
     </div>
     <div class="oc-table-footer">
-      <span>Showing 1 to 5 of 48 entries</span>
-      <label>Rows per page <select class="oc-select" aria-label="Rows per page"><option>10</option><option>25</option><option>50</option></select></label>
-      <nav aria-label="Pagination">
-        <ul class="oc-pagination">
-          <li class="oc-pagination-item"><a href="#" aria-label="Previous">&lsaquo;</a></li>
-          <li class="oc-pagination-item is-active"><a href="#" aria-current="page">1</a></li>
-          <li class="oc-pagination-item"><a href="#">2</a></li>
-          <li class="oc-pagination-item"><a href="#">3</a></li>
-          <li class="oc-pagination-item"><a href="#" aria-label="Next">&rsaquo;</a></li>
-        </ul>
-      </nav>
+      <span data-oc-summary="Showing {from} to {to} of {total} entries">Showing 1 to 5 of 10 entries</span>
+      <label>Rows per page <select class="oc-select" data-oc-page-size="" aria-label="Rows per page"><option>5</option><option>10</option><option>25</option></select></label>
+      <nav class="oc-data-table-pager" data-oc-pager="" aria-label="Pagination"></nav>
     </div>
   </div>
 </section>

package/blocks/hero-code.html

@@ -2,7 +2,7 @@
 <section class="oc-section-pad">
   <div class="oc-container oc-split">
     <div>
-      <p class="oc-eyebrow">Software development &middot; since 2001</p>
+      <p class="oc-eyebrow">Software development &middot; for small companies</p>
       <h1 class="oc-display">We build software that moves your business <span class="oc-text-gradient">forward</span>.</h1>
       <p class="oc-lead">From a modular ERP to a custom app for a single customer: we design, build and maintain web applications, desktop tools and plugins.</p>
       <div class="flex flex-wrap gap-1 mt-2">
@@ -14,10 +14,10 @@
       <span class="oc-icon-tile oc-icon-tile--float oc-accent--green absolute" style="inset: -0.5rem auto auto 8%;" aria-hidden="true">&#9670;</span>
       <span class="oc-icon-tile oc-icon-tile--float oc-accent--violet absolute" style="inset: 0 6% auto auto; animation-delay: -2s;" aria-hidden="true">&#9673;</span>
       <span class="oc-icon-tile oc-icon-tile--float oc-accent--orange absolute" style="inset: auto 10% -0.5rem auto; animation-delay: -4s;" aria-hidden="true">&#9650;</span>
-      <div class="oc-code-window">
+      <div class="oc-code-window oc-code-window--dark">
         <div class="oc-code-window__bar"><i></i><i></i><i></i><span class="oc-code-window__title">projects.php</span></div>
 <pre class="oc-code-window__body">return [
-  'erp'    => OmniaDesk::class,
+  'erp'    => Erp::class,
   'design' => OmniaCSS::class,
   'next'   => YourProject::class,
 ];</pre>

package/blocks/login-02.html

@@ -18,7 +18,7 @@
 <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 data-icon="mdi:layers-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 18.54l7.37-5.74L21 14.07l-9 7l-9-7l1.62-1.26zM12 16L3 9l9-7l9 7zm0-11.47L6.26 9L12 13.47L17.74 9z"/></svg> OmniaDesk</a>
+      <a class="oc-block-authduo-logo" href="#"><svg data-icon="mdi:layers-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 18.54l7.37-5.74L21 14.07l-9 7l-9-7l1.62-1.26zM12 16L3 9l9-7l9 7zm0-11.47L6.26 9L12 13.47L17.74 9z"/></svg> Company 1</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>

package/blocks/otp-02.html

@@ -19,7 +19,7 @@
 <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 data-icon="mdi:layers-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 18.54l7.37-5.74L21 14.07l-9 7l-9-7l1.62-1.26zM12 16L3 9l9-7l9 7zm0-11.47L6.26 9L12 13.47L17.74 9z"/></svg> OmniaDesk</a>
+      <a class="oc-block-authduo-logo" href="#"><svg data-icon="mdi:layers-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 18.54l7.37-5.74L21 14.07l-9 7l-9-7l1.62-1.26zM12 16L3 9l9-7l9 7zm0-11.47L6.26 9L12 13.47L17.74 9z"/></svg> Company 1</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>

package/blocks/product-grid.html

@@ -6,17 +6,17 @@
     <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>
+        <h3 class="oc-product-card__name">Product 1</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>
+        <span class="oc-product-card__more">Discover Product 1</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>
+        <h3 class="oc-product-card__name">Product 2</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>
+        <span class="oc-product-card__more">Discover Product 2</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>
@@ -27,10 +27,10 @@
       </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>
+        <h3 class="oc-product-card__name">Product 3</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>
+        <span class="oc-product-card__more">Discover Product 3</span>
       </a>
     </div>
   </div>

package/blocks/profile-header.html

@@ -1,16 +1,18 @@
 <!-- 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
+     File: packages/blocks/blocks/profile-header.html | Map: section.oc-block-profile -> banner -> bar (avatar, info, actions) -> tabs (radios) -> panels
      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).
+       -tabs, -tab: links (aria-current="page" marks the active one) or, for tabs on the page itself, labels with a
+       radio; then -panels holds one -panel per tab (same order) and the checked tab shows its panel (CSS only).
+       -grid / -thumb: the cards in the demo panels.
 -->
 <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>
+    <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true">C1</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>
+      <h1 class="oc-block-profile-name" id="oc-profile-name">Company 1</h1>
+      <p class="oc-block-profile-meta">@company1 &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">
@@ -18,10 +20,24 @@
       <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>
+  <div class="oc-block-profile-tabs" role="radiogroup" aria-label="Profile sections">
+    <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab" checked>Home</label>
+    <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab">Videos</label>
+    <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab">Playlists</label>
+    <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab">About</label>
+  </div>
+  <div class="oc-block-profile-panels">
+    <div class="oc-block-profile-panel">
+      <ul class="oc-block-profile-grid"><li><span class="oc-block-profile-thumb"></span><strong>Video 1</strong><small>Container queries in 8 minutes</small></li><li><span class="oc-block-profile-thumb"></span><strong>Video 2</strong><small>Colors in OKLCH</small></li><li><span class="oc-block-profile-thumb"></span><strong>Video 3</strong><small>A form without JavaScript</small></li></ul>
+    </div>
+    <div class="oc-block-profile-panel">
+      <ul class="oc-block-profile-grid"><li><span class="oc-block-profile-thumb"></span><strong>Video 4</strong><small>Scroll snap carousel</small></li><li><span class="oc-block-profile-thumb"></span><strong>Video 5</strong><small>Anchor positioning</small></li><li><span class="oc-block-profile-thumb"></span><strong>Video 6</strong><small>Dark mode with light-dark()</small></li><li><span class="oc-block-profile-thumb"></span><strong>Video 7</strong><small>Dialogs and popovers</small></li></ul>
+    </div>
+    <div class="oc-block-profile-panel">
+      <ul class="oc-block-profile-grid"><li><span class="oc-block-profile-thumb"></span><strong>Playlist 1</strong><small>Modern CSS · 12 videos</small></li><li><span class="oc-block-profile-thumb"></span><strong>Playlist 2</strong><small>Small business apps · 8 videos</small></li></ul>
+    </div>
+    <div class="oc-block-profile-panel">
+      <p class="oc-block-profile-bio" style="margin:0">Company 1 makes short tutorials about web design and CSS. New videos every Tuesday. Contact: info@company1.example.</p>
+    </div>
+  </div>
 </section>

package/blocks/sidebar-01.html

@@ -37,8 +37,8 @@
     </div>
     <div class="oc-sidebar-footer">
       <div class="oc-user">
-        <span class="oc-avatar oc-avatar--sm">SC</span>
-        <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
+        <span class="oc-avatar oc-avatar--sm">U1</span>
+        <span class="oc-user-text"><span class="oc-user-name">User 1</span><span class="oc-user-email">user1@company1.example</span></span>
       </div>
     </div>
   </aside>
@@ -46,7 +46,7 @@
     <header class="oc-block-sb-bar">
       <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg data-icon="mdi:dock-left" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H9V6h11Z"/></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>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb oc-breadcrumb--chevron"><li class="oc-breadcrumb-item"><a href="#"><svg data-icon="mdi:home-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg>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>

package/blocks/sidebar-02.html

@@ -45,7 +45,7 @@
     <header class="oc-block-sb-bar">
       <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg data-icon="mdi:dock-left" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H9V6h11Z"/></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>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb oc-breadcrumb--chevron"><li class="oc-breadcrumb-item"><a href="#"><svg data-icon="mdi:home-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg>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>

package/blocks/sidebar-03.html

@@ -43,7 +43,7 @@
     <header class="oc-block-sb-bar">
       <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg data-icon="mdi:dock-left" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H9V6h11Z"/></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>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb oc-breadcrumb--chevron"><li class="oc-breadcrumb-item"><a href="#"><svg data-icon="mdi:home-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg>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>

package/blocks/sidebar-04.html

@@ -37,8 +37,8 @@
     </div>
     <div class="oc-sidebar-footer">
       <div class="oc-user">
-        <span class="oc-avatar oc-avatar--sm">SC</span>
-        <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
+        <span class="oc-avatar oc-avatar--sm">U1</span>
+        <span class="oc-user-text"><span class="oc-user-name">User 1</span><span class="oc-user-email">user1@company1.example</span></span>
       </div>
     </div>
   </aside>
@@ -46,7 +46,7 @@
     <header class="oc-block-sb-bar">
       <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg data-icon="mdi:dock-left" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H9V6h11Z"/></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>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb oc-breadcrumb--chevron"><li class="oc-breadcrumb-item"><a href="#"><svg data-icon="mdi:home-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg>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>

package/blocks/sidebar-05.html

@@ -58,7 +58,7 @@
     <header class="oc-block-sb-bar">
       <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg data-icon="mdi:dock-left" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H9V6h11Z"/></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>
+      <nav aria-label="Breadcrumb"><ol class="oc-breadcrumb oc-breadcrumb--chevron"><li class="oc-breadcrumb-item"><a href="#"><svg data-icon="mdi:home-outline" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81zM12 3L2 12h3v8h6v-6h2v6h6v-8h3"/></svg>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>

package/blocks/signup-01.html

@@ -25,7 +25,7 @@
     <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">
+        <input class="oc-input" id="oc-signup01-name" name="text" type="text" autocomplete="name" required placeholder="Contact 1">
       </div>
       <div class="oc-field">
         <label class="oc-field-label" for="oc-signup01-email">E-mail</label>

package/blocks/signup-02.html

@@ -18,7 +18,7 @@
 <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 data-icon="mdi:layers-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 18.54l7.37-5.74L21 14.07l-9 7l-9-7l1.62-1.26zM12 16L3 9l9-7l9 7zm0-11.47L6.26 9L12 13.47L17.74 9z"/></svg> OmniaDesk</a>
+      <a class="oc-block-authduo-logo" href="#"><svg data-icon="mdi:layers-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 18.54l7.37-5.74L21 14.07l-9 7l-9-7l1.62-1.26zM12 16L3 9l9-7l9 7zm0-11.47L6.26 9L12 13.47L17.74 9z"/></svg> Company 1</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>
@@ -33,7 +33,7 @@
         <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">
+            <input class="oc-input" id="oc-signup02-name" name="text" type="text" autocomplete="name" required placeholder="Contact 1">
           </div>
           <div class="oc-field">
             <label class="oc-field-label" for="oc-signup02-email">E-mail</label>

package/blocks/site-footer.html

@@ -3,8 +3,8 @@
   <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>
+        <a class="oc-site-header__brand" href="/"><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9670;</span>Company 1</a>
+        <p>Web apps, sites and tools for small companies, built and maintained in-house.</p>
       </div>
       <div>
         <h2 class="oc-site-footer__title">Software</h2>
@@ -25,14 +25,14 @@
       <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>
+          <a href="mailto:info@company1.example">info@company1.example</a>
+          <span>Street 1</span>
+          <span>1000 City 1</span>
         </address>
       </div>
     </div>
     <div class="oc-site-footer__bottom">
-      <span>&copy; 2026 brandco. All rights reserved.</span>
+      <span>&copy; 2026 Company 1. All rights reserved.</span>
       <span>Built with OmniaCSS</span>
     </div>
   </div>

package/blocks/site-header.html

@@ -1,7 +1,7 @@
 <!-- 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>
+    <a class="oc-site-header__brand" href="/"><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9670;</span>Company <span class="oc-text-gradient">1</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>

package/blocks/spotlight.html

@@ -4,10 +4,10 @@
     <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>
+        <h2 class="oc-spotlight__title"><span class="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">&#9670;</span>Product 1</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>
+        <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#">Discover Product 1 &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>

package/blocks/team-list.html

@@ -7,11 +7,11 @@
 -->
 <div class="oc-block-team">
   <div class="oc-block-team-row">
-    <div class="oc-user"><span class="oc-avatar">AL</span><span class="oc-user-text"><span class="oc-user-name">Ada Lovelace</span><span class="oc-user-email">ada@example.com</span></span></div>
+    <div class="oc-user"><span class="oc-avatar">C1</span><span class="oc-user-text"><span class="oc-user-name">Contact 1</span><span class="oc-user-email">info@contact1.example</span></span></div>
     <div class="oc-block-team-meta"><span class="oc-badge">Owner</span></div>
   </div>
   <div class="oc-block-team-row">
-    <div class="oc-user"><span class="oc-avatar">AT</span><span class="oc-user-text"><span class="oc-user-name">Alan Turing</span><span class="oc-user-email">alan@example.com</span></span></div>
+    <div class="oc-user"><span class="oc-avatar">C2</span><span class="oc-user-text"><span class="oc-user-name">Contact 2</span><span class="oc-user-email">info@contact2.example</span></span></div>
     <div class="oc-block-team-meta">
       <span class="oc-badge oc-badge--secondary">Accountant</span>
       <button class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" type="button" popovertarget="oc-team-menu" aria-label="Member actions">&hellip;</button>
@@ -24,7 +24,7 @@
     </div>
   </div>
   <div class="oc-block-team-row">
-    <div class="oc-user"><span class="oc-avatar">GH</span><span class="oc-user-text"><span class="oc-user-name">Grace Hopper</span><span class="oc-user-email">grace@example.com</span></span></div>
+    <div class="oc-user"><span class="oc-avatar">C3</span><span class="oc-user-text"><span class="oc-user-name">Contact 3</span><span class="oc-user-email">info@contact3.example</span></span></div>
     <div class="oc-block-team-meta"><span class="oc-badge oc-badge--warning">Invited</span></div>
   </div>
 </div>

package/dist/blocks.css

@@ -601,7 +601,10 @@
   border-block-end: 1px solid var(--oc-border);
 }
 
-.oc-block-appbar-nav { flex: 1; min-inline-size: 0; overflow-x: auto; }
+.oc-block-appbar-nav { flex: 1; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
+/* One line: in a narrow header the module links scroll sideways instead of wrapping onto a second row. */
+.oc-block-appbar-nav .oc-navmenu { flex-wrap: nowrap; }
+.oc-block-appbar-nav .oc-navmenu-link { white-space: nowrap; }
 
 .oc-block-appbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
 
@@ -1113,6 +1116,49 @@
 
 .oc-block-dash-table { inline-size: 100%; }
 
+/* parts/app-data-table-look.css */
+/* File: packages/blocks/src/parts/app-data-table-look.css | Map: toolbar controls (2rem, pills) -> header row -> striped rows -> row actions -> footer and pager */
+/* The data table block (server-rendered, also the Livewire DataTable) in the look of the data table component
+   (.oc-data-table in packages/ui): the same control height, header, stripes, sort icons and footer. */
+
+.oc-block-datatable .oc-table-toolbar :is(.oc-input, .oc-select) { block-size: 2rem; padding-block: 0; font-size: 0.8125rem; }
+.oc-block-datatable .oc-table-toolbar .oc-input { flex: 1 1 10rem; min-inline-size: 9rem; }
+.oc-block-datatable .oc-filter-pills { border-inline-start: 0; padding-inline-start: 0; }
+.oc-block-datatable .oc-filter-pill { display: inline-flex; align-items: center; block-size: 2rem; padding-inline: 0.625rem; border-radius: calc(var(--oc-radius) - 2px); }
+.oc-block-datatable .oc-filter-pill { font: inherit; font-size: 0.8125rem; cursor: pointer; }
+.oc-block-datatable .oc-filter-pill[aria-current="true"] { color: var(--oc-primary-foreground); background: var(--oc-primary); border-color: var(--oc-primary); }
+
+.oc-block-datatable .oc-table thead th {
+  block-size: 2.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+}
+.oc-block-datatable .oc-table :is(th, td) { white-space: nowrap; vertical-align: middle; }
+.oc-block-datatable .oc-table tbody tr:nth-child(even of :not([hidden])) { background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%); }
+.oc-block-datatable .oc-table tbody tr:hover { background: color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%); }
+.oc-block-datatable td.oc-table-actions { text-align: end; }
+.oc-block-datatable .oc-block-datatable-bulk[hidden] { display: none; }
+.oc-block-datatable .oc-table tbody tr[hidden] { display: none; }
+.oc-block-datatable td.oc-table-actions > * + * { margin-inline-start: 0.375rem; }
+
+.oc-block-datatable .oc-table-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-block-datatable .oc-table-footer label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--oc-foreground); }
+.oc-block-datatable .oc-table-footer .oc-select { block-size: 2rem; padding-block: 0; inline-size: auto; font-size: 0.8125rem; }
+.oc-block-datatable .oc-table-footer nav { justify-self: end; }
+.oc-block-datatable .oc-pagination-item :is(a, button) { min-inline-size: 2rem; min-block-size: 2rem; font-size: 0.8125rem; }
+.oc-block-datatable .oc-pagination-item:is(.is-active, [aria-current]) :is(a, button),
+.oc-block-datatable .oc-pagination-item [aria-current="page"] {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-color: oklch(from var(--oc-primary) l c h / 0.35);
+}
+@media (max-width: 40rem) {
+  .oc-block-datatable .oc-table-footer { grid-template-columns: 1fr; }
+  .oc-block-datatable .oc-table-footer nav { justify-self: start; }
+}
+
 /* parts/site-about-timeline.css */
 /* File: packages/blocks/src/parts/site-about-timeline.css
    Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
@@ -1448,6 +1494,23 @@ a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
 .oc-block-profile-tab:hover { color: var(--oc-foreground); }
 .oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
 .oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+/* Tabs on the page itself (no route per tab): label.oc-block-profile-tab with a radio, the matching
+   .oc-block-profile-panel (same order) shows. CSS only. */
+label.oc-block-profile-tab { position: relative; cursor: pointer; }
+.oc-block-profile-tab > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-block-profile-tab:has(input:checked) { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
+.oc-block-profile-tab:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-block-profile-panel { display: none; padding: 1.25rem clamp(1rem, 3vw, 1.5rem); }
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(1) input:checked) .oc-block-profile-panel:nth-of-type(1),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(2) input:checked) .oc-block-profile-panel:nth-of-type(2),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(3) input:checked) .oc-block-profile-panel:nth-of-type(3),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(4) input:checked) .oc-block-profile-panel:nth-of-type(4),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(5) input:checked) .oc-block-profile-panel:nth-of-type(5),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(6) input:checked) .oc-block-profile-panel:nth-of-type(6) { display: block; }
+.oc-block-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
+.oc-block-profile-grid > li { display: grid; gap: 0.4rem; font-size: 0.875rem; }
+.oc-block-profile-grid small { color: var(--oc-muted-foreground); }
+.oc-block-profile-thumb { aspect-ratio: 16 / 9; border-radius: var(--oc-radius); background: linear-gradient(135deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary))); opacity: 0.85; }
 
 /* Compact: low banner and a smaller avatar. */
 .oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }

package/dist/blocks.min.css

@@ -1 +1 @@
-:root{--oc-block-max-width:1200px;--oc-block-gap:24px;--oc-block-radius:16px;--oc-block-surface:var(--oc-card);--oc-block-surface-soft:var(--oc-muted);--oc-block-border:var(--oc-border);--oc-block-text:var(--oc-foreground);--oc-block-text-soft:var(--oc-muted-foreground);--oc-block-accent:var(--oc-primary)}.oc-block-hero{text-align:center;padding:64px var(--oc-block-gap) 48px;max-width:var(--oc-block-max-width);margin:0 auto}.oc-block-hero-badge{border:1px solid var(--oc-block-border);color:var(--oc-block-accent);background:oklch(from var(--color-vividblue-50) l c h / .08);border-radius:999px;margin-bottom:16px;padding:4px 12px;font-size:.78rem;display:inline-block}.oc-block-hero h1{color:var(--oc-block-text);letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15}.oc-block-hero p{color:var(--oc-block-text-soft);max-width:640px;margin:0 auto 28px;font-size:1.1rem;line-height:1.6}.oc-block-hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.oc-block-hero-split{padding:48px var(--oc-block-gap);max-width:var(--oc-block-max-width);grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin:0 auto;display:grid}.oc-block-hero-split h1{color:var(--oc-block-text);margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.15}.oc-block-hero-split p{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:1rem;line-height:1.6}.oc-block-hero-visual{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);min-height:280px;color:var(--oc-block-text-soft);justify-content:center;align-items:center;font-size:.9rem;display:flex}@media (width<=50rem){.oc-block-hero-split{text-align:center;grid-template-columns:1fr}}.oc-block-auth{max-width:400px;padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-auth-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:32px 28px}.oc-block-auth-card h2{color:var(--oc-block-text);margin:0 0 6px;font-size:1.3rem}.oc-block-auth-card .oc-block-subtitle{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:.88rem}.oc-block-auth-footer{text-align:center;color:var(--oc-block-text-soft);margin-top:16px;font-size:.85rem}.oc-block-auth-footer a{color:var(--oc-block-accent);text-decoration:none}.oc-block-auth-footer a:hover{text-decoration:underline}.oc-block-auth-divider{color:var(--oc-block-text-soft);align-items:center;gap:12px;margin:20px 0;font-size:.82rem;display:flex}.oc-block-auth-divider:before,.oc-block-auth-divider:after{content:"";background:var(--oc-block-border);flex:1;height:1px}.oc-block-pricing{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-pricing h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.8rem}.oc-block-pricing>p{color:var(--oc-block-text-soft);margin:0 0 32px;font-size:1rem}.oc-block-pricing-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.oc-block-pricing-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:left;flex-direction:column;padding:28px 24px;display:flex}.oc-block-pricing-card--featured{border-color:var(--oc-block-accent);box-shadow:0 0 0 1px var(--oc-block-accent)}.oc-block-pricing-name{color:var(--oc-block-text);margin:0 0 4px;font-size:1rem;font-weight:600}.oc-block-pricing-desc{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.85rem}.oc-block-pricing-price{color:var(--oc-block-text);margin:0 0 4px;font-size:2.2rem;font-weight:700}.oc-block-pricing-price span{color:var(--oc-block-text-soft);font-size:.9rem;font-weight:400}.oc-block-pricing-features{flex:1;margin:16px 0 24px;padding:0;list-style:none}.oc-block-pricing-features li{color:var(--oc-block-text-soft);border-bottom:1px solid var(--oc-border);padding:6px 0;font-size:.88rem}.oc-block-pricing-features li:before{content:"✓ ";color:var(--oc-block-accent);font-weight:600}.oc-block-features{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-features h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.6rem}.oc-block-features>p{color:var(--oc-block-text-soft);margin:0 0 32px}.oc-block-features-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid}.oc-block-feature-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-feature-icon{background:oklch(from var(--color-vividblue-50) l c h / .12);width:40px;height:40px;color:var(--oc-block-accent);border-radius:10px;justify-content:center;align-items:center;margin-bottom:14px;font-size:1.2rem;display:flex}.oc-block-feature-card h3{color:var(--oc-block-text);margin:0 0 8px;font-size:1rem}.oc-block-feature-card p{color:var(--oc-block-text-soft);margin:0;font-size:.88rem;line-height:1.55}.oc-block-testimonials{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-testimonial-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.oc-block-testimonial-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-testimonial-card blockquote{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.92rem;font-style:italic;line-height:1.6}.oc-block-testimonial-author{align-items:center;gap:10px;display:flex}.oc-block-testimonial-author strong{color:var(--oc-block-text);font-size:.88rem;display:block}.oc-block-testimonial-author span{color:var(--oc-block-text-soft);font-size:.78rem}.oc-block-footer{border-top:1px solid var(--oc-block-border);inline-size:100%;padding:40px var(--oc-block-gap) 24px;max-width:var(--oc-block-max-width);margin:48px auto 0}.oc-block-footer-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;margin-bottom:32px;display:grid}.oc-block-footer-col h4{text-transform:uppercase;letter-spacing:.06em;color:var(--oc-block-text-soft);margin:0 0 12px;font-size:.85rem}.oc-block-footer-col ul{margin:0;padding:0;list-style:none}.oc-block-footer-col li{margin-bottom:8px}.oc-block-footer-col a{color:var(--oc-block-text-soft);font-size:.88rem;text-decoration:none}.oc-block-footer-col a:hover{color:var(--oc-block-text)}.oc-block-footer-bottom{border-top:1px solid var(--oc-block-border);color:var(--oc-block-text-soft);flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:16px;font-size:.82rem;display:flex}.oc-block-cta{background:linear-gradient(135deg, oklch(from var(--color-vividblue-50) l c h / .12), oklch(from var(--color-indigo-10) l c h / .08));border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:center;max-width:var(--oc-block-max-width);margin:48px auto;padding:40px}.oc-block-cta h2{color:var(--oc-block-text);margin:0 0 10px;font-size:1.5rem}.oc-block-cta p{color:var(--oc-block-text-soft);max-width:520px;margin:0 auto 24px}.oc-block-stats{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:48px auto;display:grid}.oc-block-stat{padding:20px}.oc-block-stat-value{color:var(--oc-block-accent);margin-bottom:4px;font-size:2rem;font-weight:700}.oc-block-stat-label{color:var(--oc-block-text-soft);font-size:.85rem}.oc-block-swatch-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px;display:grid}.oc-block-swatch-grid .oc-swatch--ral-group{border-color:var(--color-vividblue-70);background:oklch(from var(--color-vividblue-70) l c h / .12);min-height:88px}.oc-block-shell{--oc-block-shell-height:100dvh;block-size:var(--oc-block-shell-height);background:var(--oc-background);color:var(--oc-foreground);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-shell-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-shell-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-shell-breadcrumbs{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.5rem 1rem}.oc-block-shell-content{overscroll-behavior-y:contain;flex:1;min-block-size:0;min-inline-size:0;padding:1rem;overflow:auto}.oc-block-shell-menu-button{display:none}@media (width<=47.99rem){.oc-block-shell{grid-template-columns:minmax(0,1fr)}.oc-block-shell>.oc-sidebar{display:none}.oc-block-shell-menu-button{display:inline-flex}}.oc-block-appbar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.75rem;min-block-size:3.5rem;padding:.5rem 1rem;display:flex}.oc-block-appbar-nav{flex:1;min-inline-size:0;overflow-x:auto}.oc-block-appbar-actions{align-items:center;gap:.5rem;margin-inline-start:auto;display:flex}.oc-block-appbar-title{white-space:nowrap;font-size:1rem;font-weight:600}.oc-block-modulehead{padding:1.5rem 0 .5rem}.oc-block-modulehead-band{background:linear-gradient(100deg, oklch(from var(--oc-primary) l c h / .1), oklch(from var(--oc-primary) l c h / .02));border:1px solid oklch(from var(--oc-primary) l c h / .25);border-radius:calc(var(--oc-radius) + 4px);align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;display:flex}.oc-block-modulehead-icon{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary);background:oklch(from var(--oc-primary) l c h / .12);border-radius:calc(var(--oc-radius) + 2px);flex-shrink:0;place-items:center;font-size:1.25rem;display:grid}.oc-block-modulehead-icon svg{block-size:1.25em;inline-size:1.25em}.oc-block-authsplit-logo svg{block-size:1.5rem;inline-size:1.5rem}.oc-block-modulehead-body{min-inline-size:0;max-inline-size:42rem}.oc-block-modulehead-title{letter-spacing:-.01em;color:var(--oc-foreground);margin:0;font-size:1.25rem;font-weight:600}.oc-block-modulehead-intro{color:var(--oc-muted-foreground);margin:.25rem 0 0;font-size:.875rem;line-height:1.55}.oc-block-modulehead-meta{flex-wrap:wrap;align-items:center;gap:.5rem;margin-block-start:.5rem;display:flex}.oc-block-modulehead-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding-block:1rem 0;display:flex}.oc-block-datatable{padding:0}.oc-block-datatable-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1.25rem 1.5rem 0;display:flex}.oc-block-datatable-title{color:var(--oc-foreground);margin:0;font-size:1.1rem;font-weight:600}.oc-block-datatable-description{color:var(--oc-muted-foreground);margin:.125rem 0 0;font-size:.875rem}.oc-block-datatable-body{padding:1rem 1.5rem 1.25rem}.oc-block-datatable .oc-table-wrap{border:1px solid var(--oc-border)}.oc-block-datatable .oc-table{table-layout:auto}.oc-block-datatable .oc-table th,.oc-block-datatable .oc-table td{border-inline:0}.oc-block-datatable .oc-table tbody tr:last-child td{border-block-end:0}.oc-block-datatable .oc-table-wrap>.oc-table{min-inline-size:40rem}.oc-block-datatable-bulk{background:oklch(from var(--oc-primary) l c h / .08);border:1px solid oklch(from var(--oc-primary) l c h / .3);border-radius:var(--oc-radius);align-items:center;gap:.75rem;margin-block-end:.75rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.oc-block-authsplit{background:var(--oc-background);min-block-size:32rem;color:var(--oc-foreground);display:grid}@media (width>=62rem){.oc-block-authsplit{grid-template-columns:1fr 1fr}}.oc-block-authsplit-brand{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 80% 60% at 20% -10%, oklch(from var(--oc-brand-2) l c h / .35), transparent 55%), var(--oc-primary);border-inline-end:1px solid var(--oc-border);flex-direction:column;justify-content:space-between;gap:2rem;padding:2.5rem;display:none;position:relative}@media (width>=62rem){.oc-block-authsplit-brand{display:flex}}.oc-block-authsplit-brand--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authsplit-photo,none) center / cover no-repeat, var(--oc-primary)}.oc-block-authsplit-brand--photo .oc-block-authsplit-quote{border-inline-start-color:oklch(from var(--color-white-100) l c h / .6)}.oc-block-authsplit-logo{letter-spacing:-.01em;color:inherit;align-items:center;gap:.75rem;font-size:1.1rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authsplit-quote{border-inline-start:2px solid oklch(from var(--oc-primary-foreground) l c h / .55);max-inline-size:28rem;margin:0;padding-inline-start:1.25rem}.oc-block-authsplit-quote p{color:inherit;margin:0 0 .5rem;font-size:1.1rem;font-weight:500;line-height:1.55}.oc-block-authsplit-quote footer{opacity:.75;color:inherit;font-size:.875rem}.oc-block-authsplit-form{justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.oc-block-authsplit-card{inline-size:100%;max-inline-size:26rem}.oc-block-authsplit-title{letter-spacing:-.01em;text-align:center;margin:0 0 .25rem;font-size:1.5rem;font-weight:600}.oc-block-authsplit-subtitle{text-align:center;color:var(--oc-muted-foreground);margin:0 0 1.5rem;font-size:.875rem}.oc-block-authsplit-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authsplit-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-twofactor{gap:1.5rem;max-inline-size:28rem;margin-inline:auto;display:grid}.oc-block-twofactor-step{gap:.75rem;display:grid}.oc-block-twofactor-center{text-align:center;justify-items:center;gap:.75rem;display:grid}.oc-block-twofactor-qr{block-size:11rem;inline-size:11rem;color:var(--oc-muted-foreground);background:var(--oc-surface-strong);border:1px dashed var(--oc-border-strong);border-radius:var(--oc-radius);place-items:center;font-size:.75rem;display:grid}.oc-block-wizard{flex-direction:column;min-block-size:0;display:flex}@media (width>=48rem){.oc-block-wizard{flex-direction:row}}.oc-block-wizard-rail{border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.75rem;overflow-x:auto}@media (width>=48rem){.oc-block-wizard-rail{border-block-end:0;border-inline-end:1px solid var(--oc-border);inline-size:15rem;padding:1rem;overflow-y:auto}}.oc-block-wizard-main{flex-direction:column;flex:1;min-inline-size:0;display:flex}.oc-block-wizard-step{flex-direction:column;flex:1;gap:1rem;padding:1.25rem 1.5rem;display:flex}.oc-block-wizard-step[hidden]{display:none}.oc-block-team{border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);background:var(--oc-card);flex-direction:column;display:flex;overflow:hidden}.oc-block-team-row{align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.oc-block-team-row+.oc-block-team-row{border-block-start:1px solid var(--oc-border)}.oc-block-team-row .oc-user{flex:1}.oc-block-team-meta{align-items:center;gap:.5rem;display:flex}.oc-block-formpage{flex-direction:column;gap:1rem;max-inline-size:56rem;display:flex}.oc-block-formpage-grid{gap:1rem;display:grid}@media (width>=40rem){.oc-block-formpage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.oc-block-formpage-actions{background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 2px);box-shadow:0 -4px 16px oklch(from var(--color-black-60) l c h / .08);justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;display:flex;position:sticky;inset-block-end:0}.oc-block-authpage{min-block-size:30rem;color:var(--oc-foreground);background:var(--oc-muted);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-authpage--plain{background:var(--oc-background);border:1px solid var(--oc-border)}.oc-block-authcard{inline-size:100%;max-inline-size:24rem;color:var(--oc-foreground);background:var(--oc-card);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);box-shadow:0 1px 2px oklch(from var(--color-black-60) l c h / .06);flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.oc-block-authcard--flat{box-shadow:none;background:0 0;border:0;padding:0}.oc-block-authcard--wide{max-inline-size:28rem}.oc-block-authcard-logo{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);place-items:center;margin-inline:auto;display:grid}.oc-block-authcard-logo svg{block-size:1.35rem;inline-size:1.35rem}.oc-block-authcard-head{text-align:center;flex-direction:column;gap:.25rem;display:flex}.oc-block-authcard-title{letter-spacing:-.01em;margin:0;font-size:1.375rem;font-weight:600}.oc-block-authcard-text{color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authcard-fields .oc-field:has(>.oc-otp){text-align:center;align-items:center}.oc-block-authcard-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-authcard-foot{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-foot a{color:var(--oc-foreground);text-underline-offset:3px;font-weight:500;text-decoration:underline}.oc-block-authcard-legal{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-legal a{color:inherit;text-underline-offset:3px;text-decoration:underline}.oc-block-authcard-submit{inline-size:100%}.oc-block-authcard-hint{color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-center{flex-direction:column;align-items:center;gap:.75rem;display:flex}.oc-block-authsocial{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem;display:grid}.oc-block-authsocial .oc-btn{inline-size:100%}.oc-block-authduo{color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);overflow:hidden;container:oc-authduo/inline-size}.oc-block-authduo-grid{min-block-size:34rem;display:grid}.oc-block-authduo-panel{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 70% 55% at 85% 100%, oklch(from var(--oc-brand-2) l c h / .4), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 0%, oklch(from var(--oc-brand-3) l c h / .35), transparent 60%), var(--oc-primary);flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem;display:none;position:relative}.oc-block-authduo-panel--image:before{content:"";background:repeating-linear-gradient(135deg, oklch(from var(--oc-primary-foreground) l c h / .07) 0 1px, transparent 1px 14px), linear-gradient(to top, oklch(from var(--oc-primary) l c h / .7), transparent 60%);pointer-events:none;position:absolute;inset:0}.oc-block-authduo-panel--muted{color:var(--oc-foreground);background:var(--oc-muted)}.oc-block-authduo-panel--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authduo-photo,none) center / cover no-repeat, var(--oc-primary)}@container oc-authduo (width>=42rem){.oc-block-authduo-grid{grid-template-columns:1fr 1fr}.oc-block-authduo-panel{display:flex}.oc-block-authduo--reverse .oc-block-authduo-panel{order:2}}.oc-block-authduo-panel>*{position:relative}.oc-block-authduo-logo{color:inherit;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authduo-logo svg{block-size:1.4rem;inline-size:1.4rem}.oc-block-authduo-quote{max-inline-size:26rem;margin:0}.oc-block-authduo-quote p{color:inherit;margin:0 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.55}.oc-block-authduo-quote footer{opacity:.8;color:inherit;font-size:.8125rem}.oc-block-authduo-form{place-items:center;padding:2rem 1.25rem;display:grid}.oc-block-authmin{min-block-size:26rem;color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-sb{--oc-block-sb-height:26rem;block-size:var(--oc-block-sb-height);color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-sb--floating{background:var(--oc-muted)}.oc-block-sb-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-sb-bar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.5rem;min-block-size:3rem;padding:.5rem .75rem;display:flex}.oc-block-sb-sep{background:var(--oc-border-strong);block-size:1rem;inline-size:1px}.oc-block-sb-body{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4.5rem;gap:.75rem;min-block-size:0;padding:.75rem;display:grid;overflow:auto}.oc-block-sb-ph{background:var(--oc-muted);border-radius:var(--oc-radius)}.oc-block-sb-ph--wide{grid-area:span 3/1/auto/-1}.oc-block-sb-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-sb-hint{color:var(--oc-muted-foreground);margin:0;padding:0 .75rem;font-size:.75rem}.oc-block-sb-group>summary{letter-spacing:.04em;text-transform:uppercase;color:var(--oc-muted-foreground);cursor:pointer;border-radius:var(--oc-radius);justify-content:space-between;align-items:center;padding:.5rem .625rem .25rem;font-size:.7rem;font-weight:600;list-style:none;display:flex}.oc-block-sb-group>summary::-webkit-details-marker{display:none}.oc-block-sb-group>summary:after{content:"";block-size:.4rem;inline-size:.4rem;transition:rotate var(--oc-transition-fast);border-block-end:1.5px solid;border-inline-end:1.5px solid;rotate:-45deg}.oc-block-sb-group[open]>summary:after{rotate:45deg}.oc-block-sb-group>summary:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-sb-rail{background:var(--oc-muted);border-inline-end:1px solid var(--oc-border);flex-direction:column;align-items:center;gap:.5rem;inline-size:3.5rem;padding:.75rem .5rem;display:flex}.oc-block-sb-rail .oc-sidebar-menu-button{justify-content:center;padding:.5rem}.oc-block-sb-switch{inline-size:100%;font:inherit;color:inherit;cursor:pointer;text-align:start;background:0 0;border:0}.oc-block-sb-tile{block-size:2rem;inline-size:2rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);flex:none;place-items:center;display:grid}.oc-block-sb-tile svg{block-size:1rem;inline-size:1rem}.oc-block-sb-sub{color:var(--oc-muted-foreground);font-size:.75rem;font-weight:400;display:block}.oc-block-dash-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;display:grid}.oc-block-dash-table{inline-size:100%}.oc-block-about{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-about-inner{align-items:center;gap:clamp(2rem,5vw,3.5rem);display:grid}@container (width>=52rem){.oc-block-about-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.oc-block-about--reverse .oc-block-about-media{order:2}}.oc-block-about-media{aspect-ratio:4/3;border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%), linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));margin:0;position:relative;overflow:hidden}.oc-block-about-media>img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.oc-block-about-badge{border:1px solid var(--oc-border);border-radius:var(--oc-radius-md,.75rem);background:color-mix(in oklch, var(--oc-background) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--oc-muted-foreground);padding:.75rem 1rem;font-size:.85rem;display:grid;position:absolute;inset:auto auto 1rem 1rem}.oc-block-about-badge strong{color:var(--oc-foreground);font-size:1.4rem;line-height:1.1}.oc-block-about-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 1rem;font-size:clamp(1.75rem,4vw,2.6rem);font-weight:700;line-height:1.15}.oc-block-about-copy>p:not([class]){color:var(--oc-muted-foreground);margin:0 0 1rem;line-height:1.65}.oc-block-about-copy .oc-timeline{margin-block-start:1.75rem}.oc-block-contact{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto}.oc-block-contact-head{max-inline-size:40rem;margin-block-end:2rem}.oc-block-contact-heading{letter-spacing:-.02em;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-contact-lead{color:var(--oc-muted-foreground);margin:0;font-size:1.05rem;line-height:1.6}.oc-block-contact-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1.25rem;display:grid}.oc-block-contact-card{border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:var(--oc-surface);align-content:start;gap:.35rem;padding:1.5rem;font-style:normal;display:grid}.oc-block-contact-card>.oc-product-mark{margin-block-end:.75rem}.oc-block-contact-title{margin:0 0 .25rem;font-size:1.05rem;font-weight:700}.oc-block-contact-line{color:var(--oc-muted-foreground);overflow-wrap:anywhere;margin:0;font-size:.95rem;line-height:1.55;text-decoration:none}a.oc-block-contact-line{color:var(--oc-foreground);font-weight:500}a.oc-block-contact-line:hover{color:var(--oc-brand-1)}.oc-block-contact--plain .oc-block-contact-card{border:0;border-block-start:2px solid var(--oc-border-strong);background:0 0;border-radius:0;padding:1.25rem 0 0}.oc-block-faq{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-faq-inner{gap:2rem;max-inline-size:48rem;margin-inline:auto;display:grid}.oc-block-faq-head{text-align:center}.oc-block-faq-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-faq-lead{color:var(--oc-block-text-soft,var(--oc-muted-foreground));margin:0;font-size:1.05rem;line-height:1.6}.oc-block-faq-list{--oc-accordion-width:100%;background:var(--oc-block-surface,var(--oc-card))}.oc-block-faq-more{color:var(--oc-block-text-soft,var(--oc-muted-foreground));text-align:center;margin:0}@container (width>=48rem){.oc-block-faq--split .oc-block-faq-inner{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;max-inline-size:none}.oc-block-faq--split .oc-block-faq-head{text-align:start;position:sticky;inset-block-start:1rem}.oc-block-faq--split .oc-block-faq-more{text-align:start;grid-column:2}}.oc-block-orbit-visual{aspect-ratio:1;place-items:center;inline-size:100%;max-inline-size:32rem;margin-inline:auto;display:grid;position:relative;container-type:inline-size}.oc-block-orbit-ring{border:1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite;border-radius:50%;position:absolute;inset:6%}.oc-block-orbit-ring:before{content:"";border:1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);border-radius:50%;position:absolute;inset:18%}.oc-block-orbit-mark{translate:-50% -50%;transform:rotate(var(--oc-orbit-angle,0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle,0deg) * -1));position:absolute;inset-block-start:50%;inset-inline-start:50%}.oc-block-orbit-mark>*{animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite reverse;display:grid}.oc-block-orbit-center{z-index:1;inline-size:min(100%,72cqi);position:relative}.oc-block-orbit-center.oc-code-window .oc-code-window__body{font-size:clamp(.7rem,2.6cqi,.9rem)}@keyframes oc-orbit-spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.oc-block-orbit-ring,.oc-block-orbit-mark>*{animation:none}}.oc-block-portfolio-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-block-end:2rem;display:flex}.oc-block-portfolio-head .oc-display{margin-block-end:0}.oc-block-portfolio-lead{color:var(--oc-muted-foreground);max-inline-size:36rem;margin:.75rem 0 0}.oc-block-portfolio-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min,18rem)), 1fr));gap:1.5rem;display:grid}.oc-block-portfolio--two{--oc-portfolio-min:26rem}.oc-block-profile{max-inline-size:var(--oc-block-max-width,1200px);margin-inline:auto;container-type:inline-size}.oc-block-profile-banner{aspect-ratio:6;border-radius:var(--oc-block-radius,16px);background:var(--oc-profile-banner,radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)), linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));background-position:50%;background-size:cover;min-block-size:7rem}.oc-block-profile-bar{flex-wrap:wrap;align-items:flex-end;gap:1rem 1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex}.oc-block-profile-avatar.oc-avatar{border:4px solid var(--oc-background);width:6.5rem;height:6.5rem;margin-block-start:-3.25rem;font-size:2rem}.oc-block-profile-info{flex:16rem;min-inline-size:0;padding-block-start:.75rem}.oc-block-profile-name{letter-spacing:-.02em;margin:0;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}.oc-block-profile-meta{color:var(--oc-muted-foreground);margin:.2rem 0 0;font-size:.9rem}.oc-block-profile-bio{color:var(--oc-muted-foreground);max-inline-size:44rem;margin:.5rem 0 0;font-size:.95rem}.oc-block-profile-actions{flex-wrap:wrap;gap:.5rem;display:flex}.oc-block-profile-tabs{border-block-end:1px solid var(--oc-border);scrollbar-width:none;gap:.25rem;margin-block-start:1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex;overflow-x:auto}.oc-block-profile-tab{color:var(--oc-muted-foreground);white-space:nowrap;transition:color var(--oc-transition-fast,.15s), border-color var(--oc-transition-fast,.15s);border-block-end:2px solid #0000;padding:.75rem 1rem;font-size:.92rem;font-weight:500;text-decoration:none}.oc-block-profile-tab:hover{color:var(--oc-foreground)}.oc-block-profile-tab[aria-current=page]{border-block-end-color:var(--oc-brand-1);color:var(--oc-foreground)}.oc-block-profile-tab:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-profile--compact .oc-block-profile-banner{aspect-ratio:10;min-block-size:4.5rem}.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar{width:4.5rem;height:4.5rem;margin-block-start:-2.25rem;font-size:1.4rem}@container (width<=34rem){.oc-block-profile-actions{flex-basis:100%}}
+:root{--oc-block-max-width:1200px;--oc-block-gap:24px;--oc-block-radius:16px;--oc-block-surface:var(--oc-card);--oc-block-surface-soft:var(--oc-muted);--oc-block-border:var(--oc-border);--oc-block-text:var(--oc-foreground);--oc-block-text-soft:var(--oc-muted-foreground);--oc-block-accent:var(--oc-primary)}.oc-block-hero{text-align:center;padding:64px var(--oc-block-gap) 48px;max-width:var(--oc-block-max-width);margin:0 auto}.oc-block-hero-badge{border:1px solid var(--oc-block-border);color:var(--oc-block-accent);background:oklch(from var(--color-vividblue-50) l c h / .08);border-radius:999px;margin-bottom:16px;padding:4px 12px;font-size:.78rem;display:inline-block}.oc-block-hero h1{color:var(--oc-block-text);letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15}.oc-block-hero p{color:var(--oc-block-text-soft);max-width:640px;margin:0 auto 28px;font-size:1.1rem;line-height:1.6}.oc-block-hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.oc-block-hero-split{padding:48px var(--oc-block-gap);max-width:var(--oc-block-max-width);grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin:0 auto;display:grid}.oc-block-hero-split h1{color:var(--oc-block-text);margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.15}.oc-block-hero-split p{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:1rem;line-height:1.6}.oc-block-hero-visual{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);min-height:280px;color:var(--oc-block-text-soft);justify-content:center;align-items:center;font-size:.9rem;display:flex}@media (width<=50rem){.oc-block-hero-split{text-align:center;grid-template-columns:1fr}}.oc-block-auth{max-width:400px;padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-auth-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:32px 28px}.oc-block-auth-card h2{color:var(--oc-block-text);margin:0 0 6px;font-size:1.3rem}.oc-block-auth-card .oc-block-subtitle{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:.88rem}.oc-block-auth-footer{text-align:center;color:var(--oc-block-text-soft);margin-top:16px;font-size:.85rem}.oc-block-auth-footer a{color:var(--oc-block-accent);text-decoration:none}.oc-block-auth-footer a:hover{text-decoration:underline}.oc-block-auth-divider{color:var(--oc-block-text-soft);align-items:center;gap:12px;margin:20px 0;font-size:.82rem;display:flex}.oc-block-auth-divider:before,.oc-block-auth-divider:after{content:"";background:var(--oc-block-border);flex:1;height:1px}.oc-block-pricing{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-pricing h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.8rem}.oc-block-pricing>p{color:var(--oc-block-text-soft);margin:0 0 32px;font-size:1rem}.oc-block-pricing-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.oc-block-pricing-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:left;flex-direction:column;padding:28px 24px;display:flex}.oc-block-pricing-card--featured{border-color:var(--oc-block-accent);box-shadow:0 0 0 1px var(--oc-block-accent)}.oc-block-pricing-name{color:var(--oc-block-text);margin:0 0 4px;font-size:1rem;font-weight:600}.oc-block-pricing-desc{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.85rem}.oc-block-pricing-price{color:var(--oc-block-text);margin:0 0 4px;font-size:2.2rem;font-weight:700}.oc-block-pricing-price span{color:var(--oc-block-text-soft);font-size:.9rem;font-weight:400}.oc-block-pricing-features{flex:1;margin:16px 0 24px;padding:0;list-style:none}.oc-block-pricing-features li{color:var(--oc-block-text-soft);border-bottom:1px solid var(--oc-border);padding:6px 0;font-size:.88rem}.oc-block-pricing-features li:before{content:"✓ ";color:var(--oc-block-accent);font-weight:600}.oc-block-features{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-features h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.6rem}.oc-block-features>p{color:var(--oc-block-text-soft);margin:0 0 32px}.oc-block-features-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid}.oc-block-feature-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-feature-icon{background:oklch(from var(--color-vividblue-50) l c h / .12);width:40px;height:40px;color:var(--oc-block-accent);border-radius:10px;justify-content:center;align-items:center;margin-bottom:14px;font-size:1.2rem;display:flex}.oc-block-feature-card h3{color:var(--oc-block-text);margin:0 0 8px;font-size:1rem}.oc-block-feature-card p{color:var(--oc-block-text-soft);margin:0;font-size:.88rem;line-height:1.55}.oc-block-testimonials{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-testimonial-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.oc-block-testimonial-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-testimonial-card blockquote{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.92rem;font-style:italic;line-height:1.6}.oc-block-testimonial-author{align-items:center;gap:10px;display:flex}.oc-block-testimonial-author strong{color:var(--oc-block-text);font-size:.88rem;display:block}.oc-block-testimonial-author span{color:var(--oc-block-text-soft);font-size:.78rem}.oc-block-footer{border-top:1px solid var(--oc-block-border);inline-size:100%;padding:40px var(--oc-block-gap) 24px;max-width:var(--oc-block-max-width);margin:48px auto 0}.oc-block-footer-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;margin-bottom:32px;display:grid}.oc-block-footer-col h4{text-transform:uppercase;letter-spacing:.06em;color:var(--oc-block-text-soft);margin:0 0 12px;font-size:.85rem}.oc-block-footer-col ul{margin:0;padding:0;list-style:none}.oc-block-footer-col li{margin-bottom:8px}.oc-block-footer-col a{color:var(--oc-block-text-soft);font-size:.88rem;text-decoration:none}.oc-block-footer-col a:hover{color:var(--oc-block-text)}.oc-block-footer-bottom{border-top:1px solid var(--oc-block-border);color:var(--oc-block-text-soft);flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:16px;font-size:.82rem;display:flex}.oc-block-cta{background:linear-gradient(135deg, oklch(from var(--color-vividblue-50) l c h / .12), oklch(from var(--color-indigo-10) l c h / .08));border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:center;max-width:var(--oc-block-max-width);margin:48px auto;padding:40px}.oc-block-cta h2{color:var(--oc-block-text);margin:0 0 10px;font-size:1.5rem}.oc-block-cta p{color:var(--oc-block-text-soft);max-width:520px;margin:0 auto 24px}.oc-block-stats{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:48px auto;display:grid}.oc-block-stat{padding:20px}.oc-block-stat-value{color:var(--oc-block-accent);margin-bottom:4px;font-size:2rem;font-weight:700}.oc-block-stat-label{color:var(--oc-block-text-soft);font-size:.85rem}.oc-block-swatch-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px;display:grid}.oc-block-swatch-grid .oc-swatch--ral-group{border-color:var(--color-vividblue-70);background:oklch(from var(--color-vividblue-70) l c h / .12);min-height:88px}.oc-block-shell{--oc-block-shell-height:100dvh;block-size:var(--oc-block-shell-height);background:var(--oc-background);color:var(--oc-foreground);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-shell-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-shell-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-shell-breadcrumbs{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.5rem 1rem}.oc-block-shell-content{overscroll-behavior-y:contain;flex:1;min-block-size:0;min-inline-size:0;padding:1rem;overflow:auto}.oc-block-shell-menu-button{display:none}@media (width<=47.99rem){.oc-block-shell{grid-template-columns:minmax(0,1fr)}.oc-block-shell>.oc-sidebar{display:none}.oc-block-shell-menu-button{display:inline-flex}}.oc-block-appbar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.75rem;min-block-size:3.5rem;padding:.5rem 1rem;display:flex}.oc-block-appbar-nav{scrollbar-width:none;flex:1;min-inline-size:0;overflow-x:auto}.oc-block-appbar-nav .oc-navmenu{flex-wrap:nowrap}.oc-block-appbar-nav .oc-navmenu-link{white-space:nowrap}.oc-block-appbar-actions{align-items:center;gap:.5rem;margin-inline-start:auto;display:flex}.oc-block-appbar-title{white-space:nowrap;font-size:1rem;font-weight:600}.oc-block-modulehead{padding:1.5rem 0 .5rem}.oc-block-modulehead-band{background:linear-gradient(100deg, oklch(from var(--oc-primary) l c h / .1), oklch(from var(--oc-primary) l c h / .02));border:1px solid oklch(from var(--oc-primary) l c h / .25);border-radius:calc(var(--oc-radius) + 4px);align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;display:flex}.oc-block-modulehead-icon{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary);background:oklch(from var(--oc-primary) l c h / .12);border-radius:calc(var(--oc-radius) + 2px);flex-shrink:0;place-items:center;font-size:1.25rem;display:grid}.oc-block-modulehead-icon svg{block-size:1.25em;inline-size:1.25em}.oc-block-authsplit-logo svg{block-size:1.5rem;inline-size:1.5rem}.oc-block-modulehead-body{min-inline-size:0;max-inline-size:42rem}.oc-block-modulehead-title{letter-spacing:-.01em;color:var(--oc-foreground);margin:0;font-size:1.25rem;font-weight:600}.oc-block-modulehead-intro{color:var(--oc-muted-foreground);margin:.25rem 0 0;font-size:.875rem;line-height:1.55}.oc-block-modulehead-meta{flex-wrap:wrap;align-items:center;gap:.5rem;margin-block-start:.5rem;display:flex}.oc-block-modulehead-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding-block:1rem 0;display:flex}.oc-block-datatable{padding:0}.oc-block-datatable-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1.25rem 1.5rem 0;display:flex}.oc-block-datatable-title{color:var(--oc-foreground);margin:0;font-size:1.1rem;font-weight:600}.oc-block-datatable-description{color:var(--oc-muted-foreground);margin:.125rem 0 0;font-size:.875rem}.oc-block-datatable-body{padding:1rem 1.5rem 1.25rem}.oc-block-datatable .oc-table-wrap{border:1px solid var(--oc-border)}.oc-block-datatable .oc-table{table-layout:auto}.oc-block-datatable .oc-table th,.oc-block-datatable .oc-table td{border-inline:0}.oc-block-datatable .oc-table tbody tr:last-child td{border-block-end:0}.oc-block-datatable .oc-table-wrap>.oc-table{min-inline-size:40rem}.oc-block-datatable-bulk{background:oklch(from var(--oc-primary) l c h / .08);border:1px solid oklch(from var(--oc-primary) l c h / .3);border-radius:var(--oc-radius);align-items:center;gap:.75rem;margin-block-end:.75rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.oc-block-authsplit{background:var(--oc-background);min-block-size:32rem;color:var(--oc-foreground);display:grid}@media (width>=62rem){.oc-block-authsplit{grid-template-columns:1fr 1fr}}.oc-block-authsplit-brand{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 80% 60% at 20% -10%, oklch(from var(--oc-brand-2) l c h / .35), transparent 55%), var(--oc-primary);border-inline-end:1px solid var(--oc-border);flex-direction:column;justify-content:space-between;gap:2rem;padding:2.5rem;display:none;position:relative}@media (width>=62rem){.oc-block-authsplit-brand{display:flex}}.oc-block-authsplit-brand--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authsplit-photo,none) center / cover no-repeat, var(--oc-primary)}.oc-block-authsplit-brand--photo .oc-block-authsplit-quote{border-inline-start-color:oklch(from var(--color-white-100) l c h / .6)}.oc-block-authsplit-logo{letter-spacing:-.01em;color:inherit;align-items:center;gap:.75rem;font-size:1.1rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authsplit-quote{border-inline-start:2px solid oklch(from var(--oc-primary-foreground) l c h / .55);max-inline-size:28rem;margin:0;padding-inline-start:1.25rem}.oc-block-authsplit-quote p{color:inherit;margin:0 0 .5rem;font-size:1.1rem;font-weight:500;line-height:1.55}.oc-block-authsplit-quote footer{opacity:.75;color:inherit;font-size:.875rem}.oc-block-authsplit-form{justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.oc-block-authsplit-card{inline-size:100%;max-inline-size:26rem}.oc-block-authsplit-title{letter-spacing:-.01em;text-align:center;margin:0 0 .25rem;font-size:1.5rem;font-weight:600}.oc-block-authsplit-subtitle{text-align:center;color:var(--oc-muted-foreground);margin:0 0 1.5rem;font-size:.875rem}.oc-block-authsplit-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authsplit-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-twofactor{gap:1.5rem;max-inline-size:28rem;margin-inline:auto;display:grid}.oc-block-twofactor-step{gap:.75rem;display:grid}.oc-block-twofactor-center{text-align:center;justify-items:center;gap:.75rem;display:grid}.oc-block-twofactor-qr{block-size:11rem;inline-size:11rem;color:var(--oc-muted-foreground);background:var(--oc-surface-strong);border:1px dashed var(--oc-border-strong);border-radius:var(--oc-radius);place-items:center;font-size:.75rem;display:grid}.oc-block-wizard{flex-direction:column;min-block-size:0;display:flex}@media (width>=48rem){.oc-block-wizard{flex-direction:row}}.oc-block-wizard-rail{border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.75rem;overflow-x:auto}@media (width>=48rem){.oc-block-wizard-rail{border-block-end:0;border-inline-end:1px solid var(--oc-border);inline-size:15rem;padding:1rem;overflow-y:auto}}.oc-block-wizard-main{flex-direction:column;flex:1;min-inline-size:0;display:flex}.oc-block-wizard-step{flex-direction:column;flex:1;gap:1rem;padding:1.25rem 1.5rem;display:flex}.oc-block-wizard-step[hidden]{display:none}.oc-block-team{border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);background:var(--oc-card);flex-direction:column;display:flex;overflow:hidden}.oc-block-team-row{align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.oc-block-team-row+.oc-block-team-row{border-block-start:1px solid var(--oc-border)}.oc-block-team-row .oc-user{flex:1}.oc-block-team-meta{align-items:center;gap:.5rem;display:flex}.oc-block-formpage{flex-direction:column;gap:1rem;max-inline-size:56rem;display:flex}.oc-block-formpage-grid{gap:1rem;display:grid}@media (width>=40rem){.oc-block-formpage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.oc-block-formpage-actions{background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 2px);box-shadow:0 -4px 16px oklch(from var(--color-black-60) l c h / .08);justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;display:flex;position:sticky;inset-block-end:0}.oc-block-authpage{min-block-size:30rem;color:var(--oc-foreground);background:var(--oc-muted);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-authpage--plain{background:var(--oc-background);border:1px solid var(--oc-border)}.oc-block-authcard{inline-size:100%;max-inline-size:24rem;color:var(--oc-foreground);background:var(--oc-card);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);box-shadow:0 1px 2px oklch(from var(--color-black-60) l c h / .06);flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.oc-block-authcard--flat{box-shadow:none;background:0 0;border:0;padding:0}.oc-block-authcard--wide{max-inline-size:28rem}.oc-block-authcard-logo{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);place-items:center;margin-inline:auto;display:grid}.oc-block-authcard-logo svg{block-size:1.35rem;inline-size:1.35rem}.oc-block-authcard-head{text-align:center;flex-direction:column;gap:.25rem;display:flex}.oc-block-authcard-title{letter-spacing:-.01em;margin:0;font-size:1.375rem;font-weight:600}.oc-block-authcard-text{color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authcard-fields .oc-field:has(>.oc-otp){text-align:center;align-items:center}.oc-block-authcard-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-authcard-foot{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-foot a{color:var(--oc-foreground);text-underline-offset:3px;font-weight:500;text-decoration:underline}.oc-block-authcard-legal{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-legal a{color:inherit;text-underline-offset:3px;text-decoration:underline}.oc-block-authcard-submit{inline-size:100%}.oc-block-authcard-hint{color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-center{flex-direction:column;align-items:center;gap:.75rem;display:flex}.oc-block-authsocial{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem;display:grid}.oc-block-authsocial .oc-btn{inline-size:100%}.oc-block-authduo{color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);overflow:hidden;container:oc-authduo/inline-size}.oc-block-authduo-grid{min-block-size:34rem;display:grid}.oc-block-authduo-panel{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 70% 55% at 85% 100%, oklch(from var(--oc-brand-2) l c h / .4), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 0%, oklch(from var(--oc-brand-3) l c h / .35), transparent 60%), var(--oc-primary);flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem;display:none;position:relative}.oc-block-authduo-panel--image:before{content:"";background:repeating-linear-gradient(135deg, oklch(from var(--oc-primary-foreground) l c h / .07) 0 1px, transparent 1px 14px), linear-gradient(to top, oklch(from var(--oc-primary) l c h / .7), transparent 60%);pointer-events:none;position:absolute;inset:0}.oc-block-authduo-panel--muted{color:var(--oc-foreground);background:var(--oc-muted)}.oc-block-authduo-panel--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authduo-photo,none) center / cover no-repeat, var(--oc-primary)}@container oc-authduo (width>=42rem){.oc-block-authduo-grid{grid-template-columns:1fr 1fr}.oc-block-authduo-panel{display:flex}.oc-block-authduo--reverse .oc-block-authduo-panel{order:2}}.oc-block-authduo-panel>*{position:relative}.oc-block-authduo-logo{color:inherit;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authduo-logo svg{block-size:1.4rem;inline-size:1.4rem}.oc-block-authduo-quote{max-inline-size:26rem;margin:0}.oc-block-authduo-quote p{color:inherit;margin:0 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.55}.oc-block-authduo-quote footer{opacity:.8;color:inherit;font-size:.8125rem}.oc-block-authduo-form{place-items:center;padding:2rem 1.25rem;display:grid}.oc-block-authmin{min-block-size:26rem;color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-sb{--oc-block-sb-height:26rem;block-size:var(--oc-block-sb-height);color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-sb--floating{background:var(--oc-muted)}.oc-block-sb-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-sb-bar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.5rem;min-block-size:3rem;padding:.5rem .75rem;display:flex}.oc-block-sb-sep{background:var(--oc-border-strong);block-size:1rem;inline-size:1px}.oc-block-sb-body{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4.5rem;gap:.75rem;min-block-size:0;padding:.75rem;display:grid;overflow:auto}.oc-block-sb-ph{background:var(--oc-muted);border-radius:var(--oc-radius)}.oc-block-sb-ph--wide{grid-area:span 3/1/auto/-1}.oc-block-sb-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-sb-hint{color:var(--oc-muted-foreground);margin:0;padding:0 .75rem;font-size:.75rem}.oc-block-sb-group>summary{letter-spacing:.04em;text-transform:uppercase;color:var(--oc-muted-foreground);cursor:pointer;border-radius:var(--oc-radius);justify-content:space-between;align-items:center;padding:.5rem .625rem .25rem;font-size:.7rem;font-weight:600;list-style:none;display:flex}.oc-block-sb-group>summary::-webkit-details-marker{display:none}.oc-block-sb-group>summary:after{content:"";block-size:.4rem;inline-size:.4rem;transition:rotate var(--oc-transition-fast);border-block-end:1.5px solid;border-inline-end:1.5px solid;rotate:-45deg}.oc-block-sb-group[open]>summary:after{rotate:45deg}.oc-block-sb-group>summary:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-sb-rail{background:var(--oc-muted);border-inline-end:1px solid var(--oc-border);flex-direction:column;align-items:center;gap:.5rem;inline-size:3.5rem;padding:.75rem .5rem;display:flex}.oc-block-sb-rail .oc-sidebar-menu-button{justify-content:center;padding:.5rem}.oc-block-sb-switch{inline-size:100%;font:inherit;color:inherit;cursor:pointer;text-align:start;background:0 0;border:0}.oc-block-sb-tile{block-size:2rem;inline-size:2rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);flex:none;place-items:center;display:grid}.oc-block-sb-tile svg{block-size:1rem;inline-size:1rem}.oc-block-sb-sub{color:var(--oc-muted-foreground);font-size:.75rem;font-weight:400;display:block}.oc-block-dash-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;display:grid}.oc-block-dash-table{inline-size:100%}.oc-block-datatable .oc-table-toolbar :is(.oc-input,.oc-select){block-size:2rem;padding-block:0;font-size:.8125rem}.oc-block-datatable .oc-table-toolbar .oc-input{flex:10rem;min-inline-size:9rem}.oc-block-datatable .oc-filter-pills{border-inline-start:0;padding-inline-start:0}.oc-block-datatable .oc-filter-pill{border-radius:calc(var(--oc-radius) - 2px);block-size:2rem;font:inherit;cursor:pointer;align-items:center;padding-inline:.625rem;font-size:.8125rem;display:inline-flex}.oc-block-datatable .oc-filter-pill[aria-current=true]{color:var(--oc-primary-foreground);background:var(--oc-primary);border-color:var(--oc-primary)}.oc-block-datatable .oc-table thead th{block-size:2.75rem;color:var(--oc-foreground);background:var(--oc-card);font-size:.8125rem;font-weight:600}.oc-block-datatable .oc-table :is(th,td){white-space:nowrap;vertical-align:middle}.oc-block-datatable .oc-table tbody tr:nth-child(2n of :not([hidden])){background:color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%)}.oc-block-datatable .oc-table tbody tr:hover{background:color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%)}.oc-block-datatable td.oc-table-actions{text-align:end}.oc-block-datatable .oc-block-datatable-bulk[hidden],.oc-block-datatable .oc-table tbody tr[hidden]{display:none}.oc-block-datatable td.oc-table-actions>*+*{margin-inline-start:.375rem}.oc-block-datatable .oc-table-footer{color:var(--oc-muted-foreground);grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;font-size:.8125rem;display:grid}.oc-block-datatable .oc-table-footer label{color:var(--oc-foreground);align-items:center;gap:.5rem;display:inline-flex}.oc-block-datatable .oc-table-footer .oc-select{block-size:2rem;inline-size:auto;padding-block:0;font-size:.8125rem}.oc-block-datatable .oc-table-footer nav{justify-self:end}.oc-block-datatable .oc-pagination-item :is(a,button){min-block-size:2rem;min-inline-size:2rem;font-size:.8125rem}.oc-block-datatable .oc-pagination-item:is(.is-active,[aria-current]) :is(a,button),.oc-block-datatable .oc-pagination-item [aria-current=page]{color:var(--oc-primary);background:oklch(from var(--oc-primary) l c h / .1);border-color:oklch(from var(--oc-primary) l c h / .35)}@media (width<=40rem){.oc-block-datatable .oc-table-footer{grid-template-columns:1fr}.oc-block-datatable .oc-table-footer nav{justify-self:start}}.oc-block-about{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-about-inner{align-items:center;gap:clamp(2rem,5vw,3.5rem);display:grid}@container (width>=52rem){.oc-block-about-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.oc-block-about--reverse .oc-block-about-media{order:2}}.oc-block-about-media{aspect-ratio:4/3;border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%), linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));margin:0;position:relative;overflow:hidden}.oc-block-about-media>img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.oc-block-about-badge{border:1px solid var(--oc-border);border-radius:var(--oc-radius-md,.75rem);background:color-mix(in oklch, var(--oc-background) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--oc-muted-foreground);padding:.75rem 1rem;font-size:.85rem;display:grid;position:absolute;inset:auto auto 1rem 1rem}.oc-block-about-badge strong{color:var(--oc-foreground);font-size:1.4rem;line-height:1.1}.oc-block-about-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 1rem;font-size:clamp(1.75rem,4vw,2.6rem);font-weight:700;line-height:1.15}.oc-block-about-copy>p:not([class]){color:var(--oc-muted-foreground);margin:0 0 1rem;line-height:1.65}.oc-block-about-copy .oc-timeline{margin-block-start:1.75rem}.oc-block-contact{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto}.oc-block-contact-head{max-inline-size:40rem;margin-block-end:2rem}.oc-block-contact-heading{letter-spacing:-.02em;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-contact-lead{color:var(--oc-muted-foreground);margin:0;font-size:1.05rem;line-height:1.6}.oc-block-contact-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1.25rem;display:grid}.oc-block-contact-card{border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:var(--oc-surface);align-content:start;gap:.35rem;padding:1.5rem;font-style:normal;display:grid}.oc-block-contact-card>.oc-product-mark{margin-block-end:.75rem}.oc-block-contact-title{margin:0 0 .25rem;font-size:1.05rem;font-weight:700}.oc-block-contact-line{color:var(--oc-muted-foreground);overflow-wrap:anywhere;margin:0;font-size:.95rem;line-height:1.55;text-decoration:none}a.oc-block-contact-line{color:var(--oc-foreground);font-weight:500}a.oc-block-contact-line:hover{color:var(--oc-brand-1)}.oc-block-contact--plain .oc-block-contact-card{border:0;border-block-start:2px solid var(--oc-border-strong);background:0 0;border-radius:0;padding:1.25rem 0 0}.oc-block-faq{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-faq-inner{gap:2rem;max-inline-size:48rem;margin-inline:auto;display:grid}.oc-block-faq-head{text-align:center}.oc-block-faq-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-faq-lead{color:var(--oc-block-text-soft,var(--oc-muted-foreground));margin:0;font-size:1.05rem;line-height:1.6}.oc-block-faq-list{--oc-accordion-width:100%;background:var(--oc-block-surface,var(--oc-card))}.oc-block-faq-more{color:var(--oc-block-text-soft,var(--oc-muted-foreground));text-align:center;margin:0}@container (width>=48rem){.oc-block-faq--split .oc-block-faq-inner{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;max-inline-size:none}.oc-block-faq--split .oc-block-faq-head{text-align:start;position:sticky;inset-block-start:1rem}.oc-block-faq--split .oc-block-faq-more{text-align:start;grid-column:2}}.oc-block-orbit-visual{aspect-ratio:1;place-items:center;inline-size:100%;max-inline-size:32rem;margin-inline:auto;display:grid;position:relative;container-type:inline-size}.oc-block-orbit-ring{border:1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite;border-radius:50%;position:absolute;inset:6%}.oc-block-orbit-ring:before{content:"";border:1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);border-radius:50%;position:absolute;inset:18%}.oc-block-orbit-mark{translate:-50% -50%;transform:rotate(var(--oc-orbit-angle,0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle,0deg) * -1));position:absolute;inset-block-start:50%;inset-inline-start:50%}.oc-block-orbit-mark>*{animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite reverse;display:grid}.oc-block-orbit-center{z-index:1;inline-size:min(100%,72cqi);position:relative}.oc-block-orbit-center.oc-code-window .oc-code-window__body{font-size:clamp(.7rem,2.6cqi,.9rem)}@keyframes oc-orbit-spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.oc-block-orbit-ring,.oc-block-orbit-mark>*{animation:none}}.oc-block-portfolio-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-block-end:2rem;display:flex}.oc-block-portfolio-head .oc-display{margin-block-end:0}.oc-block-portfolio-lead{color:var(--oc-muted-foreground);max-inline-size:36rem;margin:.75rem 0 0}.oc-block-portfolio-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min,18rem)), 1fr));gap:1.5rem;display:grid}.oc-block-portfolio--two{--oc-portfolio-min:26rem}.oc-block-profile{max-inline-size:var(--oc-block-max-width,1200px);margin-inline:auto;container-type:inline-size}.oc-block-profile-banner{aspect-ratio:6;border-radius:var(--oc-block-radius,16px);background:var(--oc-profile-banner,radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)), linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));background-position:50%;background-size:cover;min-block-size:7rem}.oc-block-profile-bar{flex-wrap:wrap;align-items:flex-end;gap:1rem 1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex}.oc-block-profile-avatar.oc-avatar{border:4px solid var(--oc-background);width:6.5rem;height:6.5rem;margin-block-start:-3.25rem;font-size:2rem}.oc-block-profile-info{flex:16rem;min-inline-size:0;padding-block-start:.75rem}.oc-block-profile-name{letter-spacing:-.02em;margin:0;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}.oc-block-profile-meta{color:var(--oc-muted-foreground);margin:.2rem 0 0;font-size:.9rem}.oc-block-profile-bio{color:var(--oc-muted-foreground);max-inline-size:44rem;margin:.5rem 0 0;font-size:.95rem}.oc-block-profile-actions{flex-wrap:wrap;gap:.5rem;display:flex}.oc-block-profile-tabs{border-block-end:1px solid var(--oc-border);scrollbar-width:none;gap:.25rem;margin-block-start:1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex;overflow-x:auto}.oc-block-profile-tab{color:var(--oc-muted-foreground);white-space:nowrap;transition:color var(--oc-transition-fast,.15s), border-color var(--oc-transition-fast,.15s);border-block-end:2px solid #0000;padding:.75rem 1rem;font-size:.92rem;font-weight:500;text-decoration:none}.oc-block-profile-tab:hover{color:var(--oc-foreground)}.oc-block-profile-tab[aria-current=page]{border-block-end-color:var(--oc-brand-1);color:var(--oc-foreground)}.oc-block-profile-tab:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}label.oc-block-profile-tab{cursor:pointer;position:relative}.oc-block-profile-tab>input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.oc-block-profile-tab:has(input:checked){border-block-end-color:var(--oc-brand-1);color:var(--oc-foreground)}.oc-block-profile-tab:has(input:focus-visible){outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-profile-panel{padding:1.25rem clamp(1rem,3vw,1.5rem);display:none}:is(.oc-block-profile:has(.oc-block-profile-tab:first-of-type input:checked) .oc-block-profile-panel:first-of-type,.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(2) input:checked) .oc-block-profile-panel:nth-of-type(2),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(3) input:checked) .oc-block-profile-panel:nth-of-type(3),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(4) input:checked) .oc-block-profile-panel:nth-of-type(4),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(5) input:checked) .oc-block-profile-panel:nth-of-type(5),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(6) input:checked) .oc-block-profile-panel:nth-of-type(6)){display:block}.oc-block-profile-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}.oc-block-profile-grid>li{gap:.4rem;font-size:.875rem;display:grid}.oc-block-profile-grid small{color:var(--oc-muted-foreground)}.oc-block-profile-thumb{aspect-ratio:16/9;border-radius:var(--oc-radius);background:linear-gradient(135deg, var(--oc-accent-from,var(--oc-primary)), var(--oc-accent-to,var(--oc-primary)));opacity:.85}.oc-block-profile--compact .oc-block-profile-banner{aspect-ratio:10;min-block-size:4.5rem}.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar{width:4.5rem;height:4.5rem;margin-block-start:-2.25rem;font-size:1.4rem}@container (width<=34rem){.oc-block-profile-actions{flex-basis:100%}}

package/dist/parts/app-data-table-look.css

@@ -0,0 +1,41 @@
+/* File: packages/blocks/src/parts/app-data-table-look.css | Map: toolbar controls (2rem, pills) -> header row -> striped rows -> row actions -> footer and pager */
+/* The data table block (server-rendered, also the Livewire DataTable) in the look of the data table component
+   (.oc-data-table in packages/ui): the same control height, header, stripes, sort icons and footer. */
+
+.oc-block-datatable .oc-table-toolbar :is(.oc-input, .oc-select) { block-size: 2rem; padding-block: 0; font-size: 0.8125rem; }
+.oc-block-datatable .oc-table-toolbar .oc-input { flex: 1 1 10rem; min-inline-size: 9rem; }
+.oc-block-datatable .oc-filter-pills { border-inline-start: 0; padding-inline-start: 0; }
+.oc-block-datatable .oc-filter-pill { display: inline-flex; align-items: center; block-size: 2rem; padding-inline: 0.625rem; border-radius: calc(var(--oc-radius) - 2px); }
+.oc-block-datatable .oc-filter-pill { font: inherit; font-size: 0.8125rem; cursor: pointer; }
+.oc-block-datatable .oc-filter-pill[aria-current="true"] { color: var(--oc-primary-foreground); background: var(--oc-primary); border-color: var(--oc-primary); }
+
+.oc-block-datatable .oc-table thead th {
+  block-size: 2.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+}
+.oc-block-datatable .oc-table :is(th, td) { white-space: nowrap; vertical-align: middle; }
+.oc-block-datatable .oc-table tbody tr:nth-child(even of :not([hidden])) { background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%); }
+.oc-block-datatable .oc-table tbody tr:hover { background: color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%); }
+.oc-block-datatable td.oc-table-actions { text-align: end; }
+.oc-block-datatable .oc-block-datatable-bulk[hidden] { display: none; }
+.oc-block-datatable .oc-table tbody tr[hidden] { display: none; }
+.oc-block-datatable td.oc-table-actions > * + * { margin-inline-start: 0.375rem; }
+
+.oc-block-datatable .oc-table-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-block-datatable .oc-table-footer label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--oc-foreground); }
+.oc-block-datatable .oc-table-footer .oc-select { block-size: 2rem; padding-block: 0; inline-size: auto; font-size: 0.8125rem; }
+.oc-block-datatable .oc-table-footer nav { justify-self: end; }
+.oc-block-datatable .oc-pagination-item :is(a, button) { min-inline-size: 2rem; min-block-size: 2rem; font-size: 0.8125rem; }
+.oc-block-datatable .oc-pagination-item:is(.is-active, [aria-current]) :is(a, button),
+.oc-block-datatable .oc-pagination-item [aria-current="page"] {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-color: oklch(from var(--oc-primary) l c h / 0.35);
+}
+@media (max-width: 40rem) {
+  .oc-block-datatable .oc-table-footer { grid-template-columns: 1fr; }
+  .oc-block-datatable .oc-table-footer nav { justify-self: start; }
+}

package/dist/parts/site-profile-header.css

@@ -66,6 +66,23 @@
 .oc-block-profile-tab:hover { color: var(--oc-foreground); }
 .oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
 .oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+/* Tabs on the page itself (no route per tab): label.oc-block-profile-tab with a radio, the matching
+   .oc-block-profile-panel (same order) shows. CSS only. */
+label.oc-block-profile-tab { position: relative; cursor: pointer; }
+.oc-block-profile-tab > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-block-profile-tab:has(input:checked) { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
+.oc-block-profile-tab:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-block-profile-panel { display: none; padding: 1.25rem clamp(1rem, 3vw, 1.5rem); }
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(1) input:checked) .oc-block-profile-panel:nth-of-type(1),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(2) input:checked) .oc-block-profile-panel:nth-of-type(2),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(3) input:checked) .oc-block-profile-panel:nth-of-type(3),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(4) input:checked) .oc-block-profile-panel:nth-of-type(4),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(5) input:checked) .oc-block-profile-panel:nth-of-type(5),
+.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(6) input:checked) .oc-block-profile-panel:nth-of-type(6) { display: block; }
+.oc-block-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
+.oc-block-profile-grid > li { display: grid; gap: 0.4rem; font-size: 0.875rem; }
+.oc-block-profile-grid small { color: var(--oc-muted-foreground); }
+.oc-block-profile-thumb { aspect-ratio: 16 / 9; border-radius: var(--oc-radius); background: linear-gradient(135deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary))); opacity: 0.85; }
 
 /* Compact: low banner and a smaller avatar. */
 .oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-blocks",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "description": "OmniaUI blocks: ready-made page sections (hero, features, pricing, stats, CTA, auth, sidebars, dashboards) composed from OmniaCSS utilities and OmniaUI components.",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@birdycom/omniaui": "^0.12.5"
+    "@birdycom/omniaui": "^0.12.6"
   },
   "unpkg": "./dist/blocks.min.css",
   "jsdelivr": "./dist/blocks.min.css",

package/pro.json

@@ -155,6 +155,54 @@
     {
       "name": "ecosystem-map",
       "description": "Ecosystem map: your logo on top, your apps per level, dotted flowing lines to what each app builds on"
+    },
+    {
+      "name": "relations-list",
+      "description": "A complete relations screen: breadcrumb, title, type tabs with colored counts, list toolbar, filters, a data table with avatar names, type badges, counts and row actions per status, cards and footer"
+    },
+    {
+      "name": "quote-lines",
+      "description": "Quote or order lines you put in order by dragging: page head, a bordered data table with grips, column widths and the column menu, and the totals"
+    },
+    {
+      "name": "product-list",
+      "description": "Products list with photos, type tabs with counts, category and stock filters, stock badges, prices excl. and incl. VAT, draft badges, row actions, cards and footer"
+    },
+    {
+      "name": "product-detail",
+      "description": "Product page for the back office: gallery, summary with price, stock and barcode, commercial and technical sections, stock movements, serial numbers and linked invoices and documents"
+    },
+    {
+      "name": "product-editor",
+      "description": "Product form in sections (identification, commercial, stock, media, description, specifications, publication) with a preview and a sticky save bar"
+    },
+    {
+      "name": "product-picker",
+      "description": "Products of a quote, order or invoice: Add product opens a dialog (search, photo, article number, price, stock, quantity); the picks show under the button with quantity, amount and remove"
+    },
+    {
+      "name": "shop-catalog",
+      "description": "Shop catalog: filters for category, price, availability and rating, sorting, a live count and product cards with photo, rating, price and stock"
+    },
+    {
+      "name": "shop-product",
+      "description": "Webshop product page: gallery, rating, price, color and size choice, stock, quantity, add to cart, delivery promises and tabs for description, specifications and reviews"
+    },
+    {
+      "name": "shop-cart",
+      "description": "Cart page: lines with photo, variant, quantity, remove and line total, and a summary with delivery, included VAT, discount code and checkout"
+    },
+    {
+      "name": "shop-checkout",
+      "description": "One-page checkout: steps, contact, delivery address, delivery and payment as choice cards, order summary with totals and terms"
+    },
+    {
+      "name": "barcode-maker",
+      "description": "Make a barcode: type a value, pick EAN-13, EAN-8, UPC-A or Code 128, see it live and download a print-ready SVG"
+    },
+    {
+      "name": "glass-nav",
+      "description": "Liquid glass navigation: a clear glass sheet with an action pill and a menu bar; the backdrop bends and shifts colour through the glass"
     }
   ]
 }