kempo-ui 0.1.6 → 0.2.2

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 (119) hide show
  1. package/.github/skills/highlight-code/SKILL.md +22 -6
  2. package/.github/skills/new-component/SKILL.md +68 -4
  3. package/AGENTS.md +11 -0
  4. package/bin/highlight_code.js +7 -15
  5. package/dist/components/Aside.js +326 -0
  6. package/dist/components/Dialog.js +1 -1
  7. package/dist/components/Dropdown.js +1 -1
  8. package/dist/components/Main.js +2 -2
  9. package/dist/components/Nav.js +27 -0
  10. package/dist/components/PhotoViewer.js +1 -1
  11. package/dist/components/ShadowComponent.js +1 -1
  12. package/dist/components/ThemeSwitcher.js +1 -0
  13. package/dist/components/Toast.js +1 -1
  14. package/docs/components/accordion.html +4 -3
  15. package/docs/components/aside-items.html +43 -0
  16. package/docs/components/aside-menu.html +43 -0
  17. package/docs/components/aside-push.html +26 -0
  18. package/docs/components/aside.html +567 -0
  19. package/docs/components/card.html +4 -3
  20. package/docs/components/color-picker.html +4 -3
  21. package/docs/components/content-slider.html +4 -3
  22. package/docs/components/dialog.html +4 -3
  23. package/docs/components/dropdown.html +4 -3
  24. package/docs/components/filter-list.html +4 -3
  25. package/docs/components/focus-capture.html +6 -5
  26. package/docs/components/html-editor.html +5 -4
  27. package/docs/components/hybrid-component.html +5 -4
  28. package/docs/components/icon.html +4 -3
  29. package/docs/components/import.html +5 -4
  30. package/docs/components/light-component.html +4 -3
  31. package/docs/components/nav.html +117 -0
  32. package/docs/components/photo-viewer.html +5 -4
  33. package/docs/components/resize.html +5 -4
  34. package/docs/components/shadow-component.html +4 -3
  35. package/docs/components/show-more.html +5 -4
  36. package/docs/components/sortable.html +4 -3
  37. package/docs/components/spinner.html +4 -3
  38. package/docs/components/split.html +5 -4
  39. package/docs/components/table.html +4 -3
  40. package/docs/components/tableControls.html +4 -3
  41. package/docs/components/tableCustomFields.html +4 -3
  42. package/docs/components/tableFetchRecords.html +5 -4
  43. package/docs/components/tableFieldSortHide.html +5 -4
  44. package/docs/components/tablePagination.html +4 -3
  45. package/docs/components/tableRecordEditing.html +4 -3
  46. package/docs/components/tableRecordFiltering.html +5 -4
  47. package/docs/components/tableRecordHiding.html +4 -3
  48. package/docs/components/tableRecordSearching.html +5 -4
  49. package/docs/components/tableRecordSelection.html +4 -3
  50. package/docs/components/tableRowControls.html +4 -3
  51. package/docs/components/tableServerSync.html +5 -4
  52. package/docs/components/tableSorting.html +5 -4
  53. package/docs/components/tabs.html +4 -3
  54. package/docs/components/tags.html +4 -3
  55. package/docs/components/theme-select.html +4 -3
  56. package/docs/components/theme-switcher.html +5 -4
  57. package/docs/components/timestamp.html +4 -3
  58. package/docs/components/toast.html +4 -3
  59. package/docs/components/toggle.html +5 -4
  60. package/docs/components/tree.html +5 -4
  61. package/docs/index.html +22 -21
  62. package/docs/nav-1.inc.html +18 -12
  63. package/docs/nav.inc.html +20 -13
  64. package/docs/nav.inc.js +1 -1
  65. package/docs/src/components/Aside.js +326 -0
  66. package/docs/src/components/Dialog.js +1 -1
  67. package/docs/src/components/Dropdown.js +1 -1
  68. package/docs/src/components/Main.js +2 -2
  69. package/docs/src/components/Nav.js +27 -0
  70. package/docs/src/components/PhotoViewer.js +1 -1
  71. package/docs/src/components/ShadowComponent.js +1 -1
  72. package/docs/src/components/ThemeSwitcher.js +1 -0
  73. package/docs/src/components/Toast.js +1 -1
  74. package/docs/utils/context.html +4 -3
  75. package/docs/utils/cookie.html +4 -3
  76. package/docs/utils/debounce.html +4 -3
  77. package/docs/utils/drag.html +4 -3
  78. package/docs/utils/elevation.html +156 -0
  79. package/docs/utils/formatTimestamp.html +4 -3
  80. package/docs/utils/object.html +4 -3
  81. package/docs/utils/propConverters.html +4 -3
  82. package/docs/utils/string.html +4 -3
  83. package/docs/utils/theme.html +4 -3
  84. package/docs/utils/toTitleCase.html +4 -3
  85. package/docs/utils/type.html +4 -3
  86. package/docs/utils/wait.html +4 -3
  87. package/llm.txt +247 -0
  88. package/package.json +3 -4
  89. package/src/components/Aside.js +726 -0
  90. package/src/components/Dialog.js +1 -1
  91. package/src/components/Dropdown.js +1 -1
  92. package/src/components/Main.js +34 -30
  93. package/src/components/Nav.js +53 -0
  94. package/src/components/PhotoViewer.js +1 -1
  95. package/src/components/ShadowComponent.js +1 -1
  96. package/src/components/ThemeSwitcher.js +1 -0
  97. package/src/components/Toast.js +1 -1
  98. package/tests/bin/get_icon.node-test.js +26 -0
  99. package/tests/bin/highlight_code.node-test.js +108 -0
  100. package/tests/bin/list_icons.node-test.js +26 -0
  101. package/tests/components/Aside.browser-test.js +778 -0
  102. package/tests/components/Main.browser-test.js +115 -283
  103. package/dist/components/SideMenu.js +0 -97
  104. package/dist/components/SidePanel.js +0 -236
  105. package/docs/components/side-menu.html +0 -189
  106. package/docs/components/side-panel-basic.html +0 -44
  107. package/docs/components/side-panel-dual.html +0 -70
  108. package/docs/components/side-panel-menu.html +0 -50
  109. package/docs/components/side-panel-persistent.html +0 -90
  110. package/docs/components/side-panel-scroll.html +0 -176
  111. package/docs/components/side-panel.html +0 -245
  112. package/docs/src/components/SideMenu.js +0 -97
  113. package/docs/src/components/SidePanel.js +0 -236
  114. package/scripts/update-kempo-css.js +0 -53
  115. package/src/components/SideMenu.js +0 -178
  116. package/src/components/SidePanel.js +0 -513
  117. package/tests/components/SideMenu.browser-test.js +0 -667
  118. package/tests/components/SidePanel.browser-test.js +0 -520
  119. package/tools/highlight.js +0 -51
