kempo-ui 0.1.6 → 0.2.1

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.md +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/components/theme-switcher.html CHANGED
@@ -7,7 +7,7 @@
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>
@@ -15,7 +15,7 @@
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
17
  <h1 class="ta-center">ThemeSwitcher</h1>
18
- <main>
18
+ <k-main>
19
19
  <k-accordion persistent-id="toc" class="b r mb">
20
20
  <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
21
21
  <k-accordion-panel name="toc-panel">
@@ -130,9 +130,10 @@
130
130
  <h3>Related</h3>
131
131
  <p>See the <a href="../utils/theme.html">theme utility</a> documentation for programmatic theme management without using this component.</p>
132
132
 
133
- </main>
133
+ </k-main>
134
134
  <div style="height:33vh"></div>
135
- <script type="module" src="../src/components/Import.js"></script>
135
+ <script type="module" src="../src/components/Import.js"></script>
136
+ <script type="module" src="../src/components/Main.js"></script>
136
137
  <script type="module" src="../src/components/ThemeSwitcher.js"></script>
137
138
  <script type="module" src="../src/components/Accordion.js"></script>
138
139
  <script type="module" src="../src/components/Card.js"></script>
package/docs/components/timestamp.html CHANGED
@@ -7,7 +7,7 @@
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>
@@ -15,7 +15,7 @@
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
17
  <h1 class="ta-center">Timestamp</h1>
18
- <main>
18
+ <k-main>
19
19
  <k-accordion persistent-id="toc" class="b r mb">
20
20
  <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
21
21
  <k-accordion-panel name="toc-panel">
@@ -117,9 +117,10 @@
117
117
  <p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the ShadowComponent
118
118
  class.</p>
119
119
 
120
- </main>
120
+ </k-main>
121
121
  <div style="height:33vh"></div>
122
122
  <script type="module" src="../src/components/Import.js"></script>
123
+ <script type="module" src="../src/components/Main.js"></script>
123
124
  <script type="module" src="../src/components/Timestamp.js"></script>
124
125
  <script type="module" src="../src/components/Accordion.js"></script>
125
126
  <script type="module" src="../src/components/Card.js"></script>
package/docs/components/toast.html CHANGED
@@ -7,7 +7,7 @@
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>
@@ -15,7 +15,7 @@
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
17
  <h1 class="ta-center">Toast</h1>
18
- <main>
18
+ <k-main>
19
19
  <k-accordion persistent-id="toc" class="b r mb">
20
20
  <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
21
21
  <k-accordion-panel name="toc-panel">
@@ -346,9 +346,10 @@
346
346
  <p>The position of the container on the screen. Valid values are: 'top left', 'top center', 'top right', 'bottom
347
347
  left', 'bottom center', 'bottom right'.</p>
348
348
 
349
- </main>
349
+ </k-main>
350
350
  <div style="height:33vh"></div>
351
351
  <script type="module" src="../src/components/Import.js"></script>
352
+ <script type="module" src="../src/components/Main.js"></script>
352
353
  <script type="module" src="../src/components/Toast.js"></script>
353
354
  <script type="module" src="../src/components/Accordion.js"></script>
354
355
  <script type="module" src="../src/components/Card.js"></script>
package/docs/components/toggle.html CHANGED
@@ -7,7 +7,7 @@
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>
@@ -15,7 +15,7 @@
15
15
  <body>
16
16
  <k-import src="../nav-1.inc.html"></k-import>
17
17
  <h1 class="ta-center">Toggle</h1>
18
- <main>
18
+ <k-main>
19
19
  <k-accordion persistent-id="toc" class="b r mb">
20
20
  <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
21
21
  <k-accordion-panel name="toc-panel">
@@ -165,9 +165,10 @@
165
165
  <h5><code>toggle()<i>: this</i></code></h5>
