kempo-ui 0.0.2 → 0.0.4

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 (278) hide show
  1. package/.github/copilot-instructions.md +149 -149
  2. package/.github/workflows/publish-major.yml +39 -0
  3. package/.github/workflows/publish-minor.yml +39 -0
  4. package/.github/workflows/{publish-npm.yml → publish-patch.yml} +44 -44
  5. package/.vscode/settings.json +2 -0
  6. package/CONTRIBUTING.md +149 -149
  7. package/README.md +0 -0
  8. package/dist/kempo-hljs.css +1 -0
  9. package/dist/kempo-vars.css +0 -0
  10. package/dist/src/components/Accordion.js +36 -0
  11. package/dist/src/components/Card.js +37 -0
  12. package/dist/src/components/Collapsible.js +41 -0
  13. package/dist/src/components/ContentSlider.js +44 -0
  14. package/dist/src/components/Dialog.js +113 -0
  15. package/dist/src/components/FocusCapture.js +7 -0
  16. package/dist/src/components/Icon.js +10 -0
  17. package/dist/src/components/Import.js +1 -0
  18. package/dist/src/components/PersistantCollapsible.js +1 -0
  19. package/dist/src/components/PhotoViewer.js +135 -0
  20. package/dist/src/components/Resize.js +96 -0
  21. package/dist/src/components/ShadowComponent.js +1 -0
  22. package/dist/src/components/ShowMore.js +42 -0
  23. package/dist/src/components/SideMenu.js +97 -0
  24. package/dist/src/components/Split.js +84 -0
  25. package/dist/src/components/Tabs.js +155 -0
  26. package/dist/src/components/Tags.js +69 -0
  27. package/dist/src/components/ThemeSwitcher.js +23 -0
  28. package/dist/src/components/Timestamp.js +1 -0
  29. package/dist/src/lit-all.min.js +120 -0
  30. package/dist/src/utils/debounce.js +1 -0
  31. package/dist/src/utils/drag.js +1 -0
  32. package/dist/src/utils/formatTimestamp.js +1 -0
  33. package/dist/src/utils/propConverters.js +1 -0
  34. package/dist/src/utils/watchWindowSize.js +1 -0
  35. package/docs/components/accordion.html +166 -0
  36. package/docs/components/card.html +92 -0
  37. package/docs/components/collapsible.html +198 -0
  38. package/docs/components/content-slider.html +223 -0
  39. package/docs/components/dialog.html +251 -0
  40. package/docs/components/focus-capture.html +67 -0
  41. package/docs/components/icon.html +158 -0
  42. package/docs/components/import.html +73 -0
  43. package/docs/components/persistant-collapsible.html +123 -0
  44. package/docs/components/photo-viewer.html +226 -0
  45. package/docs/components/resize.html +178 -0
  46. package/docs/components/show-more.html +129 -0
  47. package/docs/components/side-menu.html +159 -0
  48. package/docs/components/split.html +147 -0
  49. package/docs/components/table.html +312 -0
  50. package/docs/components/tableControls.html +77 -0
  51. package/docs/components/tableCustomFields.html +113 -0
  52. package/docs/components/tableFetchRecords.html +114 -0
  53. package/docs/components/tableFieldSortHide.html +75 -0
  54. package/docs/components/tablePagination.html +100 -0
  55. package/docs/components/tableRecordEditing.html +144 -0
  56. package/docs/components/tableRecordFiltering.html +88 -0
  57. package/docs/components/tableRecordHiding.html +80 -0
  58. package/docs/components/tableRecordSearching.html +75 -0
  59. package/docs/components/tableRecordSelection.html +75 -0
  60. package/docs/components/tableRowControls.html +78 -0
  61. package/docs/components/tableSorting.html +73 -0
  62. package/docs/components/tabs.html +180 -0
  63. package/docs/components/tags.html +110 -0
  64. package/docs/components/theme-switcher.html +126 -0
  65. package/docs/components/timestamp.html +82 -0
  66. package/docs/components/toast.html +319 -0
  67. package/docs/components/toggle.html +156 -0
  68. package/docs/dev.config.json +20 -0
  69. package/docs/icons/add.svg +1 -0
  70. package/docs/icons/arrow-back.svg +1 -0
  71. package/docs/icons/arrow-down-double.svg +1 -0
  72. package/docs/icons/arrow-down.svg +1 -0
  73. package/docs/icons/arrow-forward.svg +1 -0
  74. package/docs/icons/arrow-up-double.svg +1 -0
  75. package/docs/icons/arrow-up.svg +1 -0
  76. package/docs/icons/cards.svg +1 -0
  77. package/docs/icons/check.svg +1 -0
  78. package/docs/icons/chevron-left.svg +1 -0
  79. package/docs/icons/chevron-right.svg +1 -0
  80. package/docs/icons/close.svg +2 -0
  81. package/docs/icons/compare.svg +1 -0
  82. package/docs/icons/delete.svg +1 -0
  83. package/docs/icons/drag-handle.svg +1 -0
  84. package/docs/icons/drawing2.svg +124 -0
  85. package/docs/icons/edit.svg +1 -0
  86. package/docs/icons/error.svg +1 -0
  87. package/docs/icons/export-file.svg +1 -0
  88. package/docs/icons/file-text.svg +1 -0
  89. package/docs/icons/file.svg +1 -0
  90. package/docs/icons/filter-off.svg +1 -0
  91. package/docs/icons/filter.svg +1 -0
  92. package/docs/icons/first.svg +1 -0
  93. package/docs/icons/folder-clear.svg +1 -0
  94. package/docs/icons/folder-create.svg +1 -0
  95. package/docs/icons/folder-open.svg +1 -0
  96. package/docs/icons/folder.svg +1 -0
  97. package/docs/icons/hide.svg +1 -0
  98. package/docs/icons/image.svg +1 -0
  99. package/docs/icons/label-add.svg +1 -0
  100. package/docs/icons/label.svg +1 -0
  101. package/docs/icons/last.svg +1 -0
  102. package/docs/icons/menu.svg +1 -0
  103. package/docs/icons/mode-auto.svg +1 -0
  104. package/docs/icons/mode-dark.svg +1 -0
  105. package/docs/icons/mode-light.svg +1 -0
  106. package/docs/icons/open-in-browser.svg +1 -0
  107. package/docs/icons/pause.svg +1 -0
  108. package/docs/icons/play.svg +1 -0
  109. package/docs/icons/refresh.svg +1 -0
  110. package/docs/icons/remove.svg +1 -0
  111. package/docs/icons/save.svg +1 -0
  112. package/docs/icons/search.svg +1 -0
  113. package/docs/icons/settings.svg +1 -0
  114. package/docs/icons/show.svg +1 -0
  115. package/docs/icons/storage.svg +1 -0
  116. package/docs/icons/table-visibility.svg +1 -0
  117. package/docs/icons/tag.svg +1 -0
  118. package/docs/icons/tools.svg +1 -0
  119. package/docs/icons/trash-x.svg +1 -0
  120. package/docs/icons/warning.svg +1 -0
  121. package/docs/index.html +28 -21
  122. package/docs/kempo-hljs.css +1 -0
  123. package/docs/media/civic.jpg +0 -0
  124. package/docs/media/corvette.jpg +0 -0
  125. package/docs/media/evo.jpg +0 -0
  126. package/docs/media/gtr.jpg +0 -0
  127. package/docs/media/nsx.jpg +0 -0
  128. package/docs/nav.inc.html +67 -0
  129. package/docs/nav.inc.js +4 -0
  130. package/{config/production.json → docs/prod.config.json} +20 -16
  131. package/docs/src/components/Accordion.js +36 -0
  132. package/docs/src/components/Card.js +37 -0
  133. package/docs/src/components/Collapsible.js +41 -0
  134. package/docs/src/components/ContentSlider.js +44 -0
  135. package/docs/src/components/Dialog.js +113 -0
  136. package/docs/src/components/FocusCapture.js +7 -0
  137. package/docs/src/components/HybridComponent.js +1 -0
  138. package/docs/src/components/Icon.js +10 -0
  139. package/docs/src/components/Import.js +1 -0
  140. package/docs/src/components/LightComponent.js +1 -0
  141. package/docs/src/components/PersistantCollapsible.js +1 -0
  142. package/docs/src/components/PhotoViewer.js +135 -0
  143. package/docs/src/components/Resize.js +96 -0
  144. package/docs/src/components/ShadowComponent.js +1 -0
  145. package/docs/src/components/ShowMore.js +42 -0
  146. package/docs/src/components/SideMenu.js +97 -0
  147. package/docs/src/components/Split.js +84 -0
  148. package/docs/src/components/Tabs.js +155 -0
  149. package/docs/src/components/Tags.js +69 -0
  150. package/docs/src/components/ThemeSwitcher.js +23 -0
  151. package/docs/src/components/Timestamp.js +1 -0
  152. package/docs/src/lit-all.min.js +120 -0
  153. package/docs/src/utils/debounce.js +1 -0
  154. package/docs/src/utils/drag.js +1 -0
  155. package/docs/src/utils/formatTimestamp.js +1 -0
  156. package/docs/src/utils/propConverters.js +1 -0
  157. package/docs/src/utils/watchWindowSize.js +1 -0
  158. package/docs/styles.css +6 -0
  159. package/docs/utils/debounce.html +78 -0
  160. package/docs/utils/drag.html +104 -0
  161. package/docs/utils/formatTimestamp.html +114 -0
  162. package/docs/utils/propConverters.html +132 -0
  163. package/docs/utils/watchWindowSize.html +166 -0
  164. package/icons/add.svg +1 -0
  165. package/icons/arrow-back.svg +1 -0
  166. package/icons/arrow-down-double.svg +1 -0
  167. package/icons/arrow-down.svg +1 -0
  168. package/icons/arrow-forward.svg +1 -0
  169. package/icons/arrow-up-double.svg +1 -0
  170. package/icons/arrow-up.svg +1 -0
  171. package/icons/cards.svg +1 -0
  172. package/icons/check.svg +1 -0
  173. package/icons/chevron-left.svg +1 -0
  174. package/icons/chevron-right.svg +1 -0
  175. package/icons/close.svg +2 -0
  176. package/icons/compare.svg +1 -0
  177. package/icons/delete.svg +1 -0
  178. package/icons/drag-handle.svg +1 -0
  179. package/icons/drawing2.svg +124 -0
  180. package/icons/edit.svg +1 -0
  181. package/icons/error.svg +1 -0
  182. package/icons/export-file.svg +1 -0
  183. package/icons/file-text.svg +1 -0
  184. package/icons/file.svg +1 -0
  185. package/icons/filter-off.svg +1 -0
  186. package/icons/filter.svg +1 -0
  187. package/icons/first.svg +1 -0
  188. package/icons/folder-clear.svg +1 -0
  189. package/icons/folder-create.svg +1 -0
  190. package/icons/folder-open.svg +1 -0
  191. package/icons/folder.svg +1 -0
  192. package/icons/hide.svg +1 -0
  193. package/icons/image.svg +1 -0
  194. package/icons/label-add.svg +1 -0
  195. package/icons/label.svg +1 -0
  196. package/icons/last.svg +1 -0
  197. package/icons/menu.svg +1 -0
  198. package/icons/mode-auto.svg +1 -0
  199. package/icons/mode-dark.svg +1 -0
  200. package/icons/mode-light.svg +1 -0
  201. package/icons/open-in-browser.svg +1 -0
  202. package/icons/pause.svg +1 -0
  203. package/icons/play.svg +1 -0
  204. package/icons/refresh.svg +1 -0
  205. package/icons/remove.svg +1 -0
  206. package/icons/save.svg +1 -0
  207. package/icons/search.svg +1 -0
  208. package/icons/settings.svg +1 -0
  209. package/icons/show.svg +1 -0
  210. package/icons/storage.svg +1 -0
  211. package/icons/table-visibility.svg +1 -0
  212. package/icons/tag.svg +1 -0
  213. package/icons/tools.svg +1 -0
  214. package/icons/trash-x.svg +1 -0
  215. package/icons/warning.svg +1 -0
  216. package/package.json +2 -2
  217. package/scripts/build.js +109 -138
  218. package/scripts/docs.js +62 -60
  219. package/src/components/Accordion.js +229 -0
  220. package/src/components/Card.js +66 -0
  221. package/src/components/Collapsible.js +109 -0
  222. package/src/components/ContentSlider.js +205 -0
  223. package/src/components/Dialog.js +368 -0
  224. package/src/components/FocusCapture.js +23 -0
  225. package/src/components/HybridComponent.js +40 -40
  226. package/src/components/Icon.js +155 -0
  227. package/src/components/Import.js +104 -0
  228. package/src/components/LightComponent.js +32 -32
  229. package/src/components/PersistantCollapsible.js +69 -0
  230. package/src/components/PhotoViewer.js +368 -0
  231. package/src/components/Resize.js +210 -0
  232. package/src/components/ShadowComponent.js +32 -17
  233. package/src/components/ShowMore.js +109 -0
  234. package/src/components/SideMenu.js +167 -0
  235. package/src/components/Sortable.js +193 -0
  236. package/src/components/Split.js +192 -0
  237. package/src/components/Table.js +1202 -0
  238. package/src/components/Tabs.js +428 -0
  239. package/src/components/Tags.js +253 -0
  240. package/src/components/ThemeSwitcher.js +108 -0
  241. package/src/components/Timestamp.js +31 -0
  242. package/src/components/Toast.js +454 -0
  243. package/src/components/Toggle.js +173 -0
  244. package/src/components/tableControls/DeleteRecord.js +29 -0
  245. package/src/components/tableControls/Edit.js +88 -0
  246. package/src/components/tableControls/ExportCSV.js +71 -0
  247. package/src/components/tableControls/ExportJson.js +55 -0
  248. package/src/components/tableControls/FieldSortHide.js +76 -0
  249. package/src/components/tableControls/Filters.js +114 -0
  250. package/src/components/tableControls/FirstPage.js +65 -0
  251. package/src/components/tableControls/HiddenCount.js +45 -0
  252. package/src/components/tableControls/Hide.js +34 -0
  253. package/src/components/tableControls/LastPage.js +65 -0
  254. package/src/components/tableControls/NextPage.js +65 -0
  255. package/src/components/tableControls/PageSelect.js +109 -0
  256. package/src/components/tableControls/PageSize.js +68 -0
  257. package/src/components/tableControls/PrevPage.js +65 -0
  258. package/src/components/tableControls/Search.js +58 -0
  259. package/src/components/tableControls/ShowAll.js +34 -0
  260. package/src/components/tableControls/TableControl.js +105 -0
  261. package/src/kempo-hljs.css +146 -0
  262. package/src/utils/debounce.js +9 -0
  263. package/src/utils/drag.js +80 -0
  264. package/src/utils/formatTimestamp.js +27 -0
  265. package/src/utils/propConverters.js +11 -0
  266. package/src/utils/toTitleCase.js +9 -0
  267. package/src/utils/watchWindowSize.js +16 -0
  268. package/tests/HybridComponent.browser-test.js +214 -214
  269. package/tests/LightComponent.browser-test.js +169 -169
  270. package/tests/ShadowComponent.browser-test.js +130 -130
  271. package/config/development.json +0 -14
  272. package/docs/components/ShadowComponent.js +0 -1
  273. package/src/utils/cli.js +0 -43
  274. package/src/utils/fs-utils.js +0 -41
  275. /package/{docs → dist/src}/components/HybridComponent.js +0 -0
  276. /package/{docs → dist/src}/components/LightComponent.js +0 -0
  277. /package/docs/{utils → src/utils}/cli.js +0 -0
  278. /package/docs/{utils → src/utils}/fs-utils.js +0 -0