package/docs/utils/elevation.html ADDED
@@ -0,0 +1,156 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>elevation - Kempo UI</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
9
+ <link rel="stylesheet" href="../kempo-vars.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
+ <link rel="stylesheet" href="../kempo-hljs.css" />
12
+ <link rel="stylesheet" href="../styles.css" />
13
+ <script>window.litDisableBundleWarning = true;</script>
14
+ </head>
15
+ <body>
16
+ <k-import src="../nav-1.inc.html"></k-import>
17
+ <k-main>
18
+ <h1>elevation</h1>
19
+ <k-accordion persistent-id="toc" class="b r mb">
20
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
21
+ <k-accordion-panel name="toc-panel">
22
+ <div class="m">
23
+ <a href="#overview">Overview</a><br />
24
+ <a href="#levels">Elevation Levels</a><br />
25
+ <a href="#components">Component Assignments</a><br />
26
+ <a href="#customizing">Customizing</a><br />
27
+ </div>
28
+ </k-accordion-panel>
29
+ </k-accordion>
30
+
31
+ <h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
32
+ <p>
33
+ Kempo UI follows the <a href="https://dustinpoissant.github.io/kempo-css/#elevation" target="_blank">kempo-css elevation system</a>.
34
+ Elevation defines a component's position in the stacking order using a simple formula:
35
+ </p>
36
+ <p class="tc-primary fw-bold">z-index = level × 10</p>
37
+ <p>
38
+ There are 11 levels (0–10). Level 2 is the page default for normal document flow — most components do not need a
39
+ <code>z-index</code> at all. Fixed-position components that must appear above or below other layers each occupy a
40
+ dedicated level, with intentional gaps between them so user-defined elements (like a site navbar) always have a
41
+ clear, unambiguous home.
42
+ </p>
43
+ <p>
44
+ kempo-css provides three companion utilities that work alongside a component's elevation level:
45
+ </p>
46
+ <ul>
47
+ <li><code>elevation-<i>N</i></code> — sets <code>z-index: N * 10</code></li>
48
+ <li><code>shadow</code> — adds a depth shadow matching the elevation</li>
49
+ <li><code>bg-elevation</code> — adjusts the background color to the matching elevation tint</li>
50
+ </ul>
51
+
52
+ <h3 id="levels"><a href="#levels" class="no-link">Elevation Levels</a></h3>
53
+ <table class="mb">
54
+ <thead>
55
+ <tr>
56
+ <th>Level</th>
57
+ <th>z-index</th>
58
+ <th>Intended use</th>
59
+ </tr>
60
+ </thead>
61
+ <tbody>
62
+ <tr><td>0</td><td>0</td><td>Behind the page — sunken or background elements</td></tr>
63
+ <tr><td>1</td><td>10</td><td><em>Buffer zone — reserved for customization</em></td></tr>
64
+ <tr><td>2</td><td>20</td><td>Page default — normal document flow</td></tr>
65
+ <tr><td>3</td><td>30</td><td>Fixed panels that sit below a navbar (push drawers)</td></tr>
66
+ <tr><td>4</td><td>40</td><td><em>Buffer zone — reserved for customization</em></td></tr>
67
+ <tr><td>5</td><td>50</td><td>Fixed navbar (user-defined)</td></tr>
68
+ <tr><td>6</td><td>60</td><td>Overlay drawers — above a fixed navbar</td></tr>
69
+ <tr><td>7</td><td>70</td><td>Floating menus (dropdowns, popovers)</td></tr>
70
+ <tr><td>8</td><td>80</td><td>Full-screen modals and lightboxes</td></tr>
71
+ <tr><td>9</td><td>90</td><td>Notification toasts</td></tr>
72
+ <tr><td>10</td><td>100</td><td><em>Reserved — use only when absolutely necessary</em></td></tr>
73
+ </tbody>
74
+ </table>
75
+
76
+ <h3 id="components"><a href="#components" class="no-link">Component Assignments</a></h3>
77
+ <p>Every Kempo UI component that uses <code>position: fixed</code> is assigned an elevation level:</p>
78
+ <table class="mb">
79
+ <thead>
80
+ <tr>
81
+ <th>Level</th>
82
+ <th>z-index</th>
83
+ <th>Kempo UI Components</th>
84
+ </tr>
85
+ </thead>
86
+ <tbody>
87
+ <tr>
88
+ <td>3</td>
89
+ <td>30</td>
90
+ <td>
91
+ <a href="../components/aside.html">Aside</a> (<code>main="push"</code>),
92
+ <a href="../components/side-panel.html">Side Panel</a>
93
+ </td>
94
+ </tr>
95
+ <tr>
96
+ <td>6</td>
97
+ <td>60</td>
98
+ <td>
99
+ <a href="../components/aside.html">Aside</a> (<code>main="overlay"</code>)
100
+ </td>
101
+ </tr>
102
+ <tr>
103
+ <td>7</td>
104
+ <td>70</td>
105
+ <td>
106
+ <a href="../components/dropdown.html">Dropdown</a>
107
+ </td>
108
+ </tr>
109
+ <tr>
110
+ <td>8</td>
111
+ <td>80</td>
112
+ <td>
113
+ <a href="../components/dialog.html">Dialog</a>,
114
+ <a href="../components/photo-viewer.html">Photo Viewer</a>
115
+ </td>
116
+ </tr>
117
+ <tr>
118
+ <td>9</td>
119
+ <td>90</td>
120
+ <td>
121
+ <a href="../components/toast.html">Toast</a>
122
+ </td>
123
+ </tr>
124
+ </tbody>
125
+ </table>
126
+ <p>
127
+ The <strong>Aside</strong> component uses two different levels depending on its <code>main</code> attribute.
128
+ When <code>main="push"</code>, it shifts the page layout and should sit <em>below</em> your site navbar (level 3).
129
+ When <code>main="overlay"</code>, it floats over the page and needs to appear <em>above</em> the navbar (level 6).
130
+ </p>
131
+
132
+ <h3 id="customizing"><a href="#customizing" class="no-link">Customizing</a></h3>
133
+ <p>
134
+ To override a component's elevation, target its host element with a CSS custom property or a direct
135
+ <code>z-index</code> rule. For example, to raise the Toast to the very top:
136
+ </p>
137
+ <pre><code class="hljs css"><span class="hljs-selector-tag">k-toast</span> {
138
+ <span class="hljs-attribute">z-index</span>: <span class="hljs-number">100</span>;
139
+ }</code></pre>
140
+ <p>
141
+ Levels 1 and 4 are intentionally empty buffer zones. Use them for custom fixed elements (e.g. a cookie banner at
142
+ level 4, or a persistent sticky bar at level 1) that need a guaranteed home relative to Kempo UI components.
143
+ </p>
144
+ <p>
145
+ Apply elevation classes from kempo-css directly to custom elements when you want them to participate in the same
146
+ system without writing raw <code>z-index</code> values:
147
+ </p>
148
+ <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow bg-elevation"</span>&gt;</span>My fixed navbar<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
149
+ </k-main>
150
+ <div style="height:33vh"></div>
151
+
152
+ <script src="../src/components/Import.js" type="module"></script>
153
+ <script src="../src/components/Main.js" type="module"></script>
154
+ <script src="../src/components/Accordion.js" type="module"></script>
155
+ </body>
156
+ </html>
package/docs/utils/formatTimestamp.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>formatTimestamp</h1>
19
19
 