166
166
  <p>Negates the <code>value</code>, if it is <code>true</code> it is now set to <code>false</code>, but if it is <code>false</code> it is now set to <code>true</code>. It also dispatches dispatches a <code><i>change</i></code> and an <code><i>on</i></code> or <code><i>off</i></code> event. The switch visual changes to the oposite state.</p>
167
167
 
168
- </main>
168
+ </k-main>
169
169
  <div style="height:33vh"></div>
170
- <script type="module" src="../src/components/Import.js"></script>
170
+ <script type="module" src="../src/components/Import.js"></script>
171
+ <script type="module" src="../src/components/Main.js"></script>
171
172
  <script type="module" src="../src/components/Toggle.js"></script>
172
173
  <script type="module" src="../src/components/Accordion.js"></script>
173
174
  <script type="module" src="../src/components/Card.js"></script>
package/docs/components/tree.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
1
+ <!DOCTYPE html>
2
2
  <html lang="en">
3
3
 
4
4
  <head>
@@ -8,7 +8,7 @@
8
8
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
9
9
  <link rel="manifest" href="../manifest.json" />
10
10
  <link rel="stylesheet" href="../kempo-vars.css" />
11
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
12
12
  <link rel="stylesheet" href="../kempo-hljs.css" />
13
13
  <link rel="stylesheet" href="../styles.css" />
14
14
  <script>window.litDisableBundleWarning = true;</script>
@@ -17,7 +17,7 @@
17
17
  <body>
18
18
  <k-import src="../nav-1.inc.html"></k-import>
19
19
  <h1 class="ta-center">Tree</h1>
20
- <main>
20
+ <k-main>
21
21
  <k-accordion persistent-id="toc" class="b r mb">
22
22
  <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
23
23
  <k-accordion-panel name="toc-panel">
@@ -365,9 +365,10 @@
365
365
  <li><strong>UndefinedNode</strong> &mdash; Renders <code>undefined</code> in muted gray</li>
366
366
  </ul>
367
367
  <p>Objects and arrays that don't match any registered node type are rendered as collapsible branches using the default <code>TreeNode</code> behavior.</p>
368
- </main>
368
+ </k-main>
369
369
  <div style="height:33vh"></div>
370
370
  <script type="module" src="../src/components/Import.js"></script>
371
+ <script type="module" src="../src/components/Main.js"></script>
371
372
  <script type="module" src="../src/components/Tree.js"></script>
372
373
  <script type="module" src="../src/components/Accordion.js"></script>
373
374
  <script type="module" src="../src/components/Card.js"></script>
package/docs/index.html CHANGED
@@ -6,14 +6,14 @@
6
6
  <title>Kempo UI Documentation</title>
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
8
8
  <link rel="manifest" href="./manifest.json" />
9
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css">
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css">
10
10
  <link rel="stylesheet" href="./kempo-hljs.css">
11
11
  <link rel="stylesheet" href="./kempo-vars.css">
12
12
  <script>window.litDisableBundleWarning = true;</script>
13
13
  </head>
14
14
  <body>
15
15
  <k-import src="nav.inc.html"></k-import>
16
- <main>
16
+ <k-main>
17
17
  <h1 class="ta-center">
18
18
  <img
19
19
  src="./media/icon64.png"
@@ -53,6 +53,12 @@
53
53
  <p class="tc-muted">Collapsible sections with smooth animations and toggle controls.</p>
54
54
  </a>
55
55
  </div>
56
+ <div class="span-12 t-span-6 d-span-4 px">
57
+ <a href="./components/aside.html" class="card mb no-link d-b">
58
+ <h3 class="tc-primary">Aside</h3>
59
+ <p class="tc-muted">Enhanced sidebar component with push and overlay modes.</p>
60
+ </a>
61
+ </div>
56
62
  <div class="span-12 t-span-6 d-span-4 px">
57
63
  <a href="./components/card.html" class="card mb no-link d-b">
58
64
  <h3 class="tc-primary">Card</h3>
