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/components/sortable.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">Sortable</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">
@@ -125,9 +125,10 @@
125
125
  <h5><code>sort</code></h5>
126
126
  <p>Dispatched by the <code>k-sortable</code> container when an item is dropped in a new position. The event bubbles. Use this event to save the new order or update your application state.</p>
127
127
 
128
- </main>
128
+ </k-main>
129
129
  <div style="height:33vh"></div>
130
130
  <script type="module" src="../src/components/Import.js"></script>
131
+ <script type="module" src="../src/components/Main.js"></script>
131
132
  <script type="module" src="../src/components/Sortable.js"></script>
132
133
  <script type="module" src="../src/components/Accordion.js"></script>
133
134
  <script type="module" src="../src/components/Card.js"></script>
package/docs/components/spinner.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 class="ta-center">Spinner</h1>
19
19
 
20
20
  <k-accordion persistent-id="toc" class="b r mb">
@@ -203,10 +203,11 @@
203
203
  <h5><code>--spinner-track-color</code></h5>
204
204
  <p>The background track color for the spinner variant. Default is <code>var(--c_border)</code>.</p>
205
205
 
206
- </main>
206
+ </k-main>
207
207
  <div style="height:33vh"></div>
208
208
  <script type="module" src="../src/components/Spinner.js"></script>
209
209
  <script type="module" src="../src/components/Import.js"></script>
210
+ <script type="module" src="../src/components/Main.js"></script>
210
211
  <script type="module" src="../src/components/Accordion.js"></script>
211
212
  <script type="module" src="../src/components/Card.js"></script>
212
213
  </body>
package/docs/components/split.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">Split</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">
@@ -202,9 +202,10 @@
202
202
  <h5><code>resizeend</code></h5>
203
203
  <p>Fired when the user stops dragging the divider handle. Detail contains <code>{ size }</code>.</p>
204
204
 
205
- </main>
205
+ </k-main>
206
206
  <div style="height:33vh"></div>
207
- <script type="module" src="../src/components/Import.js"></script>
207
+ <script type="module" src="../src/components/Import.js"></script>
208
+ <script type="module" src="../src/components/Main.js"></script>
208
209
  <script type="module" src="../src/components/Card.js"></script>
209
210
  <script type="module" src="../src/components/Split.js"></script>
210
211
  <script type="module" src="../src/components/Accordion.js"></script>
package/docs/components/table.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">Table</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">
@@ -271,9 +271,10 @@
271
271
  <h5><code>reorderFields(<i>Array</i> newOrder)<i>: undefined</i></code></h5>
272
272
  <p>Reorders the fields in the table based on the new order array.</p>
273
273
 
274
- </main>
274
+ </k-main>
275
275
  <div style="height: 33.333vh"></div>
276
276
  <script type="module" src="../src/components/Import.js"></script>
277
+ <script type="module" src="../src/components/Main.js"></script>
277
278
  <script type="module" src="../src/components/Table.js"></script>
278
279
  <script type="module" src="../src/components/Accordion.js"></script>
279
280
  <script type="module" src="../src/components/Card.js"></script>
package/docs/components/tableControls.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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Top and Bottom Controls</h1>
55
- <main>
55
+ <k-main>
56
56
 
57
57
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
58
58
 
@@ -71,9 +71,10 @@
71
71
  await window.customElements.whenDefined('k-table');
72
72
  document.getElementById('topBottomControlsExample').setRecords(contacts);
73
73
  </script>
74
- </main>
74
+ </k-main>
75
75
  <div style="height: 33.333vh"></div>
76
76
  <script type="module" src="../src/components/Import.js"></script>
77
+ <script type="module" src="../src/components/Main.js"></script>
77
78
  <script type="module" src="../src/components/Table.js"></script>
78
79
  </body>
79
80
  </html>
package/docs/components/tableCustomFields.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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Custom Fields</h1>
55
- <main>
55
+ <k-main>
56
56
 
57
57
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
58
58
 
@@ -106,9 +106,10 @@
106
106
  ]
107
107
  });
108
108
  </script>
109
- </main>
109
+ </k-main>
110
110
  <div style="height: 33.333vh"></div>
