kempo-ui 0.0.40 → 0.0.42

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 (69) hide show
  1. package/dist/components/Dropdown.js +123 -0
  2. package/dist/components/Icon.js +1 -1
  3. package/dist/components/ShadowComponent.js +1 -1
  4. package/dist/components/Spinner.js +113 -0
  5. package/docs/components/accordion.html +0 -1
  6. package/docs/components/card.html +0 -1
  7. package/docs/components/content-slider.html +0 -1
  8. package/docs/components/dialog.html +0 -1
  9. package/docs/components/dropdown.html +281 -0
  10. package/docs/components/focus-capture.html +0 -1
  11. package/docs/components/hybrid-component.html +0 -1
  12. package/docs/components/import.html +0 -1
  13. package/docs/components/light-component.html +0 -1
  14. package/docs/components/photo-viewer.html +0 -1
  15. package/docs/components/resize.html +0 -1
  16. package/docs/components/shadow-component.html +0 -1
  17. package/docs/components/show-more.html +0 -1
  18. package/docs/components/side-menu.html +0 -1
  19. package/docs/components/sortable.html +0 -1
  20. package/docs/components/spinner.html +213 -0
  21. package/docs/components/split.html +0 -1
  22. package/docs/components/table.html +0 -1
  23. package/docs/components/tableControls.html +0 -1
  24. package/docs/components/tableCustomFields.html +0 -1
  25. package/docs/components/tableFetchRecords.html +0 -1
  26. package/docs/components/tableFieldSortHide.html +0 -1
  27. package/docs/components/tablePagination.html +0 -1
  28. package/docs/components/tableRecordEditing.html +0 -1
  29. package/docs/components/tableRecordFiltering.html +0 -1
  30. package/docs/components/tableRecordHiding.html +0 -1
  31. package/docs/components/tableRecordSearching.html +0 -1
  32. package/docs/components/tableRecordSelection.html +0 -1
  33. package/docs/components/tableRowControls.html +0 -1
  34. package/docs/components/tableSorting.html +0 -1
  35. package/docs/components/tabs.html +0 -1
  36. package/docs/components/tags.html +0 -1
  37. package/docs/components/theme-switcher.html +0 -1
  38. package/docs/components/timestamp.html +0 -1
  39. package/docs/components/toast.html +0 -1
  40. package/docs/components/toggle.html +0 -1
  41. package/docs/components/tree.html +0 -1
  42. package/docs/dev.config.json +0 -1
  43. package/docs/index.html +12 -1
  44. package/docs/nav-1.inc.html +2 -0
  45. package/docs/src/components/Dropdown.js +123 -0
  46. package/docs/src/components/Icon.js +1 -1
  47. package/docs/src/components/ShadowComponent.js +1 -1
  48. package/docs/src/components/Spinner.js +113 -0
  49. package/docs/utils/context.html +0 -1
  50. package/docs/utils/debounce.html +0 -1
  51. package/docs/utils/drag.html +0 -1
  52. package/docs/utils/formatTimestamp.html +0 -1
  53. package/docs/utils/object.html +0 -1
  54. package/docs/utils/propConverters.html +0 -1
  55. package/docs/utils/string.html +0 -1
  56. package/docs/utils/theme.html +0 -1
  57. package/docs/utils/toTitleCase.html +0 -1
  58. package/docs/utils/type.html +0 -1
  59. package/docs/utils/wait.html +0 -1
  60. package/package.json +1 -1
  61. package/src/components/Dropdown.js +358 -0
  62. package/src/components/Icon.js +6 -2
  63. package/src/components/Spinner.js +152 -0
  64. package/tests/components/Dropdown.browser-test.js +557 -0
  65. package/tests/components/HybridComponent.browser-test.js +8 -2
  66. package/tests/components/ShadowComponent.browser-test.js +6 -6
  67. package/tests/components/Spinner.browser-test.js +335 -0
  68. package/docs/init-1.js +0 -4
  69. package/docs/init.js +0 -4
