@birdycom/omniaui-blocks 0.12.4 → 0.12.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/blocks/app-header.html +3 -3
  2. package/blocks/app-shell.html +13 -13
  3. package/blocks/auth-split.html +2 -2
  4. package/blocks/contact-grid.html +1 -1
  5. package/blocks/data-table.html +118 -73
  6. package/blocks/forgot-password.html +1 -1
  7. package/blocks/form-page.html +2 -2
  8. package/blocks/hero-code.html +3 -3
  9. package/blocks/login-01.html +1 -1
  10. package/blocks/login-02.html +1 -1
  11. package/blocks/login-03.html +1 -1
  12. package/blocks/module-header.html +1 -1
  13. package/blocks/otp-01.html +1 -1
  14. package/blocks/otp-02.html +1 -1
  15. package/blocks/product-grid.html +6 -6
  16. package/blocks/profile-header.html +27 -11
  17. package/blocks/reset-password.html +1 -1
  18. package/blocks/sidebar-01.html +11 -11
  19. package/blocks/sidebar-02.html +9 -9
  20. package/blocks/sidebar-03.html +5 -5
  21. package/blocks/sidebar-04.html +11 -11
  22. package/blocks/sidebar-05.html +6 -6
  23. package/blocks/signup-01.html +2 -2
  24. package/blocks/signup-02.html +2 -2
  25. package/blocks/site-footer.html +6 -6
  26. package/blocks/site-header.html +1 -1
  27. package/blocks/spotlight.html +2 -2
  28. package/blocks/team-list.html +3 -3
  29. package/dist/blocks.css +64 -1
  30. package/dist/blocks.min.css +1 -1
  31. package/dist/parts/app-data-table-look.css +41 -0
  32. package/dist/parts/site-profile-header.css +17 -0
  33. package/package.json +2 -2
  34. package/pro.json +48 -0
package/blocks/profile-header.html CHANGED
@@ -1,16 +1,18 @@
1
1
  <!-- OmniaUI block: profile-header - Channel / profile header: banner, overhanging avatar, name, meta, actions and a tab bar. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
2
- File: packages/blocks/blocks/profile-header.html | Map: section.oc-block-profile -> banner -> bar (avatar, info, actions) -> nav tabs
2
+ File: packages/blocks/blocks/profile-header.html | Map: section.oc-block-profile -> banner -> bar (avatar, info, actions) -> tabs (radios) -> panels
3
3
  Class API: .oc-block-profile (modifier --compact: low banner, smaller avatar), -banner (style="--oc-profile-banner: url(…)",
4
4
  default gradient from the .oc-accent--* preset), -bar, -avatar (on an .oc-avatar), -info, -name, -meta, -bio, -actions,
5
- -tabs (nav), -tab (link; aria-current="page" marks the active tab).
5
+ -tabs, -tab: links (aria-current="page" marks the active one) or, for tabs on the page itself, labels with a
6
+ radio; then -panels holds one -panel per tab (same order) and the checked tab shows its panel (CSS only).
7
+ -grid / -thumb: the cards in the demo panels.
6
8
  -->
7
9
  <section class="oc-block-profile oc-accent--violet" aria-labelledby="oc-profile-name">
8
10
  <div class="oc-block-profile-banner" aria-hidden="true"></div>
9
11
  <div class="oc-block-profile-bar">
10
- <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true">AS</span>
12
+ <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true">C1</span>
11
13
  <div class="oc-block-profile-info">
12
- <h1 class="oc-block-profile-name" id="oc-profile-name">Acme Studio</h1>
13
- <p class="oc-block-profile-meta">@acmestudio &middot; 12.4K followers &middot; 86 videos</p>
14
+ <h1 class="oc-block-profile-name" id="oc-profile-name">Company 1</h1>
15
+ <p class="oc-block-profile-meta">@company1 &middot; 12.4K followers &middot; 86 videos</p>
14
16
  <p class="oc-block-profile-bio">Short tutorials about web design, CSS and building small business apps.</p>