111
111
  <script type="module" src="../src/components/Import.js"></script>
112
+ <script type="module" src="../src/components/Main.js"></script>
112
113
  <script type="module" src="../src/components/Table.js"></script>
113
114
  </body>
114
115
  </html>
package/docs/components/tableFetchRecords.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 type="module" src="../src/components/Table.js"></script>
@@ -53,7 +53,7 @@
53
53
  <body>
54
54
  <k-import src="../nav-1.inc.html"></k-import>
55
55
  <h1 class="ta-center">Table - Fetch Records</h1>
56
- <main>
56
+ <k-main>
57
57
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
58
58
 
59
59
  <p>The <code>setupFetchRecords</code> function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.</p>
@@ -105,8 +105,9 @@
105
105
  $table.setRecords(contacts);
106
106
  $table.setupFetchRecords(100, simulateFetchRecords);
107
107
  </script>
108
- </main>
108
+ </k-main>
109
109
  <div style="height: 33.333vh"></div>
110
- <script type="module" src="../src/components/Import.js"></script>
110
+ <script type="module" src="../src/components/Import.js"></script>
111
+ <script type="module" src="../src/components/Main.js"></script>
111
112
  </body>
112
113
  </html>
package/docs/components/tableFieldSortHide.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 type="module" src="../src/components/Table.js"></script>
@@ -53,7 +53,7 @@
53
53
  <body>
54
54
  <k-import src="../nav-1.inc.html"></k-import>
55
55
  <h1 class="ta-center">Table - Field Sort and Hide</h1>
56
- <main>
56
+ <k-main>
57
57
 
58
58
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
59
59
 
@@ -66,8 +66,9 @@
66
66
  <script type="module">
67
67
  document.getElementById('fieldVisibilityExample').setRecords(contacts);
68
68
  </script>
69
- </main>
69
+ </k-main>
70
70
  <div style="height: 33.333vh"></div>
71
- <script type="module" src="../src/components/Import.js"></script>
71
+ <script type="module" src="../src/components/Import.js"></script>
72
+ <script type="module" src="../src/components/Main.js"></script>
72
73
  </body>
73
74
  </html>
package/docs/components/tablePagination.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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Pagination</h1>
55
- <main>
55
+ <k-main>
56
56
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
57
57
  <p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
58
58
  <p>You can optionally set the page size and page size options by setting the <code>page-size</code> and <code>page-size-options</code> attributes respectively. <code>page-size-options</code> must be in the format of an array of numbers (with brackets).</p>
@@ -86,9 +86,10 @@
86
86
  await window.customElements.whenDefined('k-table');
87
87
  document.getElementById('paginationExample').setRecords(contacts);
88
88
  </script>
89
- </main>
89
+ </k-main>
90
90
  <div style="height: 33.333vh"></div>
91
91
  <script type="module" src="../src/components/Import.js"></script>
92
+ <script type="module" src="../src/components/Main.js"></script>
92
93
  <script type="module" src="../src/components/Table.js"></script>
93
94
  <script type="module" src="../src/components/tableControls/FirstPage.js"></script>
94
95
  <script type="module" src="../src/components/tableControls/PrevPage.js"></script>
package/docs/components/tableRecordEditing.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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Record Editing</h1>
55
- <main>
55
+ <k-main>
56
56
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
57
57
 
58
58
  <p>The table component supports record editing. To allow for editing add the "edit" control to the "before" or "after" controls. You may define a "type" on the field, which will tell the table to use a specific editor for that field. If you do not define a "type" it will attempt to find the correct type using the value.</p>
@@ -136,9 +136,10 @@
136
136
  ]
137
137
  });
138
138
  </script>
139
- </main>
139
+ </k-main>
140
140
  <div style="height: 33.333vh"></div>
141
141
  <script type="module" src="../src/components/Import.js"></script>
142
+ <script type="module" src="../src/components/Main.js"></script>
142
143
  <script type="module" src="../src/components/Table.js"></script>
143
144
  <script type="module" src="../src/components/tableControls/Edit.js"></script>
144
145
  </body>