package/docs/components/light-component.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/photo-viewer.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/resize.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/shadow-component.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/show-more.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/side-menu.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/sortable.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/spinner.html ADDED
@@ -0,0 +1,213 @@
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>Spinner - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
9
+ <link rel="stylesheet" href="../kempo-vars.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css" />
11
+ <link rel="stylesheet" href="../kempo-hljs.css" />
12
+ <link rel="stylesheet" href="../styles.css" />
13
+ <script>window.litDisableBundleWarning = true;</script>
14
+ </head>
15
+ <body>
16
+ <k-import src="../nav-1.inc.html"></k-import>
17
+ <main>
18
+ <h1 class="ta-center">Spinner</h1>
19
+
20
+ <k-accordion persistent-id="toc" class="b r mb">
21
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
22
+ <k-accordion-panel name="toc-panel">
23
+ <div class="m">
24
+ <h6>Examples</h6>
25
+ <a href="#basicUsage">Basic Usage</a><br />
26
+ <a href="#sizes">Sizes</a><br />
27
+ <a href="#variants">Variants</a><br />
28
+ <a href="#customColors">Custom Colors</a><br />
29
+ <a href="#withText">With Text</a><br />
30
+ <a href="#buttonLoading">Button Loading State</a><br />
31
+
32
+ <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
33
+ <a href="#constructor">Constructor</a><br />
34
+ <a href="#requirements">Requirements</a><br />
35
+ <a href="#attributes">Attributes</a><br />
36
+ <a href="#cssVariables">CSS Variables</a><br />
37
+ </div>
38
+ </k-accordion-panel>
39
+ </k-accordion>
40
+
41
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
42
+ <p>Create loading spinners using the <code>k-spinner</code> component.</p>
43
+ <div class="row -mx">
44
+ <div class="col m-span-12 px">
45
+ <k-card label="HTML">
46
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
47
+ </k-card>
48
+ </div>
49
+ <div class="col m-span-12 px">
50
+ <k-card label="Output">
51
+ <k-spinner></k-spinner>
52
+ </k-card>
53
+ </div>
54
+ </div>
55
+
56
+ <h3 id="sizes"><a href="#sizes" class="no-link">Sizes</a></h3>
57
+ <p>Control the spinner size using the <code>size</code> attribute. Options are <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, and <code>xl</code>.</p>
58
+ <div class="row -mx">
59
+ <div class="col m-span-12 px">
60
+ <k-card label="HTML">
61
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"md"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xl"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
62
+ </k-card>
63
+ </div>
64
+ <div class="col m-span-12 px">
65
+ <k-card label="Output">
66
+ <div class="d-f ai-c gap">
67
+ <k-spinner size="xs"></k-spinner>
68
+ <k-spinner size="sm"></k-spinner>
69
+ <k-spinner size="md"></k-spinner>
70
+ <k-spinner size="lg"></k-spinner>
71
+ <k-spinner size="xl"></k-spinner>
72
+ </div>
73
+ </k-card>
74
+ </div>
75
+ </div>
76
+
77
+ <h3 id="variants"><a href="#variants" class="no-link">Variants</a></h3>
78
+ <p>Choose from different spinner styles using the <code>variant</code> attribute. Options are <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, and <code>ring</code>.</p>
79
+ <div class="row -mx">
80
+ <div class="col m-span-12 px">
81
+ <k-card label="HTML">
82
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"spinner"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"dots"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"bars"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"pulse"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"ring"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
83
+ </k-card>
84
+ </div>
85
+ <div class="col m-span-12 px">
86
+ <k-card label="Output">
87
+ <div class="d-f ai-c gap-lg">
88
+ <div class="ta-center">
89
+ <k-spinner variant="spinner" size="lg"></k-spinner>
90
+ <p class="mt-sm mb0">spinner</p>
91
+ </div>
92
+ <div class="ta-center">
93
+ <k-spinner variant="dots" size="lg"></k-spinner>
94
+ <p class="mt-sm mb0">dots</p>
95
+ </div>
96
+ <div class="ta-center">
97
+ <k-spinner variant="bars" size="lg"></k-spinner>
98
+ <p class="mt-sm mb0">bars</p>
99
+ </div>
100
+ <div class="ta-center">
101
+ <k-spinner variant="pulse" size="lg"></k-spinner>
102
+ <p class="mt-sm mb0">pulse</p>
103
+ </div>
104
+ <div class="ta-center">
105
+ <k-spinner variant="ring" size="lg"></k-spinner>
106
+ <p class="mt-sm mb0">ring</p>
107
+ </div>
108
+ </div>
109
+ </k-card>
110
+ </div>
111
+ </div>
112
+
113
+ <h3 id="customColors"><a href="#customColors" class="no-link">Custom Colors</a></h3>
114
+ <p>Customize spinner colors using CSS variables.</p>
115
+ <div class="row -mx">
116
+ <div class="col m-span-12 px">
117
+ <k-card label="HTML">
118
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_success)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_danger)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: var(--c_warning)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: #9c27b0"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span></code></pre>
119
+ </k-card>
120
+ </div>
121
+ <div class="col m-span-12 px">
122
+ <k-card label="Output">
123
+ <div class="d-f ai-c gap">
124
+ <k-spinner style="--spinner-color: var(--c_success)"></k-spinner>
125
+ <k-spinner style="--spinner-color: var(--c_danger)"></k-spinner>
126
+ <k-spinner style="--spinner-color: var(--c_warning)"></k-spinner>
127
+ <k-spinner style="--spinner-color: #9c27b0"></k-spinner>
128
+ </div>
129
+ </k-card>
130
+ </div>
131
+ </div>
132
+
133
+ <h3 id="withText"><a href="#withText" class="no-link">With Text</a></h3>
134
+ <p>Combine spinners with text for loading messages.</p>
135
+ <div class="row -mx">
136
+ <div class="col m-span-12 px">
137
+ <k-card label="HTML">
138
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f ai-c gap"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Loading...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
139
+ </k-card>
140
+ </div>
141
+ <div class="col m-span-12 px">
142
+ <k-card label="Output">
143
+ <div class="d-f ai-c gap">
144
+ <k-spinner size="sm"></k-spinner>
145
+ <span>Loading...</span>
146
+ </div>
147
+ </k-card>
148
+ </div>
149
+ </div>
150
+
151
+ <h3 id="buttonLoading"><a href="#buttonLoading" class="no-link">Button Loading State</a></h3>
152
+ <p>Use spinners inside buttons to indicate loading states.</p>
153
+ <div class="row -mx">
154
+ <div class="col m-span-12 px">
155
+ <k-card label="HTML">
156
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span><br /> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br /> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /> Saving...<br /><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">disabled</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-spinner</span><br /> <span class="hljs-attr">size</span>=<span class="hljs-string">"xs"</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--spinner-color: currentColor"</span><br /> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-spinner</span>&gt;</span><br /> Loading...<br /><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
157
+ </k-card>
158
+ </div>
159
+ <div class="col m-span-12 px">
160
+ <k-card label="Output">
161
+ <div class="d-f gap">
162
+ <button disabled>
163
+ <k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
164
+ Saving...
165
+ </button>
166
+ <button class="primary" disabled>
167
+ <k-spinner size="xs" style="--spinner-color: currentColor"></k-spinner>
168
+ Loading...
169
+ </button>
170
+ </div>
171
+ </k-card>
172
+ </div>
173
+ </div>
174
+
175
+ <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
176
+
177
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
178
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
179
+ <h5><code>new Spinner()</code></h5>
180
+
181
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
182
+ <ul>
183
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
184
+ </ul>
185
+
186
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
187
+ <h5><code>size<i>: string</i></code></h5>
188
+ <p>The size of the spinner. Options: <code>xs</code>, <code>sm</code>, <code>md</code> (default), <code>lg</code>, <code>xl</code>.</p>
189
+
190
+ <h5><code>variant<i>: string</i></code></h5>
191
+ <p>The style variant of the spinner. Options: <code>spinner</code> (default), <code>dots</code>, <code>bars</code>, <code>pulse</code>, <code>ring</code>.</p>
192
+
193
+ <h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
194
+ <h5><code>--spinner-size</code></h5>
195
+ <p>The width and height of the spinner. Set automatically based on <code>size</code> attribute.</p>
196
+
197
+ <h5><code>--spinner-border-width</code></h5>
198
+ <p>The border thickness for spinner and ring variants. Set automatically based on <code>size</code> attribute.</p>
199
+
200
+ <h5><code>--spinner-color</code></h5>
201
+ <p>The primary color of the spinner. Default is <code>var(--c_primary)</code>.</p>
202
+
203
+ <h5><code>--spinner-track-color</code></h5>
204
+ <p>The background track color for the spinner variant. Default is <code>var(--c_border)</code>.</p>
205
+
206
+ </main>
207
+ <div style="height:33vh"></div>
208
+ <script type="module" src="../src/components/Spinner.js"></script>
209
+ <script type="module" src="../src/components/Import.js"></script>
210
+ <script type="module" src="../src/components/Accordion.js"></script>
211
+ <script type="module" src="../src/components/Card.js"></script>
212
+ </body>
213
+ </html>
package/docs/components/split.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/table.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/tableControls.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  <script>
16
15
  window.contacts = [];