15
17
  </div>
16
18
  <div class="oc-block-profile-actions">
@@ -18,10 +20,24 @@
18
20
  <button class="oc-btn oc-btn--outline" type="button">Share</button>
19
21
  </div>
20
22
  </div>
21
- <nav class="oc-block-profile-tabs" aria-label="Profile sections">
22
- <a class="oc-block-profile-tab" href="#home" aria-current="page">Home</a>
23
- <a class="oc-block-profile-tab" href="#videos">Videos</a>
24
- <a class="oc-block-profile-tab" href="#playlists">Playlists</a>
25
- <a class="oc-block-profile-tab" href="#about">About</a>
26
- </nav>
23
+ <div class="oc-block-profile-tabs" role="radiogroup" aria-label="Profile sections">
24
+ <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab" checked>Home</label>
25
+ <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab">Videos</label>
26
+ <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab">Playlists</label>
27
+ <label class="oc-block-profile-tab"><input type="radio" name="oc-profile-tab">About</label>
28
+ </div>
29
+ <div class="oc-block-profile-panels">
30
+ <div class="oc-block-profile-panel">
31
+ <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>
32
+ </div>
33
+ <div class="oc-block-profile-panel">
34
+ <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>
35
+ </div>
36
+ <div class="oc-block-profile-panel">
37
+ <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>
38
+ </div>
39
+ <div class="oc-block-profile-panel">
40
+ <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>
41
+ </div>
42
+ </div>
27
43
  </section>
package/blocks/reset-password.html CHANGED
@@ -17,7 +17,7 @@
17
17
  -->
18
18
  <div class="oc-block-authpage oc-block-authpage--plain">
19
19
  <form class="oc-block-authcard" action="#" method="post">
20
- <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span>
20
+ <span class="oc-block-authcard-logo"><svg data-icon="mdi:lock-outline" class="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2m6 3V10H6v10zm0-12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 0 1 5-5a5 5 0 0 1 5 5v2zm-6-5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3"/></svg></span>
21
21
  <div class="oc-block-authcard-head">
22
22
  <h1 class="oc-block-authcard-title">Set a new password</h1>
23
23
  <p class="oc-block-authcard-text">Your new password must differ from earlier ones</p>
package/blocks/sidebar-01.html CHANGED
@@ -13,7 +13,7 @@
13
13
  <aside class="oc-sidebar" aria-label="Main navigation">
14
14
  <div class="oc-sidebar-header">
15
15
  <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
16
- <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
16
+ <span class="oc-block-sb-tile"><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>
17
17
  <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
18
18
  </a>
19
19
  </div>
@@ -21,32 +21,32 @@
21
21
  <div class="oc-sidebar-group">
22
22
  <div class="oc-sidebar-group-label">Getting started</div>
23
23
  <ul class="oc-sidebar-menu">