package/docs/components/tableRecordFiltering.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 type="module" src="../src/components/Table.js"></script>
@@ -53,7 +53,7 @@
53
53
  <body>
54
54
  <k-import src="../nav-1.inc.html"></k-import>
55
55
  <h1 class="ta-center">Table - Record Filtering</h1>
56
- <main>
56
+ <k-main>
57
57
 
58
58
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
59
59
 
@@ -79,8 +79,9 @@
79
79
  <script type="module">
80
80
  document.getElementById('caseSensitiveExample').setRecords(contacts);
81
81
  </script>
82
- </main>
82
+ </k-main>
83
83
  <div style="height: 33.333vh"></div>
84
- <script type="module" src="../src/components/Import.js"></script>
84
+ <script type="module" src="../src/components/Import.js"></script>
85
+ <script type="module" src="../src/components/Main.js"></script>
85
86
  </body>
86
87
  </html>
package/docs/components/tableRecordHiding.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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Record Hiding</h1>
55
- <main>
55
+ <k-main>
56
56
 
57
57
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
58
58
 
@@ -70,9 +70,10 @@
70
70
  document.getElementById('recordHidingExample').setRecords(contacts);
71
71
  </script>
72
72
 
73
- </main>
73
+ </k-main>
74
74
  <div style="height: 33.333vh"></div>
75
75
  <script type="module" src="../src/components/Import.js"></script>
76
+ <script type="module" src="../src/components/Main.js"></script>
76
77
  <script type="module" src="../src/components/Table.js"></script>
77
78
  <script type="module" src="../src/components/tableControls/Hide.js"></script>
78
79
  <script type="module" src="../src/components/tableControls/HiddenCount.js"></script>
package/docs/components/tableRecordSearching.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 type="module" src="../src/components/Table.js"></script>
@@ -53,7 +53,7 @@
53
53
  <body>
54
54
  <k-import src="../nav-1.inc.html"></k-import>
55
55
  <h1 class="ta-center">Table - Record Searching</h1>
56
- <main>
56
+ <k-main>
57
57
 
58
58
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
59
59
 
@@ -66,8 +66,9 @@
66
66
  <script type="module">
67
67
  document.getElementById('quickFilterExample').setRecords(contacts);
68
68
  </script>
69
- </main>
69
+ </k-main>
70
70
  <div style="height: 33.333vh"></div>
71
- <script type="module" src="../src/components/Import.js"></script>
71
+ <script type="module" src="../src/components/Import.js"></script>
72
+ <script type="module" src="../src/components/Main.js"></script>
72
73
  </body>
73
74
  </html>
package/docs/components/tableRecordSelection.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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Record Selection</h1>
55
- <main>
55
+ <k-main>
56
56
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
57
57
 
58
58
  <p>The table component supports record selection. You can enable selection by setting the <code>enable-selection</code> attribute to <code>true</code>. This will add a checkbox to each row and a "Select All" checkbox to the header.</p>
@@ -67,9 +67,10 @@
67
67
  await window.customElements.whenDefined('k-table');
68
68
  document.getElementById('recordSelectionExample').setRecords(contacts);
69
69
  </script>
70
- </main>
70
+ </k-main>
71
71
  <div style="height: 33.333vh"></div>
72
72
  <script type="module" src="../src/components/Import.js"></script>
73
+ <script type="module" src="../src/components/Main.js"></script>
73
74
  <script type="module" src="../src/components/Table.js"></script>
74
75
  </body>
75
76
  </html>
package/docs/components/tableRowControls.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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Row Controls</h1>
55
- <main>
55
+ <k-main>
56
56
 
57
57
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
58
58
  <p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. Use <code>slot="before"</code> to add the control before each row, and use <code>slot="after"</code> to add the control after each row.</p>
@@ -67,11 +67,12 @@
67
67
  await window.customElements.whenDefined('k-table');
68
68
  document.getElementById('rowControlsExample').setRecords(contacts);
69
69
  </script>
70
- </main>
70
+ </k-main>
71
71
  <div style="height: 33.333vh"></div>
72
72
  <script type="module" src="../src/components/Table.js"></script>
73
73
  <script type="module" src="../src/components/tableControls/ExportJson.js"></script>
