kempo-ui 0.0.2 → 0.0.3

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 (193) hide show
  1. package/.github/copilot-instructions.md +149 -149
  2. package/.github/workflows/publish-npm.yml +44 -44
  3. package/CONTRIBUTING.md +149 -149
  4. package/README.md +0 -0
  5. package/dist/kempo-vars.css +0 -0
  6. package/dist/src/components/FocusCapture.js +7 -0
  7. package/dist/src/components/Icon.js +10 -0
  8. package/dist/src/components/Import.js +1 -0
  9. package/dist/src/components/ShadowComponent.js +1 -0
  10. package/dist/src/components/SideMenu.js +97 -0
  11. package/dist/src/lit-all.min.js +120 -0
  12. package/docs/components/accordion.html +122 -0
  13. package/docs/components/card.html +91 -0
  14. package/docs/components/component.html +90 -0
  15. package/docs/components/content-slider.html +193 -0
  16. package/docs/components/dialog.html +245 -0
  17. package/docs/components/directory-viewer.html +90 -0
  18. package/docs/components/focus-capture.html +68 -0
  19. package/docs/components/icon.html +161 -0
  20. package/docs/components/import.html +78 -0
  21. package/docs/components/lazy-component.html +84 -0
  22. package/docs/components/reactive-component.html +69 -0
  23. package/docs/components/reactive-lazy-component.html +69 -0
  24. package/docs/components/resize.html +152 -0
  25. package/docs/components/search.html +102 -0
  26. package/docs/components/show-more.html +123 -0
  27. package/docs/components/side-menu.html +168 -0
  28. package/docs/components/sortable.html +96 -0
  29. package/docs/components/split.html +126 -0
  30. package/docs/components/table.html +312 -0
  31. package/docs/components/tableControls.html +77 -0
  32. package/docs/components/tableCustomFields.html +113 -0
  33. package/docs/components/tableFetchRecords.html +114 -0
  34. package/docs/components/tableFieldSortHide.html +75 -0
  35. package/docs/components/tablePagination.html +100 -0
  36. package/docs/components/tableRecordEditing.html +144 -0
  37. package/docs/components/tableRecordFiltering.html +75 -0
  38. package/docs/components/tableRecordHiding.html +80 -0
  39. package/docs/components/tableRecordSearching.html +75 -0
  40. package/docs/components/tableRecordSelection.html +75 -0
  41. package/docs/components/tableRowControls.html +78 -0
  42. package/docs/components/tableSorting.html +73 -0
  43. package/docs/components/tabs.html +163 -0
  44. package/docs/components/tags.html +94 -0
  45. package/docs/components/theme-switcher.html +129 -0
  46. package/docs/components/timestamp.html +86 -0
  47. package/docs/components/toast.html +328 -0
  48. package/docs/components/toggle.html +155 -0
  49. package/docs/dev.config.json +20 -0
  50. package/docs/icons/add.svg +1 -0
  51. package/docs/icons/arrow-back.svg +1 -0
  52. package/docs/icons/arrow-down-double.svg +1 -0
  53. package/docs/icons/arrow-down.svg +1 -0
  54. package/docs/icons/arrow-forward.svg +1 -0
  55. package/docs/icons/arrow-up-double.svg +1 -0
  56. package/docs/icons/arrow-up.svg +1 -0
  57. package/docs/icons/cards.svg +1 -0
  58. package/docs/icons/check.svg +1 -0
  59. package/docs/icons/chevron-left.svg +1 -0
  60. package/docs/icons/chevron-right.svg +1 -0
  61. package/docs/icons/close.svg +2 -0
  62. package/docs/icons/compare.svg +1 -0
  63. package/docs/icons/delete.svg +1 -0
  64. package/docs/icons/drag-handle.svg +1 -0
  65. package/docs/icons/drawing2.svg +124 -0
  66. package/docs/icons/edit.svg +1 -0
  67. package/docs/icons/error.svg +1 -0
  68. package/docs/icons/export-file.svg +1 -0
  69. package/docs/icons/file-text.svg +1 -0
  70. package/docs/icons/file.svg +1 -0
  71. package/docs/icons/filter-off.svg +1 -0
  72. package/docs/icons/filter.svg +1 -0
  73. package/docs/icons/first.svg +1 -0
  74. package/docs/icons/folder-clear.svg +1 -0
  75. package/docs/icons/folder-create.svg +1 -0
  76. package/docs/icons/folder-open.svg +1 -0
  77. package/docs/icons/folder.svg +1 -0
  78. package/docs/icons/hide.svg +1 -0
  79. package/docs/icons/image.svg +1 -0
  80. package/docs/icons/label-add.svg +1 -0
  81. package/docs/icons/label.svg +1 -0
  82. package/docs/icons/last.svg +1 -0
  83. package/docs/icons/menu.svg +1 -0
  84. package/docs/icons/mode-auto.svg +1 -0
  85. package/docs/icons/mode-dark.svg +1 -0
  86. package/docs/icons/mode-light.svg +1 -0
  87. package/docs/icons/open-in-browser.svg +1 -0
  88. package/docs/icons/pause.svg +1 -0
  89. package/docs/icons/play.svg +1 -0
  90. package/docs/icons/refresh.svg +1 -0
  91. package/docs/icons/remove.svg +1 -0
  92. package/docs/icons/save.svg +1 -0
  93. package/docs/icons/search.svg +1 -0
  94. package/docs/icons/settings.svg +1 -0
  95. package/docs/icons/show.svg +1 -0
  96. package/docs/icons/storage.svg +1 -0
  97. package/docs/icons/table-visibility.svg +1 -0
  98. package/docs/icons/tag.svg +1 -0
  99. package/docs/icons/tools.svg +1 -0
  100. package/docs/icons/trash-x.svg +1 -0
  101. package/docs/icons/warning.svg +1 -0
  102. package/docs/index.html +28 -21
  103. package/docs/nav.inc.html +73 -0
  104. package/docs/nav.inc.js +4 -0
  105. package/{config/production.json → docs/prod.config.json} +20 -16
  106. package/docs/src/components/FocusCapture.js +7 -0
  107. package/docs/src/components/HybridComponent.js +1 -0
  108. package/docs/src/components/Icon.js +10 -0
  109. package/docs/src/components/Import.js +1 -0
  110. package/docs/src/components/LightComponent.js +1 -0
  111. package/docs/src/components/ShadowComponent.js +1 -0
  112. package/docs/src/components/SideMenu.js +97 -0
  113. package/docs/src/lit-all.min.js +120 -0
  114. package/docs/src/utils/cli.js +1 -0
  115. package/docs/src/utils/fs-utils.js +1 -0
  116. package/docs/styles.css +6 -0
  117. package/icons/add.svg +1 -0
  118. package/icons/arrow-back.svg +1 -0
  119. package/icons/arrow-down-double.svg +1 -0
  120. package/icons/arrow-down.svg +1 -0
  121. package/icons/arrow-forward.svg +1 -0
  122. package/icons/arrow-up-double.svg +1 -0
  123. package/icons/arrow-up.svg +1 -0
  124. package/icons/cards.svg +1 -0
  125. package/icons/check.svg +1 -0
  126. package/icons/chevron-left.svg +1 -0
  127. package/icons/chevron-right.svg +1 -0
  128. package/icons/close.svg +2 -0
  129. package/icons/compare.svg +1 -0
  130. package/icons/delete.svg +1 -0
  131. package/icons/drag-handle.svg +1 -0
  132. package/icons/drawing2.svg +124 -0
  133. package/icons/edit.svg +1 -0
  134. package/icons/error.svg +1 -0
  135. package/icons/export-file.svg +1 -0
  136. package/icons/file-text.svg +1 -0
  137. package/icons/file.svg +1 -0
  138. package/icons/filter-off.svg +1 -0
  139. package/icons/filter.svg +1 -0
  140. package/icons/first.svg +1 -0
  141. package/icons/folder-clear.svg +1 -0
  142. package/icons/folder-create.svg +1 -0
  143. package/icons/folder-open.svg +1 -0
  144. package/icons/folder.svg +1 -0
  145. package/icons/hide.svg +1 -0
  146. package/icons/image.svg +1 -0
  147. package/icons/label-add.svg +1 -0
  148. package/icons/label.svg +1 -0
  149. package/icons/last.svg +1 -0
  150. package/icons/menu.svg +1 -0
  151. package/icons/mode-auto.svg +1 -0
  152. package/icons/mode-dark.svg +1 -0
  153. package/icons/mode-light.svg +1 -0
  154. package/icons/open-in-browser.svg +1 -0
  155. package/icons/pause.svg +1 -0
  156. package/icons/play.svg +1 -0
  157. package/icons/refresh.svg +1 -0
  158. package/icons/remove.svg +1 -0
  159. package/icons/save.svg +1 -0
  160. package/icons/search.svg +1 -0
  161. package/icons/settings.svg +1 -0
  162. package/icons/show.svg +1 -0
  163. package/icons/storage.svg +1 -0
  164. package/icons/table-visibility.svg +1 -0
  165. package/icons/tag.svg +1 -0
  166. package/icons/tools.svg +1 -0
  167. package/icons/trash-x.svg +1 -0
  168. package/icons/warning.svg +1 -0
  169. package/package.json +2 -2
  170. package/scripts/build.js +109 -138
  171. package/scripts/docs.js +60 -60
  172. package/src/components/Card.js +66 -0
  173. package/src/components/FocusCapture.js +23 -0
  174. package/src/components/HybridComponent.js +40 -40
  175. package/src/components/Icon.js +155 -0
  176. package/src/components/Import.js +104 -0
  177. package/src/components/LightComponent.js +32 -32
  178. package/src/components/ShadowComponent.js +30 -17
  179. package/src/components/SideMenu.js +167 -0
  180. package/src/components/ThemeSwitcher.js +108 -0
  181. package/src/kempo-hljs.css +146 -0
  182. package/src/utils/cli.js +43 -43
  183. package/src/utils/fs-utils.js +41 -41
  184. package/src/utils/propConverters.js +11 -0
  185. package/tests/HybridComponent.browser-test.js +214 -214
  186. package/tests/LightComponent.browser-test.js +169 -169
  187. package/tests/ShadowComponent.browser-test.js +130 -130
  188. package/config/development.json +0 -14
  189. package/docs/components/ShadowComponent.js +0 -1
  190. /package/{docs → dist/src}/components/HybridComponent.js +0 -0
  191. /package/{docs → dist/src}/components/LightComponent.js +0 -0
  192. /package/{docs → dist/src}/utils/cli.js +0 -0
  193. /package/{docs → dist/src}/utils/fs-utils.js +0 -0