24
- <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="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
25
- <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="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
26
- <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">Configuration</span></a></li>
24
+ <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg data-icon="mdi:book-open-variant-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21.5c-1.35-.85-3.8-1.5-5.5-1.5c-1.65 0-3.35.3-4.75 1.05c-.1.05-.15.05-.25.05c-.25 0-.5-.25-.5-.5V6c.6-.45 1.25-.75 2-1c1.11-.35 2.33-.5 3.5-.5c1.95 0 4.05.4 5.5 1.5c1.45-1.1 3.55-1.5 5.5-1.5c1.17 0 2.39.15 3.5.5c.75.25 1.4.55 2 1v14.6c0 .25-.25.5-.5.5c-.1 0-.15 0-.25-.05c-1.4-.75-3.1-1.05-4.75-1.05c-1.7 0-4.15.65-5.5 1.5m-1-14c-1.36-.6-3.16-1-4.5-1c-1.2 0-2.4.15-3.5.5v11.5c1.1-.35 2.3-.5 3.5-.5c1.34 0 3.14.4 4.5 1zM13 19c1.36-.6 3.16-1 4.5-1c1.2 0 2.4.15 3.5.5V7c-1.1-.35-2.3-.5-3.5-.5c-1.34 0-3.14.4-4.5 1zm1-2.65c.96-.35 2.12-.52 3.5-.52c1.04 0 1.88.08 2.5.24v-1.5a13.9 13.9 0 0 0-6 .19zm0-2.66c.96-.35 2.12-.53 3.5-.53c1.04 0 1.88.08 2.5.24v-1.5c-.87-.16-1.71-.23-2.5-.23c-1.28 0-2.45.15-3.5.45zM14 11c.96-.33 2.12-.5 3.5-.5c.91 0 1.76.09 2.5.28V9.23c-.87-.15-1.71-.23-2.5-.23c-1.32 0-2.5.15-3.5.46z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
25
+ <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:code-tags" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
26
+ <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">Configuration</span></a></li>
27
27
  </ul>
28
28
  </div>
29
29
  <div class="oc-sidebar-group">
30
30
  <div class="oc-sidebar-group-label">Building</div>
31
31
  <ul class="oc-sidebar-menu">
32
- <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="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
33
- <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="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
34
- <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">Charts</span></a></li>
32
+ <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:layers-outline" class="oc-sidebar-menu-icon" 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 class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
33
+ <li><a class="oc-sidebar-menu-button" href="#"><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">Blocks</span></a></li>
34
+ <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">Charts</span></a></li>
35
35
  </ul>
36
36
  </div>
37
37
  </div>
38
38
  <div class="oc-sidebar-footer">
39
39
  <div class="oc-user">
40
- <span class="oc-avatar oc-avatar--sm">SC</span>
41
- <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
40
+ <span class="oc-avatar oc-avatar--sm">U1</span>
41
+ <span class="oc-user-text"><span class="oc-user-name">User 1</span><span class="oc-user-email">user1@company1.example</span></span>
42
42
  </div>
43
43
  </div>
44
44
  </aside>
45
45
  <div class="oc-block-sb-main">
46
46
  <header class="oc-block-sb-bar">
47
- <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
47
+ <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>
48
48
  <span class="oc-block-sb-sep"></span>
49
- <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>
49
+ <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>
50
50
  </header>
51
51
  <div class="oc-block-sb-body">
52
52
  <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 CHANGED
@@ -13,7 +13,7 @@
13
13
  <aside class="oc-sidebar" aria-label="Main navigation">
14
14
  <div class="oc-sidebar-header">
15
15
  <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
16
- <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
16
+ <span class="oc-block-sb-tile"><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>
17
17
  <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
18
18
  </a>
19
19
  </div>
@@ -21,31 +21,31 @@
21
21
  <details class="oc-block-sb-group" open>
22
22
  <summary>Getting started</summary>
23
23
  <ul class="oc-sidebar-menu">