@@ -113,6 +119,12 @@
113
119
  <p class="tc-muted">Dynamically load and include HTML snippets into your pages.</p>
114
120
  </a>
115
121
  </div>
122
+ <div class="span-12 t-span-6 d-span-4 px">
123
+ <a href="./components/nav.html" class="card mb no-link d-b">
124
+ <h3 class="tc-primary">Nav</h3>
125
+ <p class="tc-muted">Fixed navigation bar with automatic elevation applied at the correct stacking level.</p>
126
+ </a>
127
+ </div>
116
128
  <div class="span-12 t-span-6 d-span-4 px">
117
129
  <a href="./components/photo-viewer.html" class="card mb no-link d-b">
118
130
  <h3 class="tc-primary">Photo Viewer</h3>
@@ -131,18 +143,6 @@
131
143
  <p class="tc-muted">Truncate long content with a "show more" button to expand.</p>
132
144
  </a>
133
145
  </div>
134
- <div class="span-12 t-span-6 d-span-4 px">
135
- <a href="./components/side-menu.html" class="card mb no-link d-b">
136
- <h3 class="tc-primary">Side Menu</h3>
137
- <p class="tc-muted">Slide-out navigation drawer with focus management.</p>
138
- </a>
139
- </div>
140
- <div class="span-12 t-span-6 d-span-4 px">
141
- <a href="./components/side-panel.html" class="card mb no-link d-b">
142
- <h3 class="tc-primary">Side Panel</h3>
143
- <p class="tc-muted">Collapsible persistent sidebar that pushes page content.</p>
144
- </a>
145
- </div>
146
146
  <div class="span-12 t-span-6 d-span-4 px">
147
147
  <a href="./components/sortable.html" class="card mb no-link d-b">
148
148
  <h3 class="tc-primary">Sortable</h3>
@@ -179,12 +179,6 @@
179
179
  <p class="tc-muted">Input field for adding and removing tags with keyboard support.</p>
180
180
  </a>
181
181
  </div>
182
- <div class="span-12 t-span-6 d-span-4 px">
183
- <a href="./components/toast.html" class="card mb no-link d-b">
184
- <h3 class="tc-primary">Toast</h3>
185
- <p class="tc-muted">Notification messages that appear temporarily at screen corners.</p>
186
- </a>
187
- </div>
188
182
  <div class="span-12 t-span-6 d-span-4 px">
189
183
  <a href="./components/theme-select.html" class="card mb no-link d-b">
190
184
  <h3 class="tc-primary">Theme Select</h3>
@@ -203,6 +197,12 @@
203
197
  <p class="tc-muted">Display formatted dates and times with relative formatting.</p>
204
198
  </a>
205
199
  </div>
200
+ <div class="span-12 t-span-6 d-span-4 px">
201
+ <a href="./components/toast.html" class="card mb no-link d-b">
202
+ <h3 class="tc-primary">Toast</h3>
203
+ <p class="tc-muted">Notification messages that appear temporarily at screen corners.</p>
204
+ </a>
205
+ </div>
206
206
  <div class="span-12 t-span-6 d-span-4 px">
207
207
  <a href="./components/toggle.html" class="card mb no-link d-b">
208
208
  <h3 class="tc-primary">Toggle</h3>
@@ -309,7 +309,8 @@
309
309
  </div>
310
310
  </div>
311
311
  <div style="height:33vh"></div>
312
- </main>
312
+ </k-main>
313
313
  <script type="module" src="./src/components/Import.js"></script>
314
+ <script type="module" src="./src/components/Main.js"></script>
314
315
  </body>
315
316
  </html>
package/docs/nav-1.inc.html CHANGED
@@ -1,5 +1,6 @@
1
- <nav
2
- class="d-f bg-primary fixed"
1
+ <k-nav
2
+ fixed
3
+ class="bg-primary"
3
4
  >
4
5
  <button
5
6
  id="toggleNavSideMenu"
