@birdycom/omniaui-blocks 0.12.4 → 0.12.6

package/blocks/app-header.html

@@ -7,7 +7,7 @@
      Slots: toggle, module nav, actions (theme switch, workspace select, user dropdown)
 -->
 <header class="oc-block-appbar">
-  <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-appbar-toggle" title="Toggle sidebar"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
+  <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-appbar-toggle" title="Toggle sidebar"><svg data-icon="mdi:menu" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
   <nav class="oc-block-appbar-nav" aria-label="Module navigation">
     <ul class="oc-navmenu">
       <li><a class="oc-navmenu-link" href="#" aria-current="page">Contacts</a></li>
@@ -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

@@ -14,45 +14,45 @@
   <aside class="oc-sidebar " aria-label="Main navigation">
     <div class="oc-sidebar-header">
       <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
-        <svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>
-        <span class="oc-sidebar-menu-label"><strong>OmniaDesk</strong></span>
+        <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>Company 1</strong></span>
       </a>
     </div>
     <div class="oc-sidebar-content">
       <div class="oc-sidebar-group">
         <div class="oc-sidebar-group-label">Platform</div>
         <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="oc-sidebar-menu-label">Dashboard</span></a></li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg><span class="oc-sidebar-menu-label">Contacts</span><span class="oc-sidebar-menu-badge">12</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><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">Dashboard</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:account-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m0 7c2.67 0 8 1.33 8 4v3H4v-3c0-2.67 5.33-4 8-4m0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V17c0-.64-3.13-2.1-6.1-2.1"/></svg><span class="oc-sidebar-menu-label">Contacts</span><span class="oc-sidebar-menu-badge">12</span></a></li>
           <li>
             <details class="oc-sidebar-collapsible" open>
-              <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Invoices</span></summary>
+              <summary class="oc-sidebar-menu-button"><svg data-icon="mdi:file-document-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2h7v5h5v11H6zm2 8v2h8v-2zm0 4v2h5v-2z"/></svg><span class="oc-sidebar-menu-label">Invoices</span></summary>
               <ul class="oc-sidebar-menu-sub">
                 <li><a class="oc-sidebar-menu-button" href="#">Sales</a></li>
                 <li><a class="oc-sidebar-menu-button" href="#">Purchases</a></li>
               </ul>
             </details>
           </li>
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Reports</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:chart-bar" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22 21H2V3h2v16h2v-9h4v9h2V6h4v13h2v-5h4z"/></svg><span class="oc-sidebar-menu-label">Reports</span></a></li>
         </ul>
       </div>
       <div class="oc-sidebar-separator"></div>
       <div class="oc-sidebar-group">
         <ul class="oc-sidebar-menu">
-          <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Settings</span></a></li>
+          <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:cog-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m-2 12c-.25 0-.46-.18-.5-.42l-.37-2.65c-.63-.25-1.17-.59-1.69-.99l-2.49 1.01c-.22.08-.49 0-.61-.22l-2-3.46a.493.493 0 0 1 .12-.64l2.11-1.66L4.5 12l.07-1l-2.11-1.63a.493.493 0 0 1-.12-.64l2-3.46c.12-.22.39-.31.61-.22l2.49 1c.52-.39 1.06-.73 1.69-.98l.37-2.65c.04-.24.25-.42.5-.42h4c.25 0 .46.18.5.42l.37 2.65c.63.25 1.17.59 1.69.98l2.49-1c.22-.09.49 0 .61.22l2 3.46c.13.22.07.49-.12.64L19.43 11l.07 1l-.07 1l2.11 1.63c.19.15.25.42.12.64l-2 3.46c-.12.22-.39.31-.61.22l-2.49-1c-.52.39-1.06.73-1.69.98l-.37 2.65c-.04.24-.25.42-.5.42zm1.25-18l-.37 2.61c-1.2.25-2.26.89-3.03 1.78L5.44 7.35l-.75 1.3L6.8 10.2a5.55 5.55 0 0 0 0 3.6l-2.12 1.56l.75 1.3l2.43-1.04c.77.88 1.82 1.52 3.01 1.76l.37 2.62h1.52l.37-2.61c1.19-.25 2.24-.89 3.01-1.77l2.43 1.04l.75-1.3l-2.12-1.55c.4-1.17.4-2.44 0-3.61l2.11-1.55l-.75-1.3l-2.41 1.04a5.42 5.42 0 0 0-3.03-1.77L12.75 4z"/></svg><span class="oc-sidebar-menu-label">Settings</span></a></li>
         </ul>
       </div>
     </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>
   <div class="oc-block-shell-main">
     <header class="oc-block-appbar">
-      <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-shell-toggle" title="Toggle sidebar"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
+      <label class="oc-btn oc-btn--ghost oc-btn--icon" for="oc-shell-toggle" title="Toggle sidebar"><svg data-icon="mdi:menu" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg><span class="oc-visually-hidden">Toggle sidebar</span></label>
       <nav class="oc-block-appbar-nav" aria-label="Module navigation">
         <ul class="oc-navmenu">
           <li><a class="oc-navmenu-link" href="#" aria-current="page">Contacts</a></li>