24
- <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="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
25
- <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="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
24
+ <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg data-icon="mdi:book-open-variant-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21.5c-1.35-.85-3.8-1.5-5.5-1.5c-1.65 0-3.35.3-4.75 1.05c-.1.05-.15.05-.25.05c-.25 0-.5-.25-.5-.5V6c.6-.45 1.25-.75 2-1c1.11-.35 2.33-.5 3.5-.5c1.95 0 4.05.4 5.5 1.5c1.45-1.1 3.55-1.5 5.5-1.5c1.17 0 2.39.15 3.5.5c.75.25 1.4.55 2 1v14.6c0 .25-.25.5-.5.5c-.1 0-.15 0-.25-.05c-1.4-.75-3.1-1.05-4.75-1.05c-1.7 0-4.15.65-5.5 1.5m-1-14c-1.36-.6-3.16-1-4.5-1c-1.2 0-2.4.15-3.5.5v11.5c1.1-.35 2.3-.5 3.5-.5c1.34 0 3.14.4 4.5 1zM13 19c1.36-.6 3.16-1 4.5-1c1.2 0 2.4.15 3.5.5V7c-1.1-.35-2.3-.5-3.5-.5c-1.34 0-3.14.4-4.5 1zm1-2.65c.96-.35 2.12-.52 3.5-.52c1.04 0 1.88.08 2.5.24v-1.5a13.9 13.9 0 0 0-6 .19zm0-2.66c.96-.35 2.12-.53 3.5-.53c1.04 0 1.88.08 2.5.24v-1.5c-.87-.16-1.71-.23-2.5-.23c-1.28 0-2.45.15-3.5.45zM14 11c.96-.33 2.12-.5 3.5-.5c.91 0 1.76.09 2.5.28V9.23c-.87-.15-1.71-.23-2.5-.23c-1.32 0-2.5.15-3.5.46z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
25
+ <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:code-tags" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
26
26
  </ul>
27
27
  </details>
28
28
  <details class="oc-block-sb-group" open>
29
29
  <summary>Building</summary>
30
30
  <ul class="oc-sidebar-menu">
31
- <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="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span></a></li>
32
- <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="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
31
+ <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:layers-outline" class="oc-sidebar-menu-icon" 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 class="oc-sidebar-menu-label">Components</span></a></li>
32
+ <li><a class="oc-sidebar-menu-button" href="#"><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">Blocks</span></a></li>
33
33
  </ul>
34
34
  </details>
35
35
  <details class="oc-block-sb-group">
36
36
  <summary>Reference</summary>
37
37
  <ul class="oc-sidebar-menu">
38
- <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">Configuration</span></a></li>
39
- <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">Charts</span></a></li>
38
+ <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">Configuration</span></a></li>
39
+ <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">Charts</span></a></li>
40
40
  </ul>
41
41
  </details>
42
42
  </div>
43
43
  </aside>
44
44
  <div class="oc-block-sb-main">
45
45
  <header class="oc-block-sb-bar">
46
- <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
46
+ <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>
47
47
  <span class="oc-block-sb-sep"></span>
48
- <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>
48
+ <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>
49
49
  </header>
50
50
  <div class="oc-block-sb-body">
51
51
  <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 CHANGED
@@ -13,7 +13,7 @@
13
13
  <aside class="oc-sidebar" aria-label="Main navigation">
14
14
  <div class="oc-sidebar-header">
15
15
  <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
16
- <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
16
+ <span class="oc-block-sb-tile"><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>
17
17
  <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
18
18
  </a>
19
19
  </div>
@@ -21,14 +21,14 @@
21
21
  <div class="oc-sidebar-group">
22
22
  <div class="oc-sidebar-group-label">Getting started</div>
23
23
  <ul class="oc-sidebar-menu">
24
- <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="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a>
24
+ <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg data-icon="mdi:book-open-variant-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21.5c-1.35-.85-3.8-1.5-5.5-1.5c-1.65 0-3.35.3-4.75 1.05c-.1.05-.15.05-.25.05c-.25 0-.5-.25-.5-.5V6c.6-.45 1.25-.75 2-1c1.11-.35 2.33-.5 3.5-.5c1.95 0 4.05.4 5.5 1.5c1.45-1.1 3.55-1.5 5.5-1.5c1.17 0 2.39.15 3.5.5c.75.25 1.4.55 2 1v14.6c0 .25-.25.5-.5.5c-.1 0-.15 0-.25-.05c-1.4-.75-3.1-1.05-4.75-1.05c-1.7 0-4.15.65-5.5 1.5m-1-14c-1.36-.6-3.16-1-4.5-1c-1.2 0-2.4.15-3.5.5v11.5c1.1-.35 2.3-.5 3.5-.5c1.34 0 3.14.4 4.5 1zM13 19c1.36-.6 3.16-1 4.5-1c1.2 0 2.4.15 3.5.5V7c-1.1-.35-2.3-.5-3.5-.5c-1.34 0-3.14.4-4.5 1zm1-2.65c.96-.35 2.12-.52 3.5-.52c1.04 0 1.88.08 2.5.24v-1.5a13.9 13.9 0 0 0-6 .19zm0-2.66c.96-.35 2.12-.53 3.5-.53c1.04 0 1.88.08 2.5.24v-1.5c-.87-.16-1.71-.23-2.5-.23c-1.28 0-2.45.15-3.5.45zM14 11c.96-.33 2.12-.5 3.5-.5c.91 0 1.76.09 2.5.28V9.23c-.87-.15-1.71-.23-2.5-.23c-1.32 0-2.5.15-3.5.46z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a>
25
25
  <ul class="oc-sidebar-menu-sub">