@@ -20,6 +21,7 @@
20
21
  <div id="navSearchDropdown" hidden theme="light" style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);">
21
22
  <k-filter-list id="navSearchList" style="display:block;padding:.25rem 0;">
22
23
  <k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
24
+ <k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
23
25
  <k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
24
26
  <k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
25
27
  <k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
@@ -30,11 +32,10 @@
30
32
  <k-filter-item filter-keywords="html editor components"><a href="../components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
31
33
  <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
32
34
  <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
35
+ <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
33
36
  <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
34
37
  <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
35
38
  <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
36
- <k-filter-item filter-keywords="side menu sidemenu components"><a href="../components/side-menu.html">Side Menu<br><small>Component</small></a></k-filter-item>
37
- <k-filter-item filter-keywords="side panel sidepanel components"><a href="../components/side-panel.html">Side Panel<br><small>Component</small></a></k-filter-item>
38
39
  <k-filter-item filter-keywords="sortable drag drop sort components"><a href="../components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
39
40
  <k-filter-item filter-keywords="spinner loading components"><a href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
40
41
  <k-filter-item filter-keywords="split pane components"><a href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
@@ -54,10 +55,10 @@
54
55
  <k-filter-item filter-keywords="table sorting advanced example"><a href="../components/tableSorting.html">Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
55
56
  <k-filter-item filter-keywords="tabs tab panel components"><a href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
56
57
  <k-filter-item filter-keywords="tags tag input components"><a href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
57
- <k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
58
58
  <k-filter-item filter-keywords="theme select dropdown dark light components"><a href="../components/theme-select.html">Theme Select<br><small>Component</small></a></k-filter-item>
59
59
  <k-filter-item filter-keywords="theme switcher dark light components"><a href="../components/theme-switcher.html">Theme Switcher<br><small>Component</small></a></k-filter-item>
60
60
  <k-filter-item filter-keywords="timestamp date time components"><a href="../components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
61
+ <k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
61
62
  <k-filter-item filter-keywords="toggle switch checkbox components"><a href="../components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
62
63
  <k-filter-item filter-keywords="tree treeview components"><a href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
63
64
  <k-filter-item filter-keywords="shadow component base"><a href="../components/shadow-component.html">Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -67,6 +68,7 @@
67
68
  <k-filter-item filter-keywords="context utils utility"><a href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
68
69
  <k-filter-item filter-keywords="debounce utils utility"><a href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
69
70
  <k-filter-item filter-keywords="drag utils utility"><a href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
71
+ <k-filter-item filter-keywords="elevation z-index stacking utils"><a href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
70
72
  <k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a href="../utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
71
73
  <k-filter-item filter-keywords="object utils utility"><a href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
72
74
  <k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="../utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
@@ -81,10 +83,12 @@
81
83
  <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"><k-icon name="license"></k-icont></a>
82
84
  <a href="https://github.com/dustinpoissant/kempo-ui"><k-icon name="github-mark"></k-icont></a>
83
85
  <k-theme-switcher></k-theme-switcher>
84
- </nav>
86
+ </k-nav>
85
87
  <div style="width: 100%; height: 4rem;"></div>
86
- <k-side-menu
88
+ <k-aside
87
89
  id="navSideMenu"
90
+ main="overlay"
91
+ state="offscreen"
88
92
  >
89
93
  <menu>
90
94
  <a href="../" class="ta-center bb mb r0">
@@ -94,6 +98,7 @@
94
98
  <div class="pl mb">
95
99
  <h3>Components</h3>
96
100
  <a href="../components/accordion.html">Accordion</a>
101
+ <a href="../components/aside.html">Aside</a>
97
102
  <a href="../components/card.html">Card</a>
98
103
  <a href="../components/color-picker.html">ColorPicker</a>
99
104
  <a href="../components/content-slider.html">Content Slider</a>
@@ -104,21 +109,20 @@
104
109
  <a href="../components/html-editor.html">HTML Editor</a>