@@ -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 class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg> 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/forgot-password.html

@@ -17,7 +17,7 @@
 -->
 <div class="oc-block-authpage oc-block-authpage--plain">
   <form class="oc-block-authcard" action="#" method="post">
-    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span>
+    <span class="oc-block-authcard-logo"><svg data-icon="mdi:email-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/></svg></span>
     <div class="oc-block-authcard-head">
       <h1 class="oc-block-authcard-title">Forgot your password?</h1>
       <p class="oc-block-authcard-text">Enter your e-mail and we will send you a reset link</p>

package/blocks/form-page.html

@@ -7,7 +7,7 @@
 -->
 <form class="oc-block-formpage" action="#" method="post">
   <details class="oc-collapsible" open>
-    <summary><svg class="oc-collapsible-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg><span class="oc-collapsible-title">General information</span></summary>
+    <summary><svg data-icon="mdi:information-outline" class="oc-collapsible-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z"/></svg><span class="oc-collapsible-title">General information</span></summary>
     <div class="oc-collapsible-content">
       <div class="oc-block-formpage-grid">
         <div class="oc-field"><label class="oc-field-label" for="oc-form-name">Name</label><input class="oc-input" id="oc-form-name" name="name"></div>
@@ -18,7 +18,7 @@
     </div>
   </details>
   <details class="oc-collapsible">
-    <summary><svg class="oc-collapsible-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"/></svg><span class="oc-collapsible-title">Notes</span></summary>
+    <summary><svg data-icon="mdi:format-list-bulleted" class="oc-collapsible-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5h14v2H7zm0 8v-2h14v2zM4 4.5A1.5 1.5 0 0 1 5.5 6A1.5 1.5 0 0 1 4 7.5A1.5 1.5 0 0 1 2.5 6A1.5 1.5 0 0 1 4 4.5m0 6A1.5 1.5 0 0 1 5.5 12A1.5 1.5 0 0 1 4 13.5A1.5 1.5 0 0 1 2.5 12A1.5 1.5 0 0 1 4 10.5M7 19v-2h14v2zm-3-2.5A1.5 1.5 0 0 1 5.5 18A1.5 1.5 0 0 1 4 19.5A1.5 1.5 0 0 1 2.5 18A1.5 1.5 0 0 1 4 16.5"/></svg><span class="oc-collapsible-title">Notes</span></summary>
     <div class="oc-collapsible-content"><textarea class="oc-input" name="notes" rows="3" aria-label="Notes"></textarea></div>
   </details>
   <div class="oc-block-formpage-actions">

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-01.html

@@ -17,7 +17,7 @@
 -->
 <div class="oc-block-authpage oc-block-authpage--plain">
   <form class="oc-block-authcard" action="#" method="post">
-    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+    <span class="oc-block-authcard-logo"><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></span>
     <div class="oc-block-authcard-head">
       <h1 class="oc-block-authcard-title">Login to your account</h1>
       <p class="oc-block-authcard-text">Enter your e-mail below to login</p>

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 class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg> OmniaDesk</a>
+      <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/login-03.html

@@ -17,7 +17,7 @@
 -->
 <div class="oc-block-authpage">
   <form class="oc-block-authcard" action="#" method="post">
-    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+    <span class="oc-block-authcard-logo"><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></span>
     <div class="oc-block-authcard-head">
       <h1 class="oc-block-authcard-title">Welcome back</h1>
       <p class="oc-block-authcard-text">Login with your Apple or Google account</p>

package/blocks/module-header.html

@@ -10,7 +10,7 @@
 -->
 <header class="oc-block-modulehead">
   <div class="oc-block-modulehead-band">
-    <span class="oc-block-modulehead-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg></span>
+    <span class="oc-block-modulehead-icon" aria-hidden="true"><svg data-icon="mdi:account-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m0 7c2.67 0 8 1.33 8 4v3H4v-3c0-2.67 5.33-4 8-4m0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V17c0-.64-3.13-2.1-6.1-2.1"/></svg></span>
     <div class="oc-block-modulehead-body">
       <h1 class="oc-block-modulehead-title">Contacts</h1>
       <p class="oc-block-modulehead-intro">Manage customers, suppliers and the people who work there.</p>

package/blocks/otp-01.html

@@ -18,7 +18,7 @@
 -->
 <div class="oc-block-authpage oc-block-authpage--plain">
   <form class="oc-block-authcard" action="#" method="post">
-    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></span>
+    <span class="oc-block-authcard-logo"><svg data-icon="mdi:shield-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 11c0 5.55-3.84 10.74-9 12c-5.16-1.26-9-6.45-9-12V5l9-4l9 4zm-9 10c3.75-1 7-5.46 7-9.78V6.3l-7-3.12L5 6.3v4.92C5 15.54 8.25 20 12 21"/></svg></span>
     <div class="oc-block-authcard-head">
       <h1 class="oc-block-authcard-title">Enter verification code</h1>
       <p class="oc-block-authcard-text">We sent a 6-digit code to your e-mail</p>

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 class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg> OmniaDesk</a>
+      <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>