26
26
  <li><a class="oc-sidebar-menu-button" href="#">Overview</a></li>
27
27
  <li><a class="oc-sidebar-menu-button" href="#">Quick start</a></li>
28
28
  <li><a class="oc-sidebar-menu-button" href="#">Tokens</a></li>
29
29
  </ul>
30
30
  </li>
31
- <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="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span></a>
31
+ <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:layers-outline" class="oc-sidebar-menu-icon" 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 class="oc-sidebar-menu-label">Components</span></a>
32
32
  <ul class="oc-sidebar-menu-sub">
33
33
  <li><a class="oc-sidebar-menu-button" href="#">Buttons</a></li>
34
34
  <li><a class="oc-sidebar-menu-button" href="#">Forms</a></li>
@@ -41,9 +41,9 @@
41
41
  </aside>
42
42
  <div class="oc-block-sb-main">
43
43
  <header class="oc-block-sb-bar">
44
- <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
44
+ <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>
45
45
  <span class="oc-block-sb-sep"></span>
46
- <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>
46
+ <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>
47
47
  </header>
48
48
  <div class="oc-block-sb-body">
49
49
  <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 CHANGED
@@ -13,7 +13,7 @@
13
13
  <aside class="oc-sidebar oc-sidebar--floating" aria-label="Main navigation">
14
14
  <div class="oc-sidebar-header">
15
15
  <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
16
- <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
16
+ <span class="oc-block-sb-tile"><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>
17
17
  <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
18
18
  </a>
19
19
  </div>
@@ -21,32 +21,32 @@
21
21
  <div class="oc-sidebar-group">
22
22
  <div class="oc-sidebar-group-label">Getting started</div>
23
23
  <ul class="oc-sidebar-menu">
24
- <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="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
25
- <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="m8 8-5 4 5 4M16 8l5 4-5 4"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
26
- <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">Configuration</span></a></li>
24
+ <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg data-icon="mdi:book-open-variant-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21.5c-1.35-.85-3.8-1.5-5.5-1.5c-1.65 0-3.35.3-4.75 1.05c-.1.05-.15.05-.25.05c-.25 0-.5-.25-.5-.5V6c.6-.45 1.25-.75 2-1c1.11-.35 2.33-.5 3.5-.5c1.95 0 4.05.4 5.5 1.5c1.45-1.1 3.55-1.5 5.5-1.5c1.17 0 2.39.15 3.5.5c.75.25 1.4.55 2 1v14.6c0 .25-.25.5-.5.5c-.1 0-.15 0-.25-.05c-1.4-.75-3.1-1.05-4.75-1.05c-1.7 0-4.15.65-5.5 1.5m-1-14c-1.36-.6-3.16-1-4.5-1c-1.2 0-2.4.15-3.5.5v11.5c1.1-.35 2.3-.5 3.5-.5c1.34 0 3.14.4 4.5 1zM13 19c1.36-.6 3.16-1 4.5-1c1.2 0 2.4.15 3.5.5V7c-1.1-.35-2.3-.5-3.5-.5c-1.34 0-3.14.4-4.5 1zm1-2.65c.96-.35 2.12-.52 3.5-.52c1.04 0 1.88.08 2.5.24v-1.5a13.9 13.9 0 0 0-6 .19zm0-2.66c.96-.35 2.12-.53 3.5-.53c1.04 0 1.88.08 2.5.24v-1.5c-.87-.16-1.71-.23-2.5-.23c-1.28 0-2.45.15-3.5.45zM14 11c.96-.33 2.12-.5 3.5-.5c.91 0 1.76.09 2.5.28V9.23c-.87-.15-1.71-.23-2.5-.23c-1.32 0-2.5.15-3.5.46z"/></svg><span class="oc-sidebar-menu-label">Introduction</span></a></li>
25
+ <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:code-tags" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z"/></svg><span class="oc-sidebar-menu-label">Installation</span></a></li>
26
+ <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">Configuration</span></a></li>
27
27
  </ul>