20
20
  <details
@@ -87,8 +87,9 @@
87
87
  <h4>Locale Formatting</h4>
88
88
  <pre><code class="hljs javascript"><span class="hljs-comment">// Uses browser locale when no format specified</span><br />formatTimestamp(timestamp); <span class="hljs-comment">// "10/1/2021, 12:00:00 AM"</span><br /><br /><span class="hljs-comment">// Force specific locale</span><br />formatTimestamp(timestamp, <span class="hljs-literal">null</span>, <span class="hljs-string">'de-DE'</span>); <span class="hljs-comment">// German formatting</span></code></pre>
89
89
 
90
- </main>
90
+ </k-main>
91
91
  <div style="height:33vh"></div>
92
92
  <script type="module" src="../src/components/Import.js"></script>
93
+ <script type="module" src="../src/components/Main.js"></script>
93
94
  </body>
94
95
  </html>
package/docs/utils/object.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>Object Utilities</h1>
19
19
 
20
20
  <k-accordion persistent-id="toc" class="b r mb">
@@ -84,9 +84,10 @@
84
84
  <p>Maps over an object's entries using a function that returns [newKey, newValue].</p>
85
85
  <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { mapObject } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/object.js'</span>;<br /><br /><span class="hljs-keyword">const</span> obj = { <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span> };<br />mapObject(obj, (k, v) => [`new_${k}`, v * <span class="hljs-number">2</span>]); <span class="hljs-comment">// { new_a: 2, new_b: 4 }</span></code></pre>