package/docs/components/tags.html ADDED
@@ -0,0 +1,94 @@
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 Import from '../src/components/Import.js';
11
+ import Icon from '../src/components/Icon.js';
12
+ Import.replacements.root = '../';
13
+ Icon.pathToIcons = ['../icons'];
14
+ </script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav.inc.html"></k-import>
18
+ <h1 class="ta-center">Tags</h1>
19
+ <main>
20
+ <details class="b r mb">
21
+ <summary class="p">Table of Contents</summary>
22
+ <div class="m mt0 pl">
23
+ <h6>Examples</h6>
24
+ <a href="#basicUsage">Basic Usage</a><br />
25
+ <a href="#allowedTags">Allowed Tags</a><br />
26
+ <a href="#disallowedTags">Disallowed Tags</a><br />
27
+
28
+ <h6 class="mt">JavaScript Reference</h6>
29
+ <a href="#constructor">Constructor</a><br />
30
+ <a href="#requirements">Requirements</a><br />
31
+ <a href="#attributes">Attributes</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>Tags</code> component allows users to add and remove tags. It extends the <a href="./component.html">Component</a> class.</p>
39
+
40
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
41
+ <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>
42
+ <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>
43
+ <k-tags>
44
+ <label>Tags</label>
45
+ </k-tags>
46
+
47
+ <h3 id="allowedTags"><a href="#allowedTags" class="no-link">Allowed Tags</a></h3>
48
+ <p>Use the <code>allowedTags</code> attribute to specify a comma-separated list of allowed tags. Only these tags can be added.</p>
49
+ <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>
50
+ <k-tags allowed-tags="tag1,tag2,tag3">
51
+ <label>Allowed Tags</label>
52
+ </k-tags>
53
+
54
+ <h3 id="disallowedTags"><a href="#disallowedTags" class="no-link">Disallowed Tags</a></h3>
55
+ <p>Use the <code>disallowedTags</code> attribute to specify a comma-separated list of disallowed tags. These tags cannot be added.</p>
56
+ <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>
57
+ <k-tags disallowed-tags="tag1,tag2,tag3">
58
+ <label>Disallowed Tags</label>
59
+ </k-tags>
60
+
61
+ <h2 id="jsRef">JavaScript Reference</h2>
62
+
63
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
64
+ <h6>Extends <a href="./component.html">Component</a></h6>
65
+ <h5>
66
+ <code>new Tags()</code>
67
+ </h5>
68
+
69
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
70
+ <ul>
71
+ <li><a href="./component.html">Component</a></li>
72
+ </ul>
73
+
74
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
75
+ <h5><code>value<i>: string</i></code></h5>
76
+ <p>A comma-separated list of tags.</p>
77
+ <h5><code>allowedTags<i>: string</i></code></h5>
78
+ <p>A comma-separated list of allowed tags. If specified, only these tags can be added.</p>
79
+ <h5><code>disallowedTags<i>: string</i></code></h5>
80
+ <p>A comma-separated list of disallowed tags. If specified, these tags cannot be added.</p>
81
+
82
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
83
+ <h5><code>addTag(tag)<i>: void</i></code></h5>
84
+ <p>Adds a tag to the list of tags.</p>
85
+ <h5><code>removeTag(tag)<i>: void</i></code></h5>
86
+ <p>Removes a tag from the list of tags.</p>
87
+ <h5><code>validateTags()<i>: string</i></code></h5>
88
+ <p>Validates the list of tags against the allowed and disallowed tags and returns the valid tags as a comma-separated string.</p>
89
+
90
+ </main>
91
+ <script type="module" src="../src/components/Import.js"></script>
92
+ <script type="module" src="../src/components/Tags.js"></script>
93
+ </body>
94
+ </html>
package/docs/components/theme-switcher.html ADDED
@@ -0,0 +1,129 @@
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 Import from '../src/components/Import.js';
11
+ import Icon from '../src/components/Icon.js';
12
+ Import.replacements.root = '../';
13
+ Icon.pathToIcons = ['../icons'];
14
+ </script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav.inc.html"></k-import>
18
+ <h1 class="ta-center">ThemeSwitcher</h1>
19
+ <main>
20
+ <details class="b r mb">
21
+ <summary class="p">Table of Contents</summary>
22
+ <div class="m mt0 pl">
23
+ <h6>Examples</h6>
24
+ <a href="#basicUsage">Basic Usage</a><br />
25
+ <a href="#customPadding">Custom Padding</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#constructor">Constructor</a><br />
29
+ <a href="#requirements">Requirements</a><br />
30
+ <a href="#attributes">Attributes</a><br />
31
+ <a href="#properties">Properties</a><br />
32
+ <a href="#cssCustomProperties">CSS Custom Properties</a><br />
33
+ <a href="#methods">Methods</a><br />
34
+ <a href="#staticMethods">Static Methods</a><br />
35
+ </div>
36
+ </details>
37
+
38
+ <h3>Description</h3>
39
+ <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>
40
+
41
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
42
+ <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>
43
+
44
+ <div class="row -mx mb">
45
+ <div class="col d-span-6 m-span-12 px">
46
+ <k-card label="HTML">
47
+ <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>
48
+ </k-card>
49
+ </div>
50
+ <div class="col d-span-6 m-span-12 px">
51
+ <k-card label="Output">
52
+ <k-theme-switcher></k-theme-switcher>
53
+ </k-card>
54
+ </div>
55
+ </div>
56
+
57
+ <h3 id="customPadding"><a href="#customPadding" class="no-link">Custom Padding</a></h3>
58
+ <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>
59
+
60
+ <div class="row -mx mb">
61
+ <div class="col d-span-6 m-span-12 px">
62
+ <k-card label="HTML">
63
+ <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>
64
+ </k-card>
65
+ </div>
66
+ <div class="col d-span-6 m-span-12 px">
67
+ <k-card label="Output">
68
+ <k-theme-switcher style="--padding: 0.5rem;"></k-theme-switcher>
69
+ <k-theme-switcher style="--padding: 2rem;"></k-theme-switcher>
70
+ </k-card>
71
+ </div>
72
+ </div>
73
+
74
+ <h2 id="jsRef">JavaScript Reference</h2>
75
+
76
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
77
+ <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
78
+ <h5>
79
+ <code>new ThemeSwitcher()</code>
80
+ </h5>
81
+
82
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
83
+ <ul>
84
+ <li><a href="./component.html">ShadowComponent</a></li>
85
+ <li><a href="./icon.html">Icon</a></li>
86
+ </ul>
87
+
88
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
89
+ <h5><code>current-theme<i>: string</i></code></h5>
90
+ <p>Reflects the current theme state. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This attribute is automatically updated when the theme changes.</p>
91
+
92
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
93
+ <h5><code>currentTheme<i>: string</i></code></h5>
94
+ <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.</p>
95
+
96
+ <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
97
+ <h5><code>--padding<i>: length</i></code></h5>
98
+ <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>
99
+ <pre><code class="hljs css"><span class="hljs-selector-tag">k-theme-switcher</span> {
100
+ <span class="hljs-attribute">--padding</span>: <span class="hljs-number">0.5rem</span>;
101
+ }</code></pre>
102
+
103
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
104
+ <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>
105
+
106
+ <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
107
+ <h5><code>static setTheme(theme)<i>: void</i></code></h5>
108
+ <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>
109
+ <ul>
110
+ <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>
111
+ </ul>
112
+ <pre><code class="hljs javascript"><span class="hljs-comment">// Programmatically set theme to dark mode</span>
113
+ <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">setTheme</span>(<span class="hljs-string">'dark'</span>);</code></pre>
114
+
115
+ <h5><code>static getCurrentTheme()<i>: string</i></code></h5>
116
+ <p>Gets the current theme from the document attribute or local storage. Returns <code>"auto"</code> if no theme is set.</p>
117
+ <pre><code class="hljs javascript"><span class="hljs-comment">// Get the current theme</span>
118
+ <span class="hljs-keyword">const</span> currentTheme = <span class="hljs-title class_">ThemeSwitcher</span>.<span class="hljs-title function_">getCurrentTheme</span>();
119
+ <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>
120
+
121
+ <h3 id="themeDetection"><a href="#themeDetection" class="no-link">Automatic Theme Detection</a></h3>
122
+ <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>
123
+ <p>The component also synchronizes theme changes across browser tabs using the storage event, ensuring a consistent user experience.</p>
124
+
125
+ </main>
126
+ <script type="module" src="../src/components/Import.js"></script>
127
+ <script type="module" src="../src/components/ThemeSwitcher.js"></script>
128
+ </body>
129
+ </html>
package/docs/components/timestamp.html ADDED
@@ -0,0 +1,86 @@
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 Import from '../src/components/Import.js';
11
+ import Icon from '../src/components/Icon.js';
12
+ Import.replacements.root = '../';
13
+ Icon.pathToIcons = ['../icons'];
14
+ </script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav.inc.html"></k-import>
18
+ <h1 class="ta-center">Timestamp</h1>
19
+ <main>
20
+ <details class="b r mb">
21
+ <summary class="p">Table of Contents</summary>
22
+ <div class="m mt0 pl">
23
+ <h6>Examples</h6>
24
+ <a href="#basicUsage">Basic Usage</a><br />
25
+ <a href="#customFormat">Custom Format</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#constructor">Constructor</a><br />
29
+ <a href="#requirements">Requirements</a><br />
30
+ <a href="#attributes">Attributes</a><br />
31
+ <a href="#properties">Properties</a><br />
32
+ <a href="#methods">Methods</a><br />
33
+ </div>
34
+ </details>
35
+
36
+ <h3>Description</h3>
37
+ <p>The <code>Timestamp</code> component displays a formatted timestamp. It extends the <a href="./component.html">Component</a> class.</p>
38
+
39
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
40
+ <p>Use the <code>Timestamp</code> component to display a formatted timestamp. The component will automatically format the timestamp based on the provided locale or the user's current locale if no locale is provided.</p>
41
+ <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>
42
+ <k-timestamp timestamp="1633024800000"></k-timestamp>
43
+
44
+ <h3 id="customFormat"><a href="#customFormat" class="no-link">Custom Format</a></h3>
45
+ <p>Use the <code>format</code> attribute to specify a custom format for the timestamp. The format should be a string like <code>YYYY-MM-DD hh:mm:ss:iiii</code>.</p>
46
+ <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">"YYYY-MM-DD hh:mm:ss"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
47
+ <k-timestamp timestamp="1633024800000" format="YYYY-MM-DD hh:mm:ss"></k-timestamp>
48
+
49
+ <h2 id="jsRef">JavaScript Reference</h2>
50
+
51
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
52
+ <h6>Extends <a href="./component.html">Component</a></h6>
53
+ <h5>
54
+ <code>new Timestamp(timestamp, format, locale)</code>
55
+ </h5>
56
+
57
+ <h4>Parameters</h4>
58
+ <h5><code>timestamp<i>: number</i></code></h5>
59
+ <p>The timestamp to be formatted and displayed.</p>
60
+ <h5><code>format<i>: string</i></code></h5>
61
+ <p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
62
+ <h5><code>locale<i>: string</i></code></h5>
63
+ <p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
64
+
65
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
66
+ <ul>
67
+ <li><a href="./component.html">Component</a></li>
68
+ <li><a href="../utils/formatTimestamp.js">formatTimestamp Utility Function</a></li>
69
+ </ul>
70
+
71
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
72
+ <h5><code>timestamp<i>: number</i></code></h5>
73
+ <p>The timestamp to be formatted and displayed.</p>
74
+ <h5><code>format<i>: string</i></code></h5>
75
+ <p>The format to be used for formatting the timestamp. If not provided, the user's current locale format will be used.</p>
76
+ <h5><code>locale<i>: string</i></code></h5>
77
+ <p>The locale to be used for formatting the timestamp. If not provided, the user's current locale will be used.</p>
78
+
79
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
80
+ <p>The <code>Timestamp</code> class does not introduce any new methods beyond those provided by the <a href="./component.html">Component</a> class.</p>
81
+
82
+ </main>
83
+ <script type="module" src="../src/components/Import.js"></script>
84
+ <script type="module" src="../src/components/Timestamp.js"></script>
85
+ </body>
86
+ </html>