28
28
  </div>
29
29
  <div class="oc-sidebar-group">
30
30
  <div class="oc-sidebar-group-label">Building</div>
31
31
  <ul class="oc-sidebar-menu">
32
- <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="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg><span class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
33
- <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="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Blocks</span></a></li>
34
- <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">Charts</span></a></li>
32
+ <li><a class="oc-sidebar-menu-button" href="#"><svg data-icon="mdi:layers-outline" class="oc-sidebar-menu-icon" 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 class="oc-sidebar-menu-label">Components</span><span class="oc-sidebar-menu-badge">24</span></a></li>
33
+ <li><a class="oc-sidebar-menu-button" href="#"><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">Blocks</span></a></li>
34
+ <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">Charts</span></a></li>
35
35
  </ul>
36
36
  </div>
37
37
  </div>
38
38
  <div class="oc-sidebar-footer">
39
39
  <div class="oc-user">
40
- <span class="oc-avatar oc-avatar--sm">SC</span>
41
- <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
40
+ <span class="oc-avatar oc-avatar--sm">U1</span>
41
+ <span class="oc-user-text"><span class="oc-user-name">User 1</span><span class="oc-user-email">user1@company1.example</span></span>
42
42
  </div>
43
43
  </div>
44
44
  </aside>
45
45
  <div class="oc-block-sb-main">
46
46
  <header class="oc-block-sb-bar">
47
- <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
47
+ <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>
48
48
  <span class="oc-block-sb-sep"></span>
49
- <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>
49
+ <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>
50
50
  </header>
51
51
  <div class="oc-block-sb-body">
52
52
  <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 CHANGED
@@ -13,7 +13,7 @@
13
13
  <aside class="oc-sidebar" aria-label="Main navigation">
14
14
  <div class="oc-sidebar-header">
15
15
  <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
16
- <span class="oc-block-sb-tile"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
16
+ <span class="oc-block-sb-tile"><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>
17
17
  <span class="oc-sidebar-menu-label"><strong>Documentation</strong><span class="oc-block-sb-sub">v1.0.0</span></span>
18
18
  </a>
19
19
  </div>
@@ -23,7 +23,7 @@
23
23
  <ul class="oc-sidebar-menu">
24
24
  <li>
25
25
  <details class="oc-sidebar-collapsible" open>
26
- <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="oc-sidebar-menu-label">Dashboard</span></summary>
26
+ <summary class="oc-sidebar-menu-button"><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></summary>
27
27
  <ul class="oc-sidebar-menu-sub">
28
28
  <li><a class="oc-sidebar-menu-button" href="#">Overview</a></li>
29
29
  <li><a class="oc-sidebar-menu-button" href="#">Analytics</a></li>
@@ -33,7 +33,7 @@
33
33
  </li>
34
34
  <li>
35
35
  <details class="oc-sidebar-collapsible">