86
86
 
87
- </main>
87
+ </k-main>
88
88
  <div style="height:33vh"></div>
89
89
  <script type="module" src="../src/components/Import.js"></script>
90
+ <script type="module" src="../src/components/Main.js"></script>
90
91
  <script type="module" src="../src/components/Accordion.js"></script>
91
92
  </body>
92
93
  </html>
package/docs/utils/propConverters.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>propConverters</h1>
19
19
 
20
20
  <details
@@ -84,8 +84,9 @@
84
84
  <li>Creating more semantic HTML</li>
85
85
  </ul>
86
86
 
87
- </main>
87
+ </k-main>
88
88
  <div style="height:33vh"></div>
89
89
  <script type="module" src="../src/components/Import.js"></script>
90
+ <script type="module" src="../src/components/Main.js"></script>
90
91
  </body>
91
92
  </html>
package/docs/utils/string.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>String Utilities</h1>
19
19
 
20
20
  <k-accordion persistent-id="toc" class="b r mb">
@@ -74,9 +74,10 @@
74
74
  <p>Converts strings to title case format, handling camelCase, snake_case, kebab-case, and regular text.</p>
75
75
  <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { toTitleCase } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/string.js'</span>;<br /><br />toTitleCase(<span class="hljs-string">'helloWorld'</span>); <span class="hljs-comment">// "Hello World"</span><br />toTitleCase(<span class="hljs-string">'hello-world'</span>); <span class="hljs-comment">// "Hello World"</span><br />toTitleCase(<span class="hljs-string">'hello_world'</span>); <span class="hljs-comment">// "Hello World"</span></code></pre>
76
76
 
77
- </main>
77
+ </k-main>
78
78
  <div style="height:33vh"></div>