17
16
  function generateContact(){
package/docs/components/tableCustomFields.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  <script>
16
15
  window.contacts = [];
17
16
  function generateContact(){
package/docs/components/tableFetchRecords.html CHANGED
@@ -12,7 +12,6 @@
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
14
14
  <script>window.litDisableBundleWarning = true;</script>
15
- <script src="../init-1.js" type="module"></script>
16
15
  <script>
17
16
  window.contacts = [];
18
17
  function generateContact(){
package/docs/components/tableFieldSortHide.html CHANGED
@@ -12,7 +12,6 @@
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
14
14
  <script>window.litDisableBundleWarning = true;</script>
15
- <script src="../init-1.js" type="module"></script>
16
15
  <script>
17
16
  window.contacts = [];
18
17
  function generateContact(){
package/docs/components/tablePagination.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  <script>
16
15
  window.contacts = [];
17
16
  function generateContact(){
package/docs/components/tableRecordEditing.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  <script>
16
15
  window.contacts = [];
17
16
  function generateContact(){
package/docs/components/tableRecordFiltering.html CHANGED
@@ -12,7 +12,6 @@
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
14
14
  <script>window.litDisableBundleWarning = true;</script>
15
- <script src="../init-1.js" type="module"></script>
16
15
  <script>
17
16
  window.contacts = [];
18
17
  function generateContact(){
package/docs/components/tableRecordHiding.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  <script>
16
15
  window.contacts = [];
17
16
  function generateContact(){
package/docs/components/tableRecordSearching.html CHANGED
@@ -12,7 +12,6 @@
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
14
14
  <script>window.litDisableBundleWarning = true;</script>
15
- <script src="../init-1.js" type="module"></script>
16
15
  <script>
17
16
  window.contacts = [];
18
17
  function generateContact(){
package/docs/components/tableRecordSelection.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  <script>
16
15
  window.contacts = [];
17
16
  function generateContact(){
package/docs/components/tableRowControls.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  <script>
16
15
  window.contacts = [];
17
16
  function generateContact(){
package/docs/components/tableSorting.html CHANGED
@@ -12,7 +12,6 @@
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
14
14
  <script>window.litDisableBundleWarning = true;</script>
15
- <script src="../init-1.js" type="module"></script>
16
15
  <script>
17
16
  window.contacts = [];
18
17
  function generateContact(){
package/docs/components/tabs.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/tags.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/theme-switcher.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/timestamp.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/toast.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/toggle.html CHANGED
@@ -11,7 +11,6 @@
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
14
- <script src="../init-1.js" type="module"></script>
15
14
  </head>
16
15
  <body>
17
16
  <k-import src="../nav-1.inc.html"></k-import>
package/docs/components/tree.html CHANGED
@@ -12,7 +12,6 @@
12
12
  <link rel="stylesheet" href="../kempo-hljs.css" />
13
13
  <link rel="stylesheet" href="../styles.css" />
14
14
  <script>window.litDisableBundleWarning = true;</script>
15
- <script src="../init-1.js" type="module"></script>
16
15
  </head>
17
16
 
18
17
  <body>
package/docs/dev.config.json CHANGED
@@ -1,6 +1,5 @@
1
1
  {
2
2
  "customRoutes": {
3
- "/kempo-vars.css": "../src/kempo-vars.css",
4
3
  "/icons/**": "../icons/**",
5
4
  "/src/**": "../src/**"
6
5
  },
package/docs/index.html CHANGED
@@ -10,7 +10,6 @@
10
10
  <link rel="stylesheet" href="./kempo-hljs.css">
11
11
  <link rel="stylesheet" href="./kempo-vars.css">
12
12
  <script>window.litDisableBundleWarning = true;</script>
13
- <script src="./init.js" type="module"></script>
14
13
  </head>
15
14
  <body>
16
15
  <k-import src="nav.inc.html"></k-import>
@@ -78,6 +77,12 @@
78
77
  <p class="tc-muted">Modal dialogs with focus trapping and customizable buttons.</p>
79
78
  </a>
80
79
  </div>
80
+ <div class="span-12 t-span-6 d-span-4 px">
81
+ <a href="./components/dropdown.html" class="card mb no-link d-b">
82
+ <h3 class="tc-primary">Dropdown</h3>
83
+ <p class="tc-muted">Action menus with keyboard navigation and customizable positioning.</p>
84
+ </a>
85
+ </div>
81
86
  <div class="span-12 t-span-6 d-span-4 px">
82
87
  <a href="./components/focus-capture.html" class="card mb no-link d-b">
83
88
  <h3 class="tc-primary">FocusCapture</h3>
@@ -126,6 +131,12 @@
126
131
  <p class="tc-muted">Drag-and-drop lists with reordering and sort events.</p>
127
132
  </a>
128
133
  </div>
134
+ <div class="span-12 t-span-6 d-span-4 px">
135
+ <a href="./components/spinner.html" class="card mb no-link d-b">
136
+ <h3 class="tc-primary">Spinner</h3>
137
+ <p class="tc-muted">Loading indicators with multiple styles and sizes.</p>
138
+ </a>
139
+ </div>
129
140
  <div class="span-12 t-span-6 d-span-4 px">
130
141
  <a href="./components/split.html" class="card mb no-link d-b">
131
142
  <h3 class="tc-primary">Split</h3>
package/docs/nav-1.inc.html CHANGED
@@ -36,6 +36,7 @@
36
36
  <a href="../components/color-picker.html">ColorPicker</a>
37
37
  <a href="../components/content-slider.html">Content Slider</a>
38
38
  <a href="../components/dialog.html">Dialog</a>
39
+ <a href="../components/dropdown.html">Dropdown</a>
39
40
  <a href="../components/focus-capture.html">FocusCapture</a>
40
41
  <a href="../components/icon.html">Icon</a>
41
42
  <a href="../components/import.html">Import</a>
@@ -44,6 +45,7 @@
44
45
  <a href="../components/show-more.html">Show More</a>
45
46
  <a href="../components/side-menu.html">Side Menu</a>
46
47
  <a href="../components/sortable.html">Sortable</a>
48
+ <a href="../components/spinner.html">Spinner</a>
47
49
  <a href="../components/split.html">Split</a>
48
50
  <a href="../components/table.html">Table</a>
49
51
  <a href="../components/tabs.html">Tabs</a>