36
- <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="oc-sidebar-menu-label">Projects</span></summary>
36
+ <summary class="oc-sidebar-menu-button"><svg data-icon="mdi:folder-outline" class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 18H4V8h16m0-2h-8l-2-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"/></svg><span class="oc-sidebar-menu-label">Projects</span></summary>
37
37
  <ul class="oc-sidebar-menu-sub">
38
38
  <li><a class="oc-sidebar-menu-button" href="#">Active</a></li>
39
39
  <li><a class="oc-sidebar-menu-button" href="#">Archived</a></li>
@@ -42,7 +42,7 @@
42
42
  </li>
43
43
  <li>
44
44
  <details class="oc-sidebar-collapsible">
45
- <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg><span class="oc-sidebar-menu-label">Team</span></summary>
45
+ <summary class="oc-sidebar-menu-button"><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">Team</span></summary>
46
46
  <ul class="oc-sidebar-menu-sub">
47
47
  <li><a class="oc-sidebar-menu-button" href="#">Members</a></li>
48
48
  <li><a class="oc-sidebar-menu-button" href="#">Roles</a></li>
@@ -56,9 +56,9 @@
56
56
  </aside>
57
57
  <div class="oc-block-sb-main">
58
58
  <header class="oc-block-sb-bar">
59
- <span class="oc-btn oc-btn--ghost oc-btn--icon oc-btn--sm" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></span>
59
+ <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>
60
60
  <span class="oc-block-sb-sep"></span>
61
- <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>
61
+ <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>
62
62
  </header>
63
63
  <div class="oc-block-sb-body">
64
64
  <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 CHANGED
@@ -17,7 +17,7 @@
17
17
  -->
18
18
  <div class="oc-block-authpage oc-block-authpage--plain">
19
19
  <form class="oc-block-authcard" action="#" method="post">
20
- <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>
20
+ <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>
21
21
  <div class="oc-block-authcard-head">
22
22
  <h1 class="oc-block-authcard-title">Create an account</h1>
23
23
  <p class="oc-block-authcard-text">Enter your information to get started</p>
@@ -25,7 +25,7 @@
25
25
  <div class="oc-block-authcard-fields">
26
26
  <div class="oc-field">
27
27
  <label class="oc-field-label" for="oc-signup01-name">Full name</label>
28
- <input class="oc-input" id="oc-signup01-name" name="text" type="text" autocomplete="name" required placeholder="Ada Lovelace">
28
+ <input class="oc-input" id="oc-signup01-name" name="text" type="text" autocomplete="name" required placeholder="Contact 1">
29
29
  </div>
30
30
  <div class="oc-field">
31
31
  <label class="oc-field-label" for="oc-signup01-email">E-mail</label>
package/blocks/signup-02.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <div class="oc-block-authduo oc-block-authduo--reverse">
19
19
  <div class="oc-block-authduo-grid">
20
20
  <aside class="oc-block-authduo-panel oc-block-authduo-panel--image">
21
- <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>
21
+ <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>
22
22
  <blockquote class="oc-block-authduo-quote">
23
23
  <p>&ldquo;Setup took ten minutes and the whole team was on board by lunch.&rdquo;</p>
24
24
  <footer>Mina Park, product manager</footer>
@@ -33,7 +33,7 @@
33
33
  <div class="oc-block-authcard-fields">
34
34
  <div class="oc-field">
35
35
  <label class="oc-field-label" for="oc-signup02-name">Full name</label>
36
- <input class="oc-input" id="oc-signup02-name" name="text" type="text" autocomplete="name" required placeholder="Ada Lovelace">
36
+ <input class="oc-input" id="oc-signup02-name" name="text" type="text" autocomplete="name" required placeholder="Contact 1">
37
37
  </div>
38
38
  <div class="oc-field">
39
39
  <label class="oc-field-label" for="oc-signup02-email">E-mail</label>
package/blocks/site-footer.html CHANGED
@@ -3,8 +3,8 @@
3
3
  <div class="oc-container">
