kempo-ui 0.0.10 → 0.0.12

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 (47) hide show
  1. package/docs/components/accordion.html +4 -2
  2. package/docs/components/card.html +4 -2
  3. package/docs/components/collapsible.html +4 -2
  4. package/docs/components/content-slider.html +4 -3
  5. package/docs/components/dialog.html +6 -237
  6. package/docs/components/focus-capture.html +4 -2
  7. package/docs/components/hybrid-component.html +4 -2
  8. package/docs/components/icon.html +8 -6
  9. package/docs/components/import.html +4 -2
  10. package/docs/components/light-component.html +4 -2
  11. package/docs/components/persistant-collapsible.html +38 -19
  12. package/docs/components/photo-viewer.html +85 -129
  13. package/docs/components/resize.html +4 -2
  14. package/docs/components/shadow-component.html +4 -2
  15. package/docs/components/show-more.html +5 -2
  16. package/docs/components/side-menu.html +4 -2
  17. package/docs/components/sortable.html +4 -3
  18. package/docs/components/split.html +4 -2
  19. package/docs/components/table.html +4 -2
  20. package/docs/components/tableControls.html +4 -2
  21. package/docs/components/tableCustomFields.html +4 -2
  22. package/docs/components/tableFetchRecords.html +4 -2
  23. package/docs/components/tableFieldSortHide.html +4 -2
  24. package/docs/components/tablePagination.html +4 -2
  25. package/docs/components/tableRecordEditing.html +4 -2
  26. package/docs/components/tableRecordFiltering.html +4 -2
  27. package/docs/components/tableRecordHiding.html +4 -2
  28. package/docs/components/tableRecordSearching.html +4 -2
  29. package/docs/components/tableRecordSelection.html +4 -2
  30. package/docs/components/tableRowControls.html +4 -2
  31. package/docs/components/tableSorting.html +4 -2
  32. package/docs/components/tabs.html +71 -89
  33. package/docs/components/tags.html +17 -45
  34. package/docs/components/theme-switcher.html +5 -3
  35. package/docs/components/timestamp.html +11 -40
  36. package/docs/components/toast.html +5 -311
  37. package/docs/components/toggle.html +6 -3
  38. package/docs/components/tree.html +65 -76
  39. package/docs/index.html +1 -0
  40. package/docs/utils/debounce.html +25 -5
  41. package/docs/utils/drag.html +14 -3
  42. package/docs/utils/formatTimestamp.html +26 -7
  43. package/docs/utils/init.js +1 -0
  44. package/docs/utils/propConverters.html +47 -7
  45. package/docs/utils/toTitleCase.html +3 -2
  46. package/docs/utils/watchWindowSize.html +99 -7
  47. package/package.json +1 -1
package/docs/components/accordion.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Accordion - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -154,6 +155,7 @@
154
155
 
155
156
  </main>
156
157
  <div style="height:33vh"></div>
158
+ <script type="module" src="../src/components/Import.js"></script>
157
159
  <script type="module" src="../src/components/Accordion.js"></script>
158
160
  </body>
159
161
  </html>
package/docs/components/card.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Card - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -80,6 +81,7 @@
80
81
 
81
82
  </main>
82
83
  <div style="height:33vh"></div>
84
+ <script type="module" src="../src/components/Import.js"></script>
83
85
  <script type="module" src="../src/components/Card.js"></script>
84
86
  </body>
85
87
  </html>
package/docs/components/collapsible.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Collapsible - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -186,6 +187,7 @@
186
187
 
187
188
  </main>
188
189
  <div style="height:33vh"></div>
190
+ <script type="module" src="../src/components/Import.js"></script>
189
191
  <script type="module" src="../src/components/Collapsible.js"></script>
190
192
  </body>
191
193
  </html>
package/docs/components/content-slider.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Content Slider - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -211,7 +212,7 @@
211
212
  <p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
212
213
 
213
214
  </main>
214
- <div style="height:33vh"></div>
215
+ <script type="module" src="../src/components/Import.js"></script>
215
216
  <script type="module" src="../src/components/ContentSlider.js"></script>
216
217
  </body>
217
218
  </html>
package/docs/components/dialog.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Dialog - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -22,12 +23,10 @@
22
23
  <a href="#titles">Titles</a><br />
23
24
  <a href="#actionButtons">Action Buttons</a><br />
24
25
  <a href="#jsUsage">JavaScript Usage</a><br />
25
- <a href="#confirmDialog">Confirm Dialog</a><br />
26
26
 
