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/utils/propConverters.html ADDED
@@ -0,0 +1,132 @@
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>propConverters - Kempo UI</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
+ <link rel="stylesheet" href="../styles.css" />
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1>propConverters</h1>
22
+
23
+ <details
24
+ class="b r mb"
25
+ >
26
+ <summary class="p">Table of Contents</summary>
27
+ <div class="m mt0 pl">
28
+ <h6>Usage</h6>
29
+ <a href="#basicUsage">Basic Usage</a><br />
30
+ <a href="#boolTrueFalse">boolTrueFalse</a><br />
31
+ <a href="#boolExists">boolExists</a><br />
32
+ <a href="#examples">Examples</a><br />
33
+ </div>
34
+ </details>
35
+
36
+ <h3>Description</h3>
37
+ <p>The <code>propConverters</code> module provides Lit Element property converters for handling boolean attributes in web components. These converters manage the conversion between JavaScript boolean values and HTML attribute strings.</p>
38
+
39
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
40
+ <p>Import and use the converters in your Lit Element component properties:</p>
41
+ <pre><code class="hljs javascript">import { boolTrueFalse, boolExists } from './utils/propConverters.js';
42
+
43
+ static properties = {
44
+ enabled: { type: Boolean, reflect: true, converter: boolTrueFalse },
45
+ visible: { type: Boolean, reflect: true, converter: boolExists }
46
+ };</code></pre>
47
+
48
+ <h3 id="boolTrueFalse"><a href="#boolTrueFalse" class="no-link">boolTrueFalse</a></h3>
49
+ <p>Converts between boolean values and explicit "true"/"false" string attributes.</p>
50
+
51
+ <h4>Behavior</h4>
52
+ <ul>
53
+ <li><strong>fromAttribute:</strong> "true" → true, "false" → false, null → undefined</li>
54
+ <li><strong>toAttribute:</strong> true → "true", false → "false"</li>
55
+ </ul>
56
+
57
+ <h4>HTML Usage</h4>
58
+ <pre><code class="hljs xml">&lt;my-component enabled="true"&gt;&lt;/my-component&gt;
59
+ &lt;my-component enabled="false"&gt;&lt;/my-component&gt;</code></pre>
60
+
61
+ <h3 id="boolExists"><a href="#boolExists" class="no-link">boolExists</a></h3>
62
+ <p>Converts between boolean values and attribute presence/absence.</p>
63
+
64
+ <h4>Behavior</h4>
65
+ <ul>
66
+ <li><strong>fromAttribute:</strong> attribute present → true, attribute absent → false</li>
67
+ <li><strong>toAttribute:</strong> true → "", false → null (removes attribute)</li>
68
+ </ul>
69
+
70
+ <h4>HTML Usage</h4>
71
+ <pre><code class="hljs xml">&lt;my-component visible&gt;&lt;/my-component&gt; &lt;!-- visible = true --&gt;
72
+ &lt;my-component&gt;&lt;/my-component&gt; &lt;!-- visible = false --&gt;</code></pre>
73
+
74
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
75
+
76
+ <h4>Component with Both Converters</h4>
77
+ <pre><code class="hljs javascript">import { LitElement, html } from 'lit';
78
+ import { boolTrueFalse, boolExists } from './utils/propConverters.js';
79
+
80
+ class MyComponent extends LitElement {
81
+ static properties = {
82
+ autoplay: { type: Boolean, reflect: true, converter: boolTrueFalse },
83
+ hidden: { type: Boolean, reflect: true, converter: boolExists },
84
+ loop: { type: Boolean, reflect: true, converter: boolTrueFalse }
85
+ };
86
+
87
+ constructor() {
88
+ super();
89
+ this.autoplay = false;
90
+ this.hidden = false;
91
+ this.loop = false;
92
+ }
93
+
94
+ render() {
95
+ return html`
96
+ &lt;div ?hidden="${this.hidden}"&gt;
97
+ Content ${this.autoplay ? 'with' : 'without'} autoplay
98
+ ${this.loop ? '(looping)' : ''}
99
+ &lt;/div&gt;
100
+ `;
101
+ }
102
+ }</code></pre>
103
+
104
+ <h4>HTML Usage Examples</h4>
105
+ <pre><code class="hljs xml">&lt;!-- Using boolTrueFalse converter --&gt;
106
+ &lt;my-component autoplay="true" loop="false"&gt;&lt;/my-component&gt;
107
+
108
+ &lt;!-- Using boolExists converter --&gt;
109
+ &lt;my-component hidden&gt;&lt;/my-component&gt;
110
+
111
+ &lt;!-- Combined usage --&gt;
112
+ &lt;my-component autoplay="true" loop="true" hidden&gt;&lt;/my-component&gt;</code></pre>
113
+
114
+ <h4>When to Use Each Converter</h4>
115
+ <p><strong>Use boolTrueFalse when:</strong></p>
116
+ <ul>
117
+ <li>You need explicit true/false values in HTML</li>
118
+ <li>The attribute value is important for clarity</li>
119
+ <li>Working with form controls or interactive elements</li>
120
+ </ul>
121
+
122
+ <p><strong>Use boolExists when:</strong></p>
123
+ <ul>
124
+ <li>Following HTML standards (like hidden, disabled attributes)</li>
125
+ <li>The presence of the attribute is what matters</li>
126
+ <li>Creating more semantic HTML</li>
127
+ </ul>
128
+
129
+ </main>
130
+ <div style="height:33vh"></div>
131
+ </body>
132
+ </html>
package/docs/utils/watchWindowSize.html ADDED
@@ -0,0 +1,166 @@
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>watchWindowSize - Kempo UI</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
+ <link rel="stylesheet" href="../styles.css" />
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1>watchWindowSize</h1>
22
+
23
+ <details
24
+ class="b r mb"
25
+ >
26
+ <summary class="p">Table of Contents</summary>
27
+ <div class="m mt0 pl">
28
+ <h6>Usage</h6>
29
+ <a href="#basicUsage">Basic Usage</a><br />
30
+ <a href="#functions">Functions</a><br />
31
+ <a href="#examples">Examples</a><br />
32
+ </div>
33
+ </details>
34
+
35
+ <h3>Description</h3>
36
+ <p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
37
+
38
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
39
+ <p>Import and use the window size watching functions:</p>
40
+ <pre><code class="hljs javascript">import { watchWindowSize, unwatchWindowSize } from './utils/watchWindowSize.js';
41
+
42
+ const handler = (width) => {
43
+ console.log('Window width:', width);
44
+ };
45
+
46
+ // Start watching
47
+ const currentWidth = watchWindowSize(handler);
48
+
49
+ // Stop watching when done
50
+ unwatchWindowSize(handler);</code></pre>
51
+
52
+ <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
53
+
54
+ <h5><code>watchWindowSize(handler)</code></h5>
55
+ <p>Registers a handler function to be called when the window is resized.</p>
56
+ <ul>
57
+ <li><strong>handler:</strong> Function that receives the new window width</li>
58
+ <li><strong>Returns:</strong> Current window width</li>
59
+ </ul>
60
+
61
+ <h5><code>unwatchWindowSize(handler)</code></h5>
62
+ <p>Unregisters a previously registered handler function.</p>
63
+ <ul>
64
+ <li><strong>handler:</strong> The same function reference that was registered</li>
65
+ </ul>
66
+
67
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
68
+
69
+ <h4>Responsive Component</h4>
70
+ <pre><code class="hljs javascript">import { watchWindowSize, unwatchWindowSize } from './utils/watchWindowSize.js';
71
+
72
+ class ResponsiveComponent extends LitElement {
73
+ constructor() {
74
+ super();
75
+ this.isMobile = false;
76
+ this.resizeHandler = this.handleResize.bind(this);
77
+ }
78
+
79
+ connectedCallback() {
80
+ super.connectedCallback();
81
+ const currentWidth = watchWindowSize(this.resizeHandler);
82
+ this.handleResize(currentWidth);
83
+ }
84
+
85
+ disconnectedCallback() {
86
+ super.disconnectedCallback();
87
+ unwatchWindowSize(this.resizeHandler);
88
+ }
89
+
90
+ handleResize(width) {
91
+ this.isMobile = width < 768;
92
+ this.requestUpdate();
93
+ }
94
+
95
+ render() {
96
+ return html`
97
+ &lt;div class="${this.isMobile ? 'mobile' : 'desktop'}"&gt;
98
+ Content adapts to screen size
99
+ &lt;/div&gt;
100
+ `;
101
+ }
102
+ }</code></pre>
103
+
104
+ <h4>Multiple Handlers</h4>
105
+ <pre><code class="hljs javascript">// Handler for navigation
106
+ const navHandler = (width) => {
107
+ const nav = document.querySelector('.navigation');
108
+ nav.classList.toggle('mobile', width < 1024);
109
+ };
110
+
111
+ // Handler for sidebar
112
+ const sidebarHandler = (width) => {
113
+ const sidebar = document.querySelector('.sidebar');
114
+ sidebar.style.display = width < 768 ? 'none' : 'block';
115
+ };
116
+
117
+ // Both handlers will be called on resize
118
+ watchWindowSize(navHandler);
119
+ watchWindowSize(sidebarHandler);
120
+
121
+ // Clean up when needed
122
+ unwatchWindowSize(navHandler);
123
+ unwatchWindowSize(sidebarHandler);</code></pre>
124
+
125
+ <h4>Breakpoint Detection</h4>
126
+ <pre><code class="hljs javascript">const breakpoints = {
127
+ mobile: 768,
128
+ tablet: 1024,
129
+ desktop: 1200
130
+ };
131
+
132
+ const breakpointHandler = (width) => {
133
+ let currentBreakpoint = 'mobile';
134
+
135
+ if (width >= breakpoints.desktop) {
136
+ currentBreakpoint = 'desktop';
137
+ } else if (width >= breakpoints.tablet) {
138
+ currentBreakpoint = 'tablet';
139
+ }
140
+
141
+ document.body.setAttribute('data-breakpoint', currentBreakpoint);
142
+
143
+ // Dispatch custom event
144
+ window.dispatchEvent(new CustomEvent('breakpointchange', {
145
+ detail: { width, breakpoint: currentBreakpoint }
146
+ }));
147
+ };
148
+
149
+ watchWindowSize(breakpointHandler);</code></pre>
150
+
151
+ <h4>Performance Benefits</h4>
152
+ <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
153
+ <pre><code class="hljs javascript">// This handler will only be called after resize events stop
154
+ const expensiveHandler = (width) => {
155
+ // Expensive DOM calculations or API calls
156
+ recalculateLayout();
157
+ updateCharts();
158
+ reflow();
159
+ };
160
+
161
+ watchWindowSize(expensiveHandler); // Automatically debounced</code></pre>
162
+
163
+ </main>
164
+ <div style="height:33vh"></div>
165
+ </body>
166
+ </html>
package/icons/add.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>
package/icons/arrow-back.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>
package/icons/arrow-down-double.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
package/icons/arrow-down.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z"/></svg>
package/icons/arrow-forward.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
package/icons/arrow-up-double.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg>
package/icons/arrow-up.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/></svg>
package/icons/cards.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-500v-220h220v220H240Zm0 260v-220h220v220H240Zm260-260v-220h220v220H500Zm0 260v-220h220v220H500ZM320-580h60v-60h-60v60Zm260 0h60v-60h-60v60ZM320-320h60v-60h-60v60Zm260 0h60v-60h-60v60ZM380-580Zm200 0Zm0 200Zm-200 0ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z"/></svg>
package/icons/check.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
package/icons/chevron-left.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>
package/icons/chevron-right.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>
package/icons/close.svg ADDED
@@ -0,0 +1,2 @@
1
+
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
package/icons/compare.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M400-40v-80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v-80h80v880h-80ZM200-240h200v-240L200-240Zm360 120v-360l200 240v-520H560v-80h200q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H560Z"/></svg>
package/icons/delete.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
package/icons/drag-handle.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-360v-80h640v80H160Zm0-160v-80h640v80H160Z"/></svg>