package/docs/components/tabs.html ADDED
@@ -0,0 +1,180 @@
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>Tabs - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <h1 class="ta-center">Tabs</h1>
21
+ <main>
22
+ <details class="b r mb">
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#tabSpacers">Tab Spacers</a><br />
28
+ <a href="#scrollingTabs">Scrolling Tabs</a><br />
29
+ <a href="#fixedHeight">Fixed Height</a><br />
30
+
31
+ <h6 class="mt">JavaScript Reference</h6>
32
+ <a href="#constructor">Constructor</a><br />
33
+ <a href="#requirements">Requirements</a><br />
34
+ <a href="#properties">Properties</a><br />
35
+ <a href="#methods">Methods</a><br />
36
+ <a href="#events">Events</a><br />
37
+ </div>
38
+ </details>
39
+
40
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
41
+ <p>Create tabs using the <code>k-tabs</code> component. Add tabs using the <code>k-tab</code> component and tab contents using the <code>k-tab-content</code> component. Use the <code>for</code> attribute on the <code>k-tab</code> component to link it to the corresponding <code>k-tab-content</code> component.</p>
42
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>&gt;</span>JavaScript<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>&gt;</span><br /> HTML Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>&gt;</span><br /> JavaScript Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
43
+ <k-tabs>
44
+ <k-tab for="html">HTML</k-tab>
45
+ <k-tab for="js">JavaScript</k-tab>
46
+ <k-tab-content name="html">
47
+ <p>HTML Content</p>
48
+ </k-tab-content>
49
+ <k-tab-content name="js">
50
+ <p>JavaScript Content</p>
51
+ </k-tab-content>
52
+ </k-tabs>
53
+
54
+ <h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
55
+ <p>Use the <code>k-tab-spacer</code> component to add a flexible space between tabs.</p>
56
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"html"</span>&gt;</span>HTML<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-spacer</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"js"</span>&gt;</span>JavaScript<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"html"</span>&gt;</span><br /> HTML Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"js"</span>&gt;</span><br /> JavaScript Content<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
57
+ <k-tabs>
58
+ <k-tab for="html">HTML</k-tab>
59
+ <k-tab-spacer></k-tab-spacer>
60
+ <k-tab for="js">JavaScript</k-tab>
61
+ <k-tab-content name="html">
62
+ <p>HTML Content</p>
63
+ </k-tab-content>
64
+ <k-tab-content name="js">
65
+ <p>JavaScript Content</p>
66
+ </k-tab-content>
67
+ </k-tabs>
68
+
69
+ <h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
70
+ <p>When there are many tabs, they will scroll horizontally with gradient indicators showing when more tabs are available.</p>
71
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span>&gt;</span>
72
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab1"</span>&gt;</span>Tab 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
73
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab2"</span>&gt;</span>Tab 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
74
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>&gt;</span>Tab 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
75
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab4"</span>&gt;</span>Tab 4<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
76
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab5"</span>&gt;</span>Tab 5<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
77
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab6"</span>&gt;</span>Tab 6<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
78
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab7"</span>&gt;</span>Tab 7<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
79
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab8"</span>&gt;</span>Tab 8<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
80
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab9"</span>&gt;</span>Tab 9<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
81
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab10"</span>&gt;</span>Tab 10<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span>
82
+ <span class="hljs-comment">&lt;!-- Tab Contents --&gt;</span>
83
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab1"</span>&gt;</span>Content 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
84
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab2"</span>&gt;</span>Content 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
85
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab3"</span>&gt;</span>Content 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
86
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab4"</span>&gt;</span>Content 4<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
87
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab5"</span>&gt;</span>Content 5<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
88
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab6"</span>&gt;</span>Content 6<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
89
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab7"</span>&gt;</span>Content 7<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
90
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab8"</span>&gt;</span>Content 8<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
91
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab9"</span>&gt;</span>Content 9<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
92
+ <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab10"</span>&gt;</span>Content 10<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span>
93
+ <span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
94
+ <k-tabs>
95
+ <k-tab for="tab1">Long Tab Name 1</k-tab>
96
+ <k-tab for="tab2">Long Tab Name 2</k-tab>
97
+ <k-tab for="tab3">Long Tab Name 3</k-tab>
98
+ <k-tab for="tab4">Long Tab Name 4</k-tab>
99
+ <k-tab for="tab5">Long Tab Name 5</k-tab>
100
+ <k-tab for="tab6">Long Tab Name 6</k-tab>
101
+ <k-tab for="tab7">Long Tab Name 7</k-tab>
102
+ <k-tab for="tab8">Long Tab Name 8</k-tab>
103
+ <k-tab for="tab9">Long Tab Name 9</k-tab>
104
+ <k-tab for="tab10">Long Tab Name 10</k-tab>
105
+ <k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
106
+ <k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
107
+ <k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
108
+ <k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
109
+ <k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
110
+ <k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
111
+ <k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
112
+ <k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
113
+ <k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
114
+ <k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
115
+ </k-tabs>
116
+
117
+ <h3 id="fixedHeight"><a href="#fixedHeight" class="no-link">Fixed Height</a></h3>
118
+ <p>Use the <code>fixed-height</code> attribute to make the tabs component fill its container height and enable content scrolling.</p>
119
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span> <span class="hljs-attr">fixed-height</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed1"</span>&gt;</span>Tab 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed2"</span>&gt;</span>Tab 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed1"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>This content will scroll if it's too long.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed2"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Another tab that is not tall enough.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
120
+ <k-tabs fixed-height="true" style="height: 200px">
121
+ <k-tab for="fixed1">Tab 1</k-tab>
122
+ <k-tab for="fixed2">Tab 2</k-tab>
123
+ <k-tab-content name="fixed1">
124
+ <p>This content will scroll if it's too long.</p>
125
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
126
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
127
+ <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
128
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
129
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
130
+ <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
131
+ </k-tab-content>
132
+ <k-tab-content name="fixed2">
133
+ <p>Another tab that is not tall enough.</p>
134
+ <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
135
+ </k-tab-content>
136
+ </k-tabs>
137
+
138
+ <h2 id="jsRef">JavaScript Reference</h2>
139
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
140
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
141
+ <h5><code>new Tabs()</code></h5>
142
+
143
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
144
+ <ul>
145
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
146
+ </ul>
147
+
148
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
149
+ <h5><code>active<i>: string</i></code></h5>
150
+ <p>The name of the active tab. Syncs to <code>active</code> attribute.</p>
151
+ <h5><code>fixedHeight<i>: boolean</i></code></h5>
152
+ <p>Whether the tabs component uses fixed height mode. Syncs to <code>fixed-height</code> attribute.</p>
153
+ <h5><code>contents<i>: TabContent[]</i></code></h5>
154
+ <p>Returns an array of all tab content elements.</p>
155
+ <h5><code>tabs<i>: Tab[]</i></code></h5>
156
+ <p>Returns an array of all tab elements.</p>
157
+
158
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
159
+ <h5><code>getActiveTab()<i>: Tab</i></code></h5>
160
+ <p>Returns the currently active tab.</p>
161
+ <h5><code>getTab(id)<i>: Tab</i></code></h5>
162
+ <p>Returns the tab with the specified id.</p>
163
+ <h5><code>getActiveContent()<i>: TabContent</i></code></h5>
164
+ <p>Returns the currently active tab content.</p>
165
+ <h5><code>getContent(id)<i>: TabContent</i></code></h5>
166
+ <p>Returns the tab content with the specified id.</p>
167
+ <h5><code>updateActiveElements()<i>: void</i></code></h5>
168
+ <p>Updates the active state of tabs and content based on the current active property.</p>
169
+ <h5><code>updateScrollIndicators()<i>: void</i></code></h5>
170
+ <p>Updates the visibility of scroll indicators based on tab overflow.</p>
171
+
172
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
173
+ <h5><code>tab</code></h5>
174
+ <p>Fired when the active tab changes. Detail contains <code>{ tab }</code> with the name of the new active tab.</p>
175
+ </main>
176
+ <div style="height:33vh"></div>
177
+ <script type="module" src="../src/components/Tabs.js"></script>
178
+ <script type="module" src="../src/components/Import.js"></script>
179
+ </body>
180
+ </html>
package/docs/components/tags.html ADDED
@@ -0,0 +1,110 @@
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>Tags - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <h1 class="ta-center">Tags</h1>
21
+ <main>
22
+ <details class="b r mb">
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#allowedTags">Allowed Tags</a><br />
28
+ <a href="#disallowedTags">Disallowed Tags</a><br />
29
+
30
+ <h6 class="mt">JavaScript Reference</h6>
31
+ <a href="#constructor">Constructor</a><br />
32
+ <a href="#requirements">Requirements</a><br />
33
+ <a href="#properties">Properties</a><br />
34
+ <a href="#methods">Methods</a><br />
35
+ <a href="#events">Events</a><br />
36
+ </div>
37
+ </details>
38
+
39
+ <h3>Description</h3>
40
+ <p>The <code>Tags</code> component allows users to add and remove tags. It extends the <a href="./shadow-component.html">ShadowComponent</a> class.</p>
41
+
42
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
43
+ <p>Use the <code>Tags</code> component to allow users to add and remove tags. Tags can be added by typing them into the input field and pressing Enter or by pasting a comma-separated list of tags. You can delete a tag by clicking on it.</p>
44
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
45
+ <k-tags>
46
+ <label>Tags</label>
47
+ </k-tags>
48
+
49
+ <h3 id="allowedTags"><a href="#allowedTags" class="no-link">Allowed Tags</a></h3>
50
+ <p>Use the <code>allowedTags</code> attribute to specify a comma-separated list of allowed tags. Only these tags can be added.</p>
51
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Allowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
52
+ <k-tags allowed-tags="tag1,tag2,tag3">
53
+ <label>Allowed Tags</label>
54
+ </k-tags>
55
+
56
+ <h3 id="disallowedTags"><a href="#disallowedTags" class="no-link">Disallowed Tags</a></h3>
57
+ <p>Use the <code>disallowedTags</code> attribute to specify a comma-separated list of disallowed tags. These tags cannot be added.</p>
58
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tags</span> <span class="hljs-attr">disallowed-tags</span>=<span class="hljs-string">"tag1,tag2,tag3"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Disallowed Tags<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tags</span>&gt;</span></code></pre>
59
+ <k-tags disallowed-tags="tag1,tag2,tag3">
60
+ <label>Disallowed Tags</label>
61
+ </k-tags>
62
+
63
+ <h2 id="jsRef">JavaScript Reference</h2>
64
+
65
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
66
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
67
+ <h5>
68
+ <code>new Tags()</code>
69
+ </h5>
70
+
71
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
72
+ <ul>
73
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
74
+ </ul>
75
+
76
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
77
+ <h5><code>value<i>: string</i></code></h5>
78
+ <p>A comma-separated list of tags. Syncs with the <code>value</code> attribute.</p>
79
+ <h5><code>allowedTags<i>: string</i></code></h5>
80
+ <p>A comma-separated list of allowed tags. If specified, only these tags can be added. Syncs with the <code>allowed-tags</code> attribute.</p>
81
+ <h5><code>disallowedTags<i>: string</i></code></h5>
82
+ <p>A comma-separated list of disallowed tags. If specified, these tags cannot be added. Syncs with the <code>disallowed-tags</code> attribute.</p>
83
+
84
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
85
+ <h5><code>addTag(tag)<i>: void</i></code></h5>
86
+ <p>Adds a tag to the list of tags.</p>
87
+ <h5><code>removeTag(tag)<i>: void</i></code></h5>
88
+ <p>Removes a tag from the list of tags.</p>
89
+ <h5><code>validateTags()<i>: string</i></code></h5>
90
+ <p>Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a comma-separated string.</p>
91
+ <h5><code>renderTags()<i>: Promise&lt;void&gt;</i></code></h5>
92
+ <p>Re-renders the tag elements in the component.</p>
93
+
94
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
95
+ <h5><code>change</code></h5>
96
+ <p>Fired when the value changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
97
+ <h5><code>addtag</code></h5>
98
+ <p>Fired when a tag is added. Detail contains <code>{ tag }</code>.</p>
99
+ <h5><code>removetag</code></h5>
100
+ <p>Fired when a tag is removed. Detail contains <code>{ tag }</code>.</p>
101
+ <h5><code>allowedtagschange</code></h5>
102
+ <p>Fired when the allowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
103
+ <h5><code>disallowedtagschange</code></h5>
104
+ <p>Fired when the disallowed tags list changes. Detail contains <code>{ oldValue, newValue }</code>.</p>
105
+
106
+ </main>
107
+ <script type="module" src="../src/components/Import.js"></script>
108
+ <script type="module" src="../src/components/Tags.js"></script>
109
+ </body>
110
+ </html>
package/docs/components/theme-switcher.html ADDED
@@ -0,0 +1,126 @@
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>ThemeSwitcher - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <h1 class="ta-center">ThemeSwitcher</h1>
21
+ <main>
22
+ <details class="b r mb">
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#customPadding">Custom Padding</a><br />
28
+
29
+ <h6 class="mt">JavaScript Reference</h6>
30
+ <a href="#constructor">Constructor</a><br />
31
+ <a href="#requirements">Requirements</a><br />
32
+ <a href="#properties">Properties</a><br />
33
+ <a href="#cssCustomProperties">CSS Custom Properties</a><br />
34
+ <a href="#methods">Methods</a><br />
35
+ <a href="#staticMethods">Static Methods</a><br />
36
+ </div>
37
+ </details>
38
+
39
+ <h3>Description</h3>
40
+ <p>The <code>ThemeSwitcher</code> component allows users to switch between different themes (auto, light, dark). It extends the <a href="./component.html">ShadowComponent</a> class and automatically saves the selected theme to local storage, applies it to the document, and synchronizes across browser tabs.</p>
41
+
42
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
43
+ <p>Use the <code>ThemeSwitcher</code> component to allow users to cycle through themes. Clicking the button cycles through auto → light → dark → auto. The component automatically detects the user's system preference when in auto mode.</p>
44
+
45
+ <div class="row -mx mb">
46
+ <div class="col d-span-6 m-span-12 px">
47
+ <k-card label="HTML">
48
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-theme-switcher</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-theme-switcher</span>&gt;</span></code></pre>
49
+ </k-card>
50
+ </div>
51
+ <div class="col d-span-6 m-span-12 px">
52
+ <k-card label="Output">
53
+ <k-theme-switcher></k-theme-switcher>
54
+ </k-card>
55
+ </div>
56
+ </div>
57
+
58
+ <h3 id="customPadding"><a href="#customPadding" class="no-link">Custom Padding</a></h3>
59
+ <p>You can customize the button padding by setting the <code>--padding</code> CSS custom property. The default padding uses <code>var(--spacer, 1rem)</code>.</p>
60
+
61
+ <div class="row -mx mb">
62
+ <div class="col d-span-6 m-span-12 px">
63
+ <k-card label="HTML">
64
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--padding: 0.5rem;"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-theme-switcher</span>&gt;</span><br/><span class="hljs-tag">&lt;<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--padding: 2rem;"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-theme-switcher</span>&gt;</span></code></pre>
65
+ </k-card>
66
+ </div>
67
+ <div class="col d-span-6 m-span-12 px">
68
+ <k-card label="Output">
69
+ <k-theme-switcher style="--padding: 0.5rem;"></k-theme-switcher>
70
+ <k-theme-switcher style="--padding: 2rem;"></k-theme-switcher>
71
+ </k-card>
72
+ </div>
73
+ </div>
74
+
75
+ <h2 id="jsRef">JavaScript Reference</h2>
76
+
77
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
78
+ <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
79
+ <h5>
80
+ <code>new ThemeSwitcher()</code>
81
+ </h5>
82
+
83
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
84
+ <ul>
85
+ <li><a href="./component.html">ShadowComponent</a></li>
86
+ <li><a href="./icon.html">Icon</a></li>
87
+ </ul>
88
+
89
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
90
+ <h5><code>currentTheme<i>: string</i></code></h5>
91
+ <p>Gets or sets the current theme. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This property is reactive and will trigger a re-render when changed. Syncs to <code>current-theme</code> attribute.</p>
92
+
93
+ <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
94
+ <h5><code>--padding<i>: length</i></code></h5>
95
+ <p>Controls the padding of the theme switcher button. Defaults to <code>var(--spacer, 1rem)</code>. You can override this to customize the button's spacing.</p>
96
+ <pre><code class="hljs css"><span class="hljs-selector-tag">k-theme-switcher</span> {
97
+ <span class="hljs-attribute">--padding</span>: <span class="hljs-number">0.5rem</span>;
98
+ }</code></pre>
99
+
100
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
101
+ <p>The <code>ThemeSwitcher</code> class does not introduce any new public methods beyond those provided by the <a href="./component.html">ShadowComponent</a> class.</p>
102
+
103
+ <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
104
+ <h5><code>static setTheme(theme)<i>: void</i></code></h5>
105
+ <p>Sets the specified theme and saves it to local storage. Also applies the theme to the document element and dispatches a storage event for cross-tab synchronization.</p>
106
+ <ul>
107
+ <li><strong>theme</strong> <code>string</code> - The theme to set. Must be one of: <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code></li>
108
+ </ul>
109
+ <pre><code class="hljs javascript"><span class="hljs-comment">// Programmatically set theme to dark mode</span>
110
+ <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">setTheme</span>(<span class="hljs-string">'dark'</span>);</code></pre>
111
+
112
+ <h5><code>static getCurrentTheme()<i>: string</i></code></h5>
113
+ <p>Gets the current theme from the document attribute or local storage. Returns <code>"auto"</code> if no theme is set.</p>
114
+ <pre><code class="hljs javascript"><span class="hljs-comment">// Get the current theme</span>
115
+ <span class="hljs-keyword">const</span> currentTheme = <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">getCurrentTheme</span>();
116
+ <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(currentTheme); <span class="hljs-comment">// "auto", "light", or "dark"</span></code></pre>
117
+
118
+ <h3 id="themeDetection"><a href="#themeDetection" class="no-link">Automatic Theme Detection</a></h3>
119
+ <p>When the theme is set to <code>"auto"</code>, the component automatically detects the user's system preference using <code>prefers-color-scheme</code> media query. The detected theme is applied to the document element as an <code>auto-theme</code> attribute.</p>
120
+ <p>The component also synchronizes theme changes across browser tabs using the storage event, ensuring a consistent user experience.</p>
121
+
122
+ </main>
123
+ <script type="module" src="../src/components/Import.js"></script>
124
+ <script type="module" src="../src/components/ThemeSwitcher.js"></script>
125
+ </body>
126
+ </html>
package/docs/components/timestamp.html ADDED
@@ -0,0 +1,82 @@
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>Timestamp - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <h1 class="ta-center">Timestamp</h1>
21
+ <main>
22
+ <details class="b r mb">
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#customFormat">Custom Format</a><br />
28
+
29
+ <h6 class="mt">JavaScript Reference</h6>
30
+ <a href="#constructor">Constructor</a><br />
31
+ <a href="#requirements">Requirements</a><br />
32
+ <a href="#properties">Properties</a><br />
33
+ <a href="#methods">Methods</a><br />
34
+ </div>
35
+ </details>
36
+
37
+ <h3>Description</h3>
38
+ <p>The <code>Timestamp</code> component displays a formatted timestamp using custom format tokens. It extends the ShadowComponent class for encapsulated styling.</p>
39
+
40
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
41
+ <p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp using the default format or a custom format with tokens.</p>
42
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
43
+ <k-timestamp timestamp="1633024800000"></k-timestamp>
44
+
45
+ <h3 id="customFormat"><a href="#customFormat" class="no-link">Custom Format</a></h3>
46
+ <p>Use the <code>format</code> attribute to specify a custom format using tokens like <code>YYYY</code> (4-digit year), <code>MM</code> (2-digit month), <code>DD</code> (2-digit day), <code>hh</code> (2-digit hour), <code>mm</code> (2-digit minute), and <code>ss</code> (2-digit second).</p>
47
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"MM/DD/YYYY"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
48
+ <k-timestamp timestamp="1633024800000" format="MM/DD/YYYY"></k-timestamp>
49
+
50
+ <h3 id="timeFormat"><a href="#timeFormat" class="no-link">Time Format</a></h3>
51
+ <p>Display time with custom formatting using hour, minute, and second tokens.</p>
52
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"1633024800000"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hh:mm:ss"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
53
+ <k-timestamp timestamp="1633024800000" format="hh:mm:ss"></k-timestamp>
54
+
55
+ <h2 id="jsRef">JavaScript Reference</h2>
56
+
57
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
58
+ <h6>Extends ShadowComponent</h6>
59
+
60
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
61
+ <ul>
62
+ <li>ShadowComponent</li>
63
+ <li><a href="../utils/formatTimestamp.js">formatTimestamp Utility Function</a></li>
64
+ </ul>
65
+
66
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
67
+ <h5><code>timestamp<i>: number</i></code></h5>
68
+ <p>The timestamp to be formatted and displayed. Syncs to <code>timestamp</code> attribute.</p>
69
+ <h5><code>format<i>: string</i></code></h5>
70
+ <p>The format to be used for formatting the timestamp using tokens like YYYY, MM, DD, hh, mm, ss. If not provided, uses the default format. Syncs to <code>format</code> attribute.</p>
71
+ <h5><code>locale<i>: string</i></code></h5>
72
+ <p>The locale to be used for formatting the timestamp. Syncs to <code>locale</code> attribute.</p>
73
+
74
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
75
+ <p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the ShadowComponent class.</p>
76
+
77
+ </main>
78
+ <div style="height:33vh"></div>
79
+ <script type="module" src="../src/components/Import.js"></script>
80
+ <script type="module" src="../src/components/Timestamp.js"></script>
81
+ </body>
82
+ </html>