27
27
  <h6 class="mt">JavaScript Reference</h6>
28
28
  <a href="#constructor">Constructor</a><br />
29
29
  <a href="#requirements">Requirements</a><br />
30
- <a href="#attributes">Attributes</a><br />
31
30
  <a href="#properties">Properties</a><br />
32
31
  <a href="#methods">Methods</a><br />
33
32
  <a href="#staticMethods">Static Methods</a><br />
@@ -36,7 +35,7 @@
36
35
 
37
36
  <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
38
37
  <p>Create dialogs using the <code>k-dialog</code> component. Open the dialog by calling the <code>open()</code> method, and close it by calling the <code>close()</code> method. Or it can be closed using the dialog's GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).</p>
39
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
38
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d1"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"doument.getElementById('d1').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
40
39
  <button class="openDialog mb" data-dialog="d1" slot="right">Open Dialog</button>
41
40
  <k-dialog id="d1">
42
41
  <p class="p">Hello World</p>
@@ -90,239 +89,9 @@
90
89
 
91
90
  <h3 id="jsUsage"><a href="#jsUsage" class="no-link">JavaScript Usage</a></h3>
92
91
  <h5>Create Dialog</h5>
93
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.create(<span class="hljs-string">'Hello World'</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
92
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.create(<span class="hljs-string">'&lt;p&gt;Hello World&lt;/p&gt;'</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
94
93
  <button id="d7" class="mb">Open Dialog</button>
95
- <script type="module">
96
- import Dialog from '../src/components/Dialog.js';
97
- document.getElementById('d7').addEventListener('click', () => {
98
- Dialog.create('Hello World');
99
- });
100
- </script>
101
-
102
- <h5>Dialog with Title</h5>
103
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7b"</span>&gt;</span>Open Dialog with Title<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7b'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.create(<span class="hljs-string">'This is the dialog content'</span>, {<br /> <span class="hljs-attr">title</span>: <span class="hljs-string">'My Dialog Title'</span><br /> });<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
104
- <button id="d7b" class="mb">Open Dialog with Title</button>
105
- <script type="module">
106
- import Dialog from '../src/components/Dialog.js';
107
- document.getElementById('d7b').addEventListener('click', () => {
108
- Dialog.create('This is the dialog content', {
109
- title: 'My Dialog Title'
110
- });
111
- });
112
- </script>
113
-
114
- <h5>Error Dialog</h5>
115
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d8"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d8'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.error(<span class="hljs-string">"Oh no, don't do that!"</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
116
- <button id="d8" class="mb">Open Dialog</button>
117
- <script type="module">
118
- import Dialog from '../src/components/Dialog.js';
119
- document.getElementById('d8').addEventListener('click', () => {
120
- Dialog.error("Oh no, don't do that!");
121
- });
122
- </script>
123
-
124
- <h3 id="confirmDialog"><a href="#confirmDialog" class="no-link">Confirm Dialog</a></h3>
125
- <p>Use the <code>Dialog.confirm</code> static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.</p>
126
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d9"</span>&gt;</span>Open Confirm Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d9'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.confirm(<span class="hljs-string">"Are you sure you want to proceed?"</span>, <span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"User response:"</span>, response);<br /> });<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
127
- <button id="d9" class="mb">Open Confirm Dialog</button>
128
- <script type="module">
129
- import Dialog from '../src/components/Dialog.js';
130
- document.getElementById('d9').addEventListener('click', () => {
131
- Dialog.confirm("Are you sure you want to proceed?", response => {
132
- console.log("User response:", response);
133
- });
134
- });
135
- </script>
136
-
137
- <h2 id="jsRef">JavaScript Reference</h2>
138
-
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>
142
- <code>new Dialog()</code><br />
143
- <code>new Dialog(<i>object</i> options)</code>
144
- </h5>
145
-
146
- <h4>Parameters</h4>
147
- <h5><code>options<i>: object</i></code></h5>
148
- <p>An object containing the initial configuration for the dialog. The options object can contain the following properties:</p>
149
- <ul>
150
- <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened.</li>
151
- <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
152
- <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
153
- <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
154
- <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
155
- <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
156
- <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
157
- <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
158
- <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
159
- <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
160
- </ul>
161
-
162
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
163
- <ul>
164
- <li><a href="./shadow-component.html">ShadowComponent</a></li>
165
- <li><a href="./icon.html">Icon</a></li>
166
- <li><a href="./focus-capture.html">FocusCapture</a></li>
167
- </ul>
168
-
169
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
170
- <h5><code>opened<i>: boolean</i></code></h5>
171
- <p>Whether the dialog is opened.</p>
172
-
173
- <h5><code>close-btn<i>: boolean</i></code></h5>
174
- <p>Whether to show the close button. Default is <code>true</code>.</p>
175
-
176
- <h5><code>overlay-close<i>: boolean</i></code></h5>
177
- <p>Whether clicking the overlay closes the dialog. Default is <code>true</code>.</p>
178
-
179
- <h5><code>confirm-text<i>: string</i></code></h5>
180
- <p>Text for the confirm button.</p>
181
-
182
- <h5><code>confirm-classes<i>: string</i></code></h5>
183
- <p>Classes for the confirm button. Default is <code>'success ml'</code>.</p>
184
-
185
- <h5><code>cancel-text<i>: string</i></code></h5>
186
- <p>Text for the cancel button.</p>
187
-
188
- <h5><code>cancel-classes<i>: string</i></code></h5>
189
- <p>Classes for the cancel button.</p>
190
-
191
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
192
- <h5><code>confirmAction<i>: function</i></code></h5>
193
- <p>Action to perform on confirm. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
194
-
195
- <h5><code>cancelAction<i>: function</i></code></h5>
196
- <p>Action to perform on cancel. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
197
-
198
- <h5><code>closeCallback<i>: function</i></code></h5>
199
- <p>Callback to execute when the dialog is closed.</p>
200
-
201
- <h5><code>previousFocus<i>: HTMLElement</i></code></h5>
202
- <p>Reference to the element that had focus before the dialog was opened.</p>
203
-
204
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
205
- <h5><code>open()<i>: void</i></code></h5>
206
- <p>Opens the dialog and sets focus to the first focusable element or an element with the <code>autofocus</code> attribute.</p>
207
-
208
- <h5><code>close()<i>: void</i></code></h5>
209
- <p>Closes the dialog and calls the <code>closeCallback</code>.</p>
210
-
211
- <h5><code>toggle()<i>: void</i></code></h5>
212
- <p>Toggles the dialog open or closed.</p>
213
-
214
- <h5><code>focus()<i>: void</i></code></h5>
215
- <p>Focuses the first focusable element in the dialog and saves the previously focused element.</p>
216
-
217
- <h5><code>blur()<i>: void</i></code></h5>
218
- <p>Returns focus to the element that had focus before the dialog was opened.</p>
219
-
220
- <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
221
- <h5><code>Dialog.create(contents, options)<i>: Dialog</i></code></h5>
222
- <p>Creates and opens a new dialog with the specified contents and options. Returns the created Dialog instance.</p>
223
- <p>If <code>contents</code> is plain text (no HTML tags), it will automatically be wrapped in a <code>&lt;p class="p"&gt;</code> tag. If it contains HTML, it will be inserted as-is. If it's an HTMLElement or DocumentFragment, it will be appended directly.</p>
224
-
225
- <h6>Parameters</h6>
226
- <ul>
227
- <li><code>contents<i>: string | HTMLElement | DocumentFragment</i></code> - The content to display in the dialog. Plain text will be wrapped in a paragraph tag automatically.</li>
228
- <li><code>options<i>: object</i></code> - Configuration options for the dialog.</li>
229
- </ul>
230
-
231
- <h6>Options</h6>
232
- <ul>
233
- <li><code>title</code>: <i>string | HTMLElement</i> - The title to display in the dialog header. Will be wrapped in an <code>&lt;h5&gt;</code> tag with the <code>title</code> slot.</li>
234
- <li><code>titleClasses</code>: <i>string</i> - CSS classes for the title element. Default is <code>'pyh px m0'</code>.</li>
235
- <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened. Default is <code>true</code>.</li>
236
- <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
237
- <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
238
- <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
239
- <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
240
- <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
241
- <li><code>cancelText</code>: <i>string</i> - Text for the cancel button.</li>
242
- <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button.</li>
243
- <li><code>cancelAction</code>: <i>function</i> - Action to perform on cancel.</li>
244
- <li><code>closeCallback</code>: <i>function</i> - Callback to execute when the dialog is closed.</li>
245
- <li><code>removeOnClose</code>: <i>boolean</i> - Whether to remove the dialog from the DOM when closed. Default is <code>true</code>.</li>
246
- <li><code>closeExisting</code>: <i>boolean</i> - Whether to close existing dialogs before opening this one. Default is <code>true</code>.</li>
247
- <li><code>width</code>: <i>string</i> - CSS width value for the dialog.</li>
248
- <li><code>minWidth</code>: <i>string</i> - CSS min-width value for the dialog.</li>
249
- <li><code>maxWidth</code>: <i>string</i> - CSS max-width value for the dialog.</li>
250
- <li><code>height</code>: <i>string</i> - CSS height value for the dialog.</li>
251
- <li><code>minHeight</code>: <i>string</i> - CSS min-height value for the dialog.</li>
252
- <li><code>maxHeight</code>: <i>string</i> - CSS max-height value for the dialog.</li>
253
- </ul>
254
-
255
- <h5><code>Dialog.confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
256
- <p>Creates and opens a confirmation dialog with the specified text and options. The response callback receives a boolean value indicating whether the user confirmed (<code>true</code>) or canceled (<code>false</code>).</p>
257
-
258
- <h6>Parameters</h6>
259
- <ul>
260
- <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
261
- <li><code>responseCallback<i>: function</i></code> - Function called with the user's response (<code>true</code> for confirm, <code>false</code> for cancel).</li>
262
- <li><code>options<i>: object</i></code> - Configuration options.</li>
263
- </ul>
264
-
265
- <h6>Options</h6>
266
- <ul>
267
- <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Confirm'</code>.</li>
268
- <li><code>confirmText</code>: <i>string</i> - Text for the confirm button. Default is <code>'Yes'</code>.</li>
269
- <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button. Default is <code>'success ml'</code>.</li>
270
- <li><code>cancelText</code>: <i>string</i> - Text for the cancel button. Default is <code>'No'</code>.</li>
271
- <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button. Default is <code>'danger'</code>.</li>
272
- <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button. Default is <code>false</code>.</li>
273
- <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog. Default is <code>false</code>.</li>
274
- </ul>
275
-
276
- <h5><code>Dialog.alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
277
- <p>Creates and opens an alert dialog with the specified text and options.</p>
278
-
279
- <h6>Parameters</h6>
280
- <ul>
281
- <li><code>text<i>: string</i></code> - The message to display in the dialog.</li>
282
- <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
283
- <li><code>options<i>: object</i></code> - Configuration options.</li>
284
- </ul>
285
-
286
- <h6>Options</h6>
287
- <ul>
288
- <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Alert'</code>.</li>
289
- <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
290
- </ul>
291
-
292
- <h5><code>Dialog.error(text, responseCallback, options)<i>: Dialog</i></code></h5>
293
- <p>Creates and opens an error dialog with the specified text and options. The title is displayed in red.</p>
294
-
295
- <h6>Parameters</h6>
296
- <ul>
297
- <li><code>text<i>: string</i></code> - The error message to display in the dialog.</li>
298
- <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
299
- <li><code>options<i>: object</i></code> - Configuration options.</li>
300
- </ul>
301
-
302
- <h6>Options</h6>
303
- <ul>
304
- <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Error'</code>.</li>
305
- <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
306
- </ul>
307
-
308
- <h5><code>Dialog.success(text, responseCallback, options)<i>: Dialog</i></code></h5>
309
- <p>Creates and opens a success dialog with the specified text and options. The title is displayed in green.</p>
310
-
311
- <h6>Parameters</h6>
312
- <ul>
313
- <li><code>text<i>: string</i></code> - The success message to display in the dialog.</li>
314
- <li><code>responseCallback<i>: function</i></code> - Function called when the dialog is closed.</li>
315
- <li><code>options<i>: object</i></code> - Configuration options.</li>
316
- </ul>
317
-
318
- <h6>Options</h6>
319
- <ul>
320
- <li><code>title</code>: <i>string</i> - The title of the dialog. Default is <code>'Success'</code>.</li>
321
- <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
322
- </ul>
323
-
324
- </main>
325
- <div style="height:33vh"></div>
94
+ <script type="module" src="./init.js"></script>
326
95
  <script type="module" src="../src/components/Dialog.js"></script>
327
96
  <script>
328
97
  document.querySelectorAll('.openDialog').forEach( $btn => {
package/docs/components/focus-capture.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>FocusCapture - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -101,6 +102,7 @@
101
102
 
102
103
  </main>
103
104
  <div style="height:33vh"></div>
105
+ <script type="module" src="../src/components/Import.js"></script>
104
106
  <script type="module" src="../src/components/FocusCapture.js"></script>
105
107
  <script type="module" src="../src/components/Dialog.js"></script>
106
108
  </body>
package/docs/components/hybrid-component.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -103,5 +104,6 @@
103
104
 
104
105
  </main>
105
106
  <div style="height:33vh"></div>
107
+ <script type="module" src="../src/components/Import.js"></script>
106
108
  </body>
107
109
  </html>
package/docs/components/icon.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Icon - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -34,12 +35,12 @@
34
35
 
35
36
  <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
36
37
  <p>Create an icon using the <code>k-icon</code> component. You can specify the icon by setting the <code>name</code> or <code>src</code> attribute.</p>
38
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"folder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/icon.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
37
39
  <div class="row -mx mb">
38
40
  <div class="col d-span-6 m-span-12 px">
39
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"folder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/path/to/icon.svg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
41
+ <k-icon name="folder"></k-icon>
40
42
  </div>
41
43
  <div class="col d-span-6 m-span-12 px">
42
- <k-icon name="folder"></k-icon>
43
44
  <k-icon src="/path/to/icon.svg"></k-icon>
44
45
  </div>
45
46
  </div>
@@ -61,7 +62,7 @@
61
62
  </div>
62
63
 
63
64
  <h3 id="explicitSource"><a href="#explicitSource" class="no-link">Explicitly Set the Source</a></h3>
64
- <p>You can use any SVG file that is publicly available (on your site or any other public domain) by using the <code>src</code> attribute instead of <code>name</code>. The Icon component will automatically fix the SVG to ensure compatibility by removing width/height attributes and setting fill colors to <code>currentColor</code> so the icon adapts to the current text color.</p>
65
+ <p>You can use any svg file that is publically available (on your site or any other public domain) buy using the <code>src</code> attribute instead of <code>name</code>. The code will attempt to ensure compatability.</p>
65
66
  <div class="row -mx mb">
66
67
  <div class="col d-span-6 m-span-12 px">
67
68
  <k-card label="HTML">
@@ -98,7 +99,7 @@
98
99
  <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Icon <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Icon.js'</span>;<br /> Icon.pathToIcons = <span class="hljs-string">'./pathTo/icons'</span>;<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
99
100
 
100
101
  <h3 id="addingIcons"><a href="#addingIcons" class="no-link">Adding Icons</a></h3>
101
- <p>Add your SVGs to the directory. The Icon component will automatically remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag and set the fill of all objects (path, rect, circle) to <code>currentColor</code>. This allows the icon to adapt to the font color where it is rendered and ensures consistent sizing. However, you can manually prepare your icons this way for better performance.</p>
102
+ <p>Add your SVGs to the directory, remove the <code>height</code> and <code>width</code> attributes from the <code>svg</code> tag (if you do not, the Icon component will attempt to do it for you). The height and width will be managed by CSS to match the font-size. Give all objects (path, rect, circle) a fill of <code>currentColor</code>, this will allow the icon to adapt to the font color where it is rendered.</p>
102
103
  <div class="row -mx mb">
103
104
  <div class="col d-span-6 m-span-12 px">
104
105
  <k-card label="Before">
@@ -144,6 +145,7 @@
144
145
 
145
146
  </main>
146
147
  <div style="height:33vh"></div>
148
+ <script type="module" src="../src/components/Import.js"></script>
147
149
  <script type="module" src="../src/components/Card.js"></script>
148
150
  <script type="module" src="../src/components/Icon.js"></script>
149
151
  </body>
package/docs/components/import.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Import - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -62,6 +63,7 @@
62
63
 
63
64
  </main>
64
65
  <div style="height:33vh"></div>
66
+ <script type="module" src="../src/components/Import.js"></script>
65
67
  <script type="module" src="../src/components/Card.js"></script>
66
68
  </body>
67
69
  </html>
package/docs/components/light-component.html CHANGED
@@ -4,9 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>LightComponent - Base Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
- <link rel="stylesheet" href="../kempo-hljs.css" />
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" />
9
9
  <link rel="stylesheet" href="../styles.css" />
10
+ <script>window.litDisableBundleWarning = true;</script>
10
11
  <script type="module" src="./init.js"></script>
11
12
  </head>
12
13
  <body>
@@ -90,5 +91,6 @@
90
91
 
91
92
  </main>
92
93
  <div style="height:33vh"></div>
94
+ <script type="module" src="../src/components/Import.js"></script>
93
95
  </body>
94
96
  </html>