74
74
  <script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
75
75
  <script type="module" src="../src/components/Import.js"></script>
76
+ <script type="module" src="../src/components/Main.js"></script>
76
77
  </body>
77
78
  </html>
package/docs/components/tableServerSync.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
1
+ <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8">
@@ -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>
@@ -52,7 +52,7 @@
52
52
  <body>
53
53
  <k-import src="../nav-1.inc.html"></k-import>
54
54
  <h1 class="ta-center">Table - Server Sync</h1>
55
- <main>
55
+ <k-main>
56
56
  <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
57
57
 
58
58
  <p>
@@ -131,9 +131,10 @@
131
131
  }
132
132
  });
133
133
  </script>
134
- </main>
134
+ </k-main>
135
135
  <div style="height: 33.333vh"></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/Table.js"></script>
138
139
  <script type="module" src="../src/components/tableControls/Edit.js"></script>
139
140
  <script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
package/docs/components/tableSorting.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 type="module" src="../src/components/Table.js"></script>
@@ -53,7 +53,7 @@
53
53
  <body>
54
54
  <k-import src="../nav-1.inc.html"></k-import>
55
55
  <h1 class="ta-center">Table - Sorting</h1>
56
- <main>
56
+ <k-main>
57
57
 
58
58
  <a href="./components/table.html"><h5>Back to Table Component Documentation</h5></a>
59
59
 
@@ -64,8 +64,9 @@
64
64
  <script type="module">
65
65
  document.getElementById('sortingExample').setRecords(contacts);
66
66
  </script>
67
- </main>
67
+ </k-main>
68
68
  <div style="height: 33.333vh"></div>
69
- <script type="module" src="../src/components/Import.js"></script>
69
+ <script type="module" src="../src/components/Import.js"></script>
70
+ <script type="module" src="../src/components/Main.js"></script>
70
71
  </body>
71
72
  </html>
package/docs/components/tabs.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">Tabs</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">
@@ -208,11 +208,12 @@
208
208
  <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
209
209
  <h5><code>tab</code></h5>
210
210
  <p>Fired when the active tab changes. Detail contains <code>{ tab }</code> with the name of the new active tab.</p>
211
- </main>
211
+ </k-main>
212
212
  <div style="height:33vh"></div>
213
213
  <script type="module" src="../src/components/Tabs.js"></script>
214
214
  <script type="module" src="../src/components/Card.js"></script>
215
215
  <script type="module" src="../src/components/Accordion.js"></script>
216
216
  <script type="module" src="../src/components/Import.js"></script>
217
+ <script type="module" src="../src/components/Main.js"></script>
217
218
  </body>
218
219
  </html>
package/docs/components/tags.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">Tags</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">
@@ -143,9 +143,10 @@
143
143
  <p>Fired when the allowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
144
144
  <h5><code>disallowedtagschange</code></h5>
145
145
  <p>Fired when the disallowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
146
- </main>
146
+ </k-main>
147
147
  <div style="height:33vh"></div>
148
148
  <script type="module" src="../src/components/Import.js"></script>
149
+ <script type="module" src="../src/components/Main.js"></script>
149
150
  <script type="module" src="../src/components/Tags.js"></script>
150
151
  <script type="module" src="../src/components/Accordion.js"></script>
151
152
  <script type="module" src="../src/components/Card.js"></script>
package/docs/components/theme-select.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">ThemeSelect</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">
@@ -114,9 +114,10 @@
114
114
  <p>See the <a href="../utils/theme.html">theme utility</a> documentation for programmatic theme management without using this component.</p>
115
115
  <p>See the <a href="./theme-switcher.html">ThemeSwitcher</a> component for a button-based toggle alternative.</p>
116
116
 
117
- </main>
117
+ </k-main>
118
118
  <div style="height:33vh"></div>
119
119
  <script type="module" src="../src/components/Import.js"></script>
120
+ <script type="module" src="../src/components/Main.js"></script>
120
121
  <script type="module" src="../src/components/ThemeSelect.js"></script>
121
122
  <script type="module" src="../src/components/Accordion.js"></script>
122
123
  <script type="module" src="../src/components/Card.js"></script>