105
110
  <a href="../components/icon.html">Icon</a>
106
111
  <a href="../components/import.html">Import</a>
112
+ <a href="../components/nav.html">Nav</a>
107
113
  <a href="../components/photo-viewer.html">Photo Viewer</a>
108
114
  <a href="../components/resize.html">Resize</a>
109
115
  <a href="../components/show-more.html">Show More</a>
110
- <a href="../components/side-menu.html">Side Menu</a>
111
- <a href="../components/side-panel.html">Side Panel</a>
112
116
  <a href="../components/sortable.html">Sortable</a>
113
117
  <a href="../components/spinner.html">Spinner</a>
114
118
  <a href="../components/split.html">Split</a>
115
119
  <a href="../components/table.html">Table</a>
116
120
  <a href="../components/tabs.html">Tabs</a>
117
121
  <a href="../components/tags.html">Tags</a>
118
- <a href="../components/toast.html">Toast</a>
119
122
  <a href="../components/theme-select.html">Theme Select</a>
120
123
  <a href="../components/theme-switcher.html">Theme Switcher</a>
121
124
  <a href="../components/timestamp.html">Timestamp</a>
125
+ <a href="../components/toast.html">Toast</a>
122
126
  <a href="../components/toggle.html">Toggle</a>
123
127
  <a href="../components/tree.html">Tree</a>
124
128
  </div>
@@ -136,6 +140,7 @@
136
140
  <a href="../utils/context.html">context</a>
137
141
  <a href="../utils/debounce.html">debounce</a>
138
142
  <a href="../utils/drag.html">drag</a>
143
+ <a href="../utils/elevation.html">elevation</a>
139
144
  <a href="../utils/formatTimestamp.html">formatTimestamp</a>
140
145
  <a href="../utils/object.html">object</a>
141
146
  <a href="../utils/propConverters.html">propConverters</a>
@@ -145,15 +150,16 @@
145
150
  <a href="../utils/wait.html">wait</a>
146
151
  </div>
147
152
  </menu>
148
- </k-side-menu>
153
+ </k-aside>
149
154
  <style>
150
155
  #navSearchList a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none;color:var(--tc);}
151
156
  #navSearchList a:hover{background:rgba(128,128,128,.15);}
152
157
  #navSearchList a small{display:block;color:var(--tc_muted);}
153
158
  </style>
159
+ <script src="../src/components/Nav.js" type="module"></script>
154
160
  <script src="../src/components/FilterList.js" type="module"></script>
155
161
  <script src="../src/components/FilterItem.js" type="module"></script>
156
- <script src="../src/components/SideMenu.js" type="module"></script>
162
+ <script src="../src/components/Aside.js" type="module"></script>
157
163
  <script src="../src/components/Icon.js" type="module"></script>
158
164
  <script src="../src/components/ThemeSwitcher.js" type="module"></script>
159
165
  <script src="../nav.inc.js" type="module"></script>
package/docs/nav.inc.html CHANGED
@@ -1,5 +1,6 @@
1
- <nav
2
- class="d-f bg-primary fixed"
1
+ <k-nav
2
+ fixed
3
+ class="bg-primary"
3
4
  >
4
5
  <button
5
6
  id="toggleNavSideMenu"
@@ -20,6 +21,7 @@
20
21
  <div id="navSearchDropdown" hidden theme="light" style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);">
21
22
  <k-filter-list id="navSearchList" style="display:block;padding:.25rem 0;">
22
23
  <k-filter-item filter-keywords="accordion components"><a href="./components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
24
+ <k-filter-item filter-keywords="aside sidebar components"><a href="./components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
23
25
  <k-filter-item filter-keywords="card components"><a href="./components/card.html">Card<br><small>Component</small></a></k-filter-item>
24
26
  <k-filter-item filter-keywords="color picker colorpicker components"><a href="./components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
25
27
  <k-filter-item filter-keywords="content slider components"><a href="./components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
@@ -30,11 +32,10 @@
30
32
  <k-filter-item filter-keywords="html editor components"><a href="./components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
31
33
  <k-filter-item filter-keywords="icon components"><a href="./components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
32
34
  <k-filter-item filter-keywords="import components"><a href="./components/import.html">Import<br><small>Component</small></a></k-filter-item>
35
+ <k-filter-item filter-keywords="nav navbar navigation components"><a href="./components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
33
36
  <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="./components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
34
37
  <k-filter-item filter-keywords="resize components"><a href="./components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
35
38
  <k-filter-item filter-keywords="show more showmore components"><a href="./components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
36
- <k-filter-item filter-keywords="side menu sidemenu components"><a href="./components/side-menu.html">Side Menu<br><small>Component</small></a></k-filter-item>
37
- <k-filter-item filter-keywords="side panel sidepanel components"><a href="./components/side-panel.html">Side Panel<br><small>Component</small></a></k-filter-item>
38
39
  <k-filter-item filter-keywords="sortable drag drop sort components"><a href="./components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
39
40
  <k-filter-item filter-keywords="spinner loading components"><a href="./components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
40
41
  <k-filter-item filter-keywords="split pane components"><a href="./components/split.html">Split<br><small>Component</small></a></k-filter-item>
@@ -54,10 +55,10 @@
54
55
  <k-filter-item filter-keywords="table sorting advanced example"><a href="./components/tableSorting.html">Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
55
56
  <k-filter-item filter-keywords="tabs tab panel components"><a href="./components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
56
57
  <k-filter-item filter-keywords="tags tag input components"><a href="./components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
57
- <k-filter-item filter-keywords="toast notification alert components"><a href="./components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
58
58
  <k-filter-item filter-keywords="theme select dropdown dark light components"><a href="./components/theme-select.html">Theme Select<br><small>Component</small></a></k-filter-item>
59
59
  <k-filter-item filter-keywords="theme switcher dark light components"><a href="./components/theme-switcher.html">Theme Switcher<br><small>Component</small></a></k-filter-item>
60
60
  <k-filter-item filter-keywords="timestamp date time components"><a href="./components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
61
+ <k-filter-item filter-keywords="toast notification alert components"><a href="./components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
61
62
  <k-filter-item filter-keywords="toggle switch checkbox components"><a href="./components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
62
63
  <k-filter-item filter-keywords="tree treeview components"><a href="./components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
63
64
  <k-filter-item filter-keywords="shadow component base"><a href="./components/shadow-component.html">Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -67,6 +68,7 @@
67
68
  <k-filter-item filter-keywords="context utils utility"><a href="./utils/context.html">context<br><small>Utility</small></a></k-filter-item>
68
69
  <k-filter-item filter-keywords="debounce utils utility"><a href="./utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
69
70
  <k-filter-item filter-keywords="drag utils utility"><a href="./utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
71
+ <k-filter-item filter-keywords="elevation z-index stacking utils"><a href="./utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
70
72
  <k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a href="./utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
71
73
  <k-filter-item filter-keywords="object utils utility"><a href="./utils/object.html">object<br><small>Utility</small></a></k-filter-item>
72
74
  <k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="./utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
@@ -81,10 +83,12 @@
81
83
  <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
82
84
  <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
83
85
  <k-theme-switcher></k-theme-switcher>
84
- </nav>
86
+ </k-nav>
85
87
  <div style="width: 100%; height: 4rem;"></div>
86
- <k-side-menu
88
+ <k-aside
87
89
  id="navSideMenu"
90
+ main="overlay"
91
+ state="offscreen"
88
92
  >
89
93
  <menu>
90
94
  <a href="./" class="ta-center bb mb r0">
@@ -95,32 +99,33 @@
95
99
  <div class="pl mb">
96
100
  <h3>Components</h3>
97
101
  <a href="./components/accordion.html">Accordion</a>
102
+ <a href="./components/aside.html">Aside</a>
98
103
  <a href="./components/card.html">Card</a>
99
104
  <a href="./components/color-picker.html">ColorPicker</a>
100
105
  <a href="./components/content-slider.html">Content Slider</a>
101
106
  <a href="./components/dialog.html">Dialog</a>
107
+ <a href="./components/dropdown.html">Dropdown</a>
102
108
  <a href="./components/filter-list.html">Filter List</a>
103
109
  <a href="./components/focus-capture.html">FocusCapture</a>
104
110
  <a href="./components/html-editor.html">HTML Editor</a>
105
111
  <a href="./components/icon.html">Icon</a>
106
112
  <a href="./components/import.html">Import</a>
113
+ <a href="./components/nav.html">Nav</a>
107
114
  <a href="./components/photo-viewer.html">Photo Viewer</a>
108
115
  <a href="./components/resize.html">Resize</a>
109
116
  <a href="./components/show-more.html">Show More</a>
110
- <a href="./components/side-menu.html">Side Menu</a>
111
- <a href="./components/side-panel.html">Side Panel</a>
112
117
  <a href="./components/sortable.html">Sortable</a>
118
+ <a href="./components/spinner.html">Spinner</a>
113
119
  <a href="./components/split.html">Split</a>
114
120
  <a href="./components/table.html">Table</a>
115
121
  <a href="./components/tabs.html">Tabs</a>
116
122
  <a href="./components/tags.html">Tags</a>
117
- <a href="./components/toast.html">Toast</a>
118
123
  <a href="./components/theme-select.html">Theme Select</a>
119
124
  <a href="./components/theme-switcher.html">Theme Switcher</a>
120
125
  <a href="./components/timestamp.html">Timestamp</a>
126
+ <a href="./components/toast.html">Toast</a>
121
127
  <a href="./components/toggle.html">Toggle</a>
122
128
  <a href="./components/tree.html">Tree</a>
123
- <a href="./utils/context.html">Context Utility</a>
124
129
  </div>
125
130
 
126
131
  <h5 class="mb0">Base Components</h5>
@@ -136,6 +141,7 @@
136
141
  <a href="./utils/context.html">context</a>
137
142
  <a href="./utils/debounce.html">debounce</a>
138
143
  <a href="./utils/drag.html">drag</a>
144
+ <a href="./utils/elevation.html">elevation</a>
139
145
  <a href="./utils/formatTimestamp.html">formatTimestamp</a>
140
146
  <a href="./utils/object.html">object</a>
141
147
  <a href="./utils/propConverters.html">propConverters</a>
@@ -144,15 +150,16 @@
144
150
  <a href="./utils/wait.html">wait</a>
145
151
  </div>
146
152
  </menu>
147
- </k-side-menu>
153
+ </k-aside>
148
154
  <style>
149
155
  #navSearchList a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none;color:var(--tc);}
150
156
  #navSearchList a:hover{background:rgba(128,128,128,.15);}
151
157
  #navSearchList a small{display:block;color:var(--tc_muted);}
152
158
  </style>
159
+ <script src="./src/components/Nav.js" type="module"></script>
153
160
  <script src="./src/components/FilterList.js" type="module"></script>
154
161
  <script src="./src/components/FilterItem.js" type="module"></script>
155
- <script src="./src/components/SideMenu.js" type="module"></script>
162
+ <script src="./src/components/Aside.js" type="module"></script>
156
163
  <script src="./src/components/Icon.js" type="module"></script>
157
164
  <script src="./src/components/ThemeSwitcher.js" type="module"></script>
158
165
  <script src="./nav.inc.js" type="module"></script>
package/docs/nav.inc.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import debounce from './src/utils/debounce.js';
2
2
 
3
3
  document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
4
- await window.customElements.whenDefined('k-side-menu');
4
+ await window.customElements.whenDefined('k-aside');
5
5
  document.getElementById('navSideMenu').toggle();
6
6
  });
7
7