79
79
  <script type="module" src="../src/components/Import.js"></script>
80
+ <script type="module" src="../src/components/Main.js"></script>
80
81
  <script type="module" src="../src/components/Accordion.js"></script>
81
82
  </body>
82
83
  </html>
package/docs/utils/theme.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>Theme Utility</h1>
19
19
 
20
20
  <k-accordion persistent-id="toc" class="b r mb">
@@ -131,9 +131,10 @@ theme.subscribe(<span class="hljs-function">(<span class="hljs-params">t</span>)
131
131
  <h4>System Preference Detection</h4>
132
132
  <p>When the theme is set to <code>'auto'</code>, the utility monitors the system's <code>prefers-color-scheme</code> media query and updates the <code>auto-theme</code> attribute on the document element. The <code>getCalculated()</code> method resolves the actual theme based on this preference.</p>
133
133
 
134
- </main>
134
+ </k-main>
135
135
  <div style="height:33vh"></div>
136
136
  <script type="module" src="../src/components/Import.js"></script>
137
+ <script type="module" src="../src/components/Main.js"></script>
137
138
  <script type="module" src="../src/components/Accordion.js"></script>
138
139
  <script type="module" src="../src/components/Card.js"></script>
139
140
  <script type="module">
package/docs/utils/toTitleCase.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>toTitleCase</h1>
19
19
 
20
20
  <details
@@ -63,8 +63,9 @@
63
63
  <h4>Practical Use Case: Table Column Headers</h4>
64
64
  <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> columns = [<span class="hljs-string">'firstName'</span>, <span class="hljs-string">'lastName'</span>, <span class="hljs-string">'emailAddress'</span>];<br /><br /><span class="hljs-keyword">const</span> headers = columns.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">col</span> =&gt;</span> <span class="hljs-title function_">toTitleCase</span>(col));<br /><span class="hljs-comment">// ["First Name", "Last Name", "Email Address"]</span></code></pre>
65
65
 
66
- </main>
66
+ </k-main>
67
67
  <div style="height:33vh"></div>
68
68
  <script type="module" src="../src/components/Import.js"></script>
69
+ <script type="module" src="../src/components/Main.js"></script>
69
70
  </body>
70
71
  </html>
package/docs/utils/type.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>Type Utilities</h1>
19
19
 
20
20
  <k-accordion persistent-id="toc" class="b r mb">
@@ -39,9 +39,10 @@
39
39
  <p>Checks if a value is of a specific type.</p>
40
40
  <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { isType } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/type.js'</span>;<br /><br />isType(<span class="hljs-string">'hello'</span>, <span class="hljs-string">'string'</span>); <span class="hljs-comment">// true</span><br />isType([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>], <span class="hljs-string">'array'</span>); <span class="hljs-comment">// true</span><br />isType(<span class="hljs-literal">null</span>, <span class="hljs-string">'null'</span>); <span class="hljs-comment">// true</span><br />isType(<span class="hljs-number">42</span>, <span class="hljs-string">'string'</span>); <span class="hljs-comment">// false</span></code></pre>
41
41
 
42
- </main>
42
+ </k-main>
43
43
  <div style="height:33vh"></div>
44
44
  <script type="module" src="../src/components/Import.js"></script>
45
+ <script type="module" src="../src/components/Main.js"></script>
45
46
  <script type="module" src="../src/components/Accordion.js"></script>
46
47
  </body>
47
48
  </html>
package/docs/utils/wait.html CHANGED
@@ -7,14 +7,14 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
14
  </head>
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
- <main>
17
+ <k-main>
18
18
  <h1>Wait Utilities</h1>
19
19
 
20
20
  <k-accordion persistent-id="toc" class="b r mb">
@@ -39,9 +39,10 @@
39
39
  <p>Creates a promise that resolves after a specified number of animation frames.</p>
40
40
  <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { waitFrames } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/wait.js'</span>;<br /><br /><span class="hljs-comment">// Wait for 2 animation frames</span><br />await waitFrames(<span class="hljs-number">2</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'This runs after 2 frames'</span>);</code></pre>
41
41
 
42
- </main>
42
+ </k-main>
43
43
  <div style="height:33vh"></div>
44
44
  <script type="module" src="../src/components/Import.js"></script>
45
+ <script type="module" src="../src/components/Main.js"></script>
45
46
  <script type="module" src="../src/components/Accordion.js"></script>
46
47
  </body>
47
48
  </html>