4
4
  <div class="oc-site-footer__grid">
5
5
  <div class="oc-site-footer__about">
6
- <a class="oc-site-header__brand" href="/"><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9670;</span>brandco</a>
7
- <p>Software development since 2001: web applications, desktop tools and plugins, built and maintained in-house.</p>
6
+ <a class="oc-site-header__brand" href="/"><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9670;</span>Company 1</a>
7
+ <p>Web apps, sites and tools for small companies, built and maintained in-house.</p>
8
8
  </div>
9
9
  <div>
10
10
  <h2 class="oc-site-footer__title">Software</h2>
@@ -25,14 +25,14 @@
25
25
  <div>
26
26
  <h2 class="oc-site-footer__title">Contact</h2>
27
27
  <address class="oc-site-footer__list">
28
- <a href="mailto:hello@example.com">hello@example.com</a>
29
- <span>Main street 1</span>
30
- <span>2530 Boechout</span>
28
+ <a href="mailto:info@company1.example">info@company1.example</a>
29
+ <span>Street 1</span>
30
+ <span>1000 City 1</span>
31
31
  </address>
32
32
  </div>
33
33
  </div>
34
34
  <div class="oc-site-footer__bottom">
35
- <span>&copy; 2026 brandco. All rights reserved.</span>
35
+ <span>&copy; 2026 Company 1. All rights reserved.</span>
36
36
  <span>Built with OmniaCSS</span>
37
37
  </div>
38
38
  </div>
package/blocks/site-header.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <!-- OmniaUI block: site-header — Sticky header that turns into glass after scrolling; mobile menu via popover. No JavaScript. Needs @birdycom/omniaui. -->
2
2
  <header class="oc-site-header">
3
3
  <div class="oc-container oc-site-header__inner">
4
- <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>
4
+ <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>
5
5
  <button class="oc-site-header__toggle" popovertarget="site-nav" aria-label="Menu">&#9776;</button>
6
6
  <nav class="oc-site-header__nav" id="site-nav" popover aria-label="Main">
7
7
  <a href="#software" aria-current="page">Software</a>
package/blocks/spotlight.html CHANGED
@@ -4,10 +4,10 @@
4
4
  <div class="oc-spotlight oc-accent--green">
5
5
  <div>
6
6
  <span class="oc-pill oc-pill--accent"><span class="oc-status-dot"></span>Our flagship</span>
7
- <h2 class="oc-spotlight__title"><span class="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">&#9670;</span>OmniaDesk</h2>
7
+ <h2 class="oc-spotlight__title"><span class="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">&#9670;</span>Product 1</h2>
8
8
  <p class="oc-spotlight__tagline">The modular ERP for small businesses</p>
9
9
  <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>
10
- <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#">Discover OmniaDesk &rarr;</a>
10
+ <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#">Discover Product 1 &rarr;</a>
11
11
  </div>
12
12
  <ul class="oc-spotlight__modules">
13
13
  <li><span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">&#9787;</span>CRM &amp; contacts</li>
package/blocks/team-list.html CHANGED
@@ -7,11 +7,11 @@
7
7
  -->
8
8
  <div class="oc-block-team">
9
9
  <div class="oc-block-team-row">
10
- <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>
10
+ <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>
11
11
  <div class="oc-block-team-meta"><span class="oc-badge">Owner</span></div>
12
12
  </div>
13
13
  <div class="oc-block-team-row">
14
- <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>
14
+ <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>
15
15
  <div class="oc-block-team-meta">
16
16
  <span class="oc-badge oc-badge--secondary">Accountant</span>
17
17
  <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 @@
24
24
  </div>
25
25
  </div>
26
26
  <div class="oc-block-team-row">
27
- <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>
27
+ <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>
28
28
  <div class="oc-block-team-meta"><span class="oc-badge oc-badge--warning">Invited</span></div>
29
29
  </div>
30
30
  </div>