kempo-ui 0.3.4 → 0.3.6

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 (143) hide show
  1. package/AGENTS.md +2 -1
  2. package/dist/components/Aside.js +2 -0
  3. package/docs/components/accordion.html +240 -8
  4. package/docs/components/aside-items.html +13 -9
  5. package/docs/components/aside-menu.html +13 -9
  6. package/docs/components/aside-push.html +11 -6
  7. package/docs/components/aside.html +239 -8
  8. package/docs/components/card.html +238 -7
  9. package/docs/components/color-picker.html +245 -14
  10. package/docs/components/content-slider.html +240 -8
  11. package/docs/components/context.html +241 -7
  12. package/docs/components/dialog.html +238 -7
  13. package/docs/components/dropdown.html +238 -7
  14. package/docs/components/filter-list.html +239 -10
  15. package/docs/components/focus-capture.html +241 -10
  16. package/docs/components/html-editor.html +266 -35
  17. package/docs/components/hybrid-component.html +238 -6
  18. package/docs/components/icon.html +239 -9
  19. package/docs/components/import.html +239 -8
  20. package/docs/components/light-component.html +239 -7
  21. package/docs/components/nav.html +240 -8
  22. package/docs/components/photo-viewer.html +239 -9
  23. package/docs/components/resize.html +240 -9
  24. package/docs/components/shadow-component.html +239 -7
  25. package/docs/components/show-more.html +237 -8
  26. package/docs/components/sortable.html +239 -8
  27. package/docs/components/spinner.html +237 -6
  28. package/docs/components/split.html +241 -10
  29. package/docs/components/table.html +241 -11
  30. package/docs/components/tableControls.html +240 -7
  31. package/docs/components/tableCustomFields.html +241 -8
  32. package/docs/components/tableFetchRecords.html +239 -7
  33. package/docs/components/tableFieldSortHide.html +239 -7
  34. package/docs/components/tablePagination.html +246 -13
  35. package/docs/components/tablePlaceholder.html +241 -8
  36. package/docs/components/tableRecordEditing.html +241 -8
  37. package/docs/components/tableRecordFiltering.html +239 -7
  38. package/docs/components/tableRecordHiding.html +241 -9
  39. package/docs/components/tableRecordSearching.html +239 -7
  40. package/docs/components/tableRecordSelection.html +240 -7
  41. package/docs/components/tableRowControls.html +241 -8
  42. package/docs/components/tableServerSync.html +245 -11
  43. package/docs/components/tableSorting.html +239 -7
  44. package/docs/components/tabs.html +240 -7
  45. package/docs/components/tags.html +239 -7
  46. package/docs/components/theme-select.html +239 -7
  47. package/docs/components/theme-switcher.html +240 -8
  48. package/docs/components/timestamp.html +239 -8
  49. package/docs/components/toast.html +240 -8
  50. package/docs/components/toggle.html +240 -9
  51. package/docs/components/tree.html +239 -8
  52. package/docs/index.html +244 -6
  53. package/docs/prod.config.json +0 -4
  54. package/docs/src/components/Aside.js +2 -0
  55. package/docs/utils/context.html +237 -6
  56. package/docs/utils/cookie.html +251 -21
  57. package/docs/utils/debounce.html +236 -5
  58. package/docs/utils/drag.html +236 -5
  59. package/docs/utils/elevation.html +238 -6
  60. package/docs/utils/formatTimestamp.html +233 -3
  61. package/docs/utils/object.html +236 -5
  62. package/docs/utils/propConverters.html +233 -3
  63. package/docs/utils/string.html +236 -5
  64. package/docs/utils/theme.html +237 -6
  65. package/docs/utils/toTitleCase.html +233 -3
  66. package/docs/utils/type.html +236 -5
  67. package/docs/utils/wait.html +236 -5
  68. package/docs-src/.config.js +16 -0
  69. package/docs-src/bare.template.html +16 -0
  70. package/docs-src/components/accordion.page.html +201 -0
  71. package/docs-src/components/aside-items.page.html +36 -0
  72. package/docs-src/components/aside-menu.page.html +36 -0
  73. package/docs-src/components/aside-push.page.html +20 -0
  74. package/docs-src/components/aside.page.html +551 -0
  75. package/docs-src/components/card.page.html +78 -0
  76. package/docs-src/components/color-picker.page.html +559 -0
  77. package/docs-src/components/content-slider.page.html +266 -0
  78. package/docs-src/components/context.page.html +214 -0
  79. package/docs-src/components/dialog.page.html +365 -0
  80. package/docs-src/components/dropdown.page.html +300 -0
  81. package/docs-src/components/filter-list.page.html +117 -0
  82. package/docs-src/components/focus-capture.page.html +97 -0
  83. package/docs-src/components/html-editor.page.html +423 -0
  84. package/docs-src/components/hybrid-component.page.html +96 -0
  85. package/docs-src/components/icon.page.html +208 -0
  86. package/docs-src/components/import.page.html +76 -0
  87. package/docs-src/components/light-component.page.html +99 -0
  88. package/docs-src/components/nav.page.html +106 -0
  89. package/docs-src/components/photo-viewer.page.html +253 -0
  90. package/docs-src/components/resize.page.html +161 -0
  91. package/docs-src/components/shadow-component.page.html +84 -0
  92. package/docs-src/components/show-more.page.html +113 -0
  93. package/docs-src/components/sortable.page.html +117 -0
  94. package/docs-src/components/spinner.page.html +197 -0
  95. package/docs-src/components/split.page.html +195 -0
  96. package/docs-src/components/table.page.html +283 -0
  97. package/docs-src/components/tableControls.page.html +64 -0
  98. package/docs-src/components/tableCustomFields.page.html +124 -0
  99. package/docs-src/components/tableFetchRecords.page.html +95 -0
  100. package/docs-src/components/tableFieldSortHide.page.html +56 -0
  101. package/docs-src/components/tablePagination.page.html +85 -0
  102. package/docs-src/components/tablePlaceholder.page.html +73 -0
  103. package/docs-src/components/tableRecordEditing.page.html +161 -0
  104. package/docs-src/components/tableRecordFiltering.page.html +69 -0
  105. package/docs-src/components/tableRecordHiding.page.html +65 -0
  106. package/docs-src/components/tableRecordSearching.page.html +56 -0
  107. package/docs-src/components/tableRecordSelection.page.html +60 -0
  108. package/docs-src/components/tableRowControls.page.html +62 -0
  109. package/docs-src/components/tableServerSync.page.html +129 -0
  110. package/docs-src/components/tableSorting.page.html +54 -0
  111. package/docs-src/components/tabs.page.html +201 -0
  112. package/docs-src/components/tags.page.html +157 -0
  113. package/docs-src/components/theme-select.page.html +106 -0
  114. package/docs-src/components/theme-switcher.page.html +122 -0
  115. package/docs-src/components/timestamp.page.html +109 -0
  116. package/docs-src/components/toast.page.html +338 -0
  117. package/docs-src/components/toggle.page.html +177 -0
  118. package/docs-src/components/tree.page.html +356 -0
  119. package/docs-src/default.template.html +28 -0
  120. package/docs-src/index.page.html +312 -0
  121. package/docs-src/nav.fragment.html +228 -0
  122. package/docs-src/utils/context.page.html +143 -0
  123. package/docs-src/utils/cookie.page.html +128 -0
  124. package/docs-src/utils/debounce.page.html +42 -0
  125. package/docs-src/utils/drag.page.html +64 -0
  126. package/docs-src/utils/elevation.page.html +144 -0
  127. package/docs-src/utils/formatTimestamp.page.html +76 -0
  128. package/docs-src/utils/object.page.html +76 -0
  129. package/docs-src/utils/propConverters.page.html +73 -0
  130. package/docs-src/utils/string.page.html +66 -0
  131. package/docs-src/utils/theme.page.html +136 -0
  132. package/docs-src/utils/toTitleCase.page.html +52 -0
  133. package/docs-src/utils/type.page.html +31 -0
  134. package/docs-src/utils/wait.page.html +31 -0
  135. package/package.json +4 -4
  136. package/scripts/build.js +5 -0
  137. package/scripts/docs.js +5 -52
  138. package/src/components/Aside.js +2 -0
  139. package/tests/components/Aside.browser-test.js +35 -0
  140. package/docs/dev.config.json +0 -20
  141. package/docs/nav-1.inc.html +0 -168
  142. package/docs/nav.inc.html +0 -168
  143. package/docs/nav.inc.js +0 -70
package/docs/utils/wait.html CHANGED
@@ -11,10 +11,240 @@
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
+
14
15
  </head>
15
16
  <body>
16
- <k-import src="../nav-1.inc.html"></k-import>
17
+
18
+ <k-nav fixed class="bg-primary">
19
+ <button id="toggleNavSideMenu" class="link">
20
+ <k-icon name="menu"></k-icon>
21
+ </button>
22
+ <a href="../" class="d-if ph" style="align-items: center">
23
+ <img src="../media/icon32.png" alt="Kempo UI Icon" class="pr" />
24
+ Kempo UI
25
+ </a>
26
+ <div style="position:relative;margin:0 .25rem;align-self:center;" theme="light">
27
+ <input id="navSearchInput" type="search" placeholder="Search docs..." autocomplete="off" style="width:11rem;" />
28
+ <div id="navSearchDropdown" hidden theme="light" style="position:absolute;top:calc(100% + 4px);left:0;width:min(480px,90vw);max-height:70vh;background:var(--c_bg);border:1px solid var(--c_border);border-radius:var(--radius);overflow:auto;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);">
29
+ <k-filter-list id="navSearchList" style="display:block;padding:.25rem 0;">
30
+ <k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
31
+ <k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
32
+ <k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
33
+ <k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
34
+ <k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
35
+ <k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
36
+ <k-filter-item filter-keywords="dialog modal popup components"><a href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
37
+ <k-filter-item filter-keywords="dropdown select components"><a href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
38
+ <k-filter-item filter-keywords="filter list filterlist components"><a href="../components/filter-list.html">Filter List<br><small>Component</small></a></k-filter-item>
39
+ <k-filter-item filter-keywords="focus capture focuscapture components"><a href="../components/focus-capture.html">Focus Capture<br><small>Component</small></a></k-filter-item>
40
+ <k-filter-item filter-keywords="html editor components"><a href="../components/html-editor.html">HTML Editor<br><small>Component</small></a></k-filter-item>
41
+ <k-filter-item filter-keywords="icon components"><a href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
42
+ <k-filter-item filter-keywords="import components"><a href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
43
+ <k-filter-item filter-keywords="nav navbar navigation components"><a href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
44
+ <k-filter-item filter-keywords="photo viewer photoviewer components"><a href="../components/photo-viewer.html">Photo Viewer<br><small>Component</small></a></k-filter-item>
45
+ <k-filter-item filter-keywords="resize components"><a href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
46
+ <k-filter-item filter-keywords="show more showmore components"><a href="../components/show-more.html">Show More<br><small>Component</small></a></k-filter-item>
47
+ <k-filter-item filter-keywords="sortable drag drop sort components"><a href="../components/sortable.html">Sortable<br><small>Component</small></a></k-filter-item>
48
+ <k-filter-item filter-keywords="spinner loading components"><a href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
49
+ <k-filter-item filter-keywords="split pane components"><a href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
50
+ <k-filter-item filter-keywords="table data grid components"><a href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
51
+ <k-filter-item filter-keywords="table controls advanced example"><a href="../components/tableControls.html">Table &mdash; Controls<br><small>Advanced Example</small></a></k-filter-item>
52
+ <k-filter-item filter-keywords="table custom fields advanced example"><a href="../components/tableCustomFields.html">Table &mdash; Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
53
+ <k-filter-item filter-keywords="table fetch records advanced example"><a href="../components/tableFetchRecords.html">Table &mdash; Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
54
+ <k-filter-item filter-keywords="table field sort hide advanced example"><a href="../components/tableFieldSortHide.html">Table &mdash; Field Sort &amp; Hide<br><small>Advanced Example</small></a></k-filter-item>
55
+ <k-filter-item filter-keywords="table pagination advanced example"><a href="../components/tablePagination.html">Table &mdash; Pagination<br><small>Advanced Example</small></a></k-filter-item>
56
+ <k-filter-item filter-keywords="table record editing advanced example"><a href="../components/tableRecordEditing.html">Table &mdash; Record Editing<br><small>Advanced Example</small></a></k-filter-item>
57
+ <k-filter-item filter-keywords="table record filtering advanced example"><a href="../components/tableRecordFiltering.html">Table &mdash; Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
58
+ <k-filter-item filter-keywords="table record hiding advanced example"><a href="../components/tableRecordHiding.html">Table &mdash; Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
59
+ <k-filter-item filter-keywords="table record searching advanced example"><a href="../components/tableRecordSearching.html">Table &mdash; Record Searching<br><small>Advanced Example</small></a></k-filter-item>
60
+ <k-filter-item filter-keywords="table record selection advanced example"><a href="../components/tableRecordSelection.html">Table &mdash; Record Selection<br><small>Advanced Example</small></a></k-filter-item>
61
+ <k-filter-item filter-keywords="table row controls advanced example"><a href="../components/tableRowControls.html">Table &mdash; Row Controls<br><small>Advanced Example</small></a></k-filter-item>
62
+ <k-filter-item filter-keywords="table server sync advanced example"><a href="../components/tableServerSync.html">Table &mdash; Server Sync<br><small>Advanced Example</small></a></k-filter-item>
63
+ <k-filter-item filter-keywords="table sorting advanced example"><a href="../components/tableSorting.html">Table &mdash; Sorting<br><small>Advanced Example</small></a></k-filter-item>
64
+ <k-filter-item filter-keywords="table placeholder advanced example"><a href="../components/tablePlaceholder.html">Table &mdash; Placeholder<br><small>Advanced Example</small></a></k-filter-item>
65
+ <k-filter-item filter-keywords="tabs tab panel components"><a href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
66
+ <k-filter-item filter-keywords="tags tag input components"><a href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
67
+ <k-filter-item filter-keywords="theme select dropdown dark light components"><a href="../components/theme-select.html">Theme Select<br><small>Component</small></a></k-filter-item>
68
+ <k-filter-item filter-keywords="theme switcher dark light components"><a href="../components/theme-switcher.html">Theme Switcher<br><small>Component</small></a></k-filter-item>
69
+ <k-filter-item filter-keywords="timestamp date time components"><a href="../components/timestamp.html">Timestamp<br><small>Component</small></a></k-filter-item>
70
+ <k-filter-item filter-keywords="toast notification alert components"><a href="../components/toast.html">Toast<br><small>Component</small></a></k-filter-item>
71
+ <k-filter-item filter-keywords="toggle switch checkbox components"><a href="../components/toggle.html">Toggle<br><small>Component</small></a></k-filter-item>
72
+ <k-filter-item filter-keywords="tree treeview components"><a href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
73
+ <k-filter-item filter-keywords="shadow component base"><a href="../components/shadow-component.html">Shadow Component<br><small>Base Component</small></a></k-filter-item>
74
+ <k-filter-item filter-keywords="light component base"><a href="../components/light-component.html">Light Component<br><small>Base Component</small></a></k-filter-item>
75
+ <k-filter-item filter-keywords="hybrid component base"><a href="../components/hybrid-component.html">Hybrid Component<br><small>Base Component</small></a></k-filter-item>
76
+ <k-filter-item filter-keywords="cookie utils utility"><a href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
77
+ <k-filter-item filter-keywords="context utils utility"><a href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
78
+ <k-filter-item filter-keywords="debounce utils utility"><a href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
79
+ <k-filter-item filter-keywords="drag utils utility"><a href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
80
+ <k-filter-item filter-keywords="elevation z-index stacking utils"><a href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
81
+ <k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a href="../utils/formatTimestamp.html">formatTimestamp<br><small>Utility</small></a></k-filter-item>
82
+ <k-filter-item filter-keywords="object utils utility"><a href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
83
+ <k-filter-item filter-keywords="propconverters prop converters utils utility"><a href="../utils/propConverters.html">propConverters<br><small>Utility</small></a></k-filter-item>
84
+ <k-filter-item filter-keywords="string utils utility"><a href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
85
+ <k-filter-item filter-keywords="theme utils utility"><a href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
86
+ <k-filter-item filter-keywords="type utils utility"><a href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
87
+ <k-filter-item filter-keywords="wait async utils utility"><a href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
88
+ </k-filter-list>
89
+ </div>
90
+ </div>
91
+ <div class="flex"></div>
92
+ <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
93
+ <a href="https://www.npmjs.com/package/kempo-ui" target="_blank"><k-icon name="npm"></k-icon></a>
94
+ <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icon></a>
95
+ <k-theme-switcher></k-theme-switcher>
96
+ </k-nav>
97
+ <div style="width: 100%; height: 4rem;"></div>
98
+ <k-aside id="navSideMenu" main="overlay" state="offscreen">
99
+ <menu>
100
+ <a href="../" class="ta-center bb mb r0">
101
+ <h1 class="tc-primary">Kempo UI</h1>
102
+ <img src="../media/icon128.png" alt="Kempo UI Icon" />
103
+ </a>
104
+
105
+ <div class="pl mb">
106
+ <h3>Components</h3>
107
+ <a href="../components/accordion.html">Accordion</a>
108
+ <a href="../components/aside.html">Aside</a>
109
+ <a href="../components/card.html">Card</a>
110
+ <a href="../components/color-picker.html">ColorPicker</a>
111
+ <a href="../components/content-slider.html">Content Slider</a>
112
+ <a href="../components/context.html">Context</a>
113
+ <a href="../components/dialog.html">Dialog</a>
114
+ <a href="../components/dropdown.html">Dropdown</a>
115
+ <a href="../components/filter-list.html">Filter List</a>
116
+ <a href="../components/focus-capture.html">FocusCapture</a>
117
+ <a href="../components/html-editor.html">HTML Editor</a>
118
+ <a href="../components/icon.html">Icon</a>
119
+ <a href="../components/import.html">Import</a>
120
+ <a href="../components/nav.html">Nav</a>
121
+ <a href="../components/photo-viewer.html">Photo Viewer</a>
122
+ <a href="../components/resize.html">Resize</a>
123
+ <a href="../components/show-more.html">Show More</a>
124
+ <a href="../components/sortable.html">Sortable</a>
125
+ <a href="../components/spinner.html">Spinner</a>
126
+ <a href="../components/split.html">Split</a>
127
+ <a href="../components/table.html">Table</a>
128
+ <a href="../components/tabs.html">Tabs</a>
129
+ <a href="../components/tags.html">Tags</a>
130
+ <a href="../components/theme-select.html">Theme Select</a>
131
+ <a href="../components/theme-switcher.html">Theme Switcher</a>
132
+ <a href="../components/timestamp.html">Timestamp</a>
133
+ <a href="../components/toast.html">Toast</a>
134
+ <a href="../components/toggle.html">Toggle</a>
135
+ <a href="../components/tree.html">Tree</a>
136
+ </div>
137
+
138
+ <h5 class="mb0">Base Components</h5>
139
+ <div class="pl mb">
140
+ <a href="../components/shadow-component.html">Shadow Component</a>
141
+ <a href="../components/light-component.html">Light Component</a>
142
+ <a href="../components/hybrid-component.html">Hybrid Component</a>
143
+ </div>
144
+
145
+ <h5 class="mb0">Utils</h5>
146
+ <div class="pl mb">
147
+ <a href="../utils/cookie.html">cookie</a>
148
+ <a href="../utils/context.html">context</a>
149
+ <a href="../utils/debounce.html">debounce</a>
150
+ <a href="../utils/drag.html">drag</a>
151
+ <a href="../utils/elevation.html">elevation</a>
152
+ <a href="../utils/formatTimestamp.html">formatTimestamp</a>
153
+ <a href="../utils/object.html">object</a>
154
+ <a href="../utils/propConverters.html">propConverters</a>
155
+ <a href="../utils/string.html">string</a>
156
+ <a href="../utils/theme.html">theme</a>
157
+ <a href="../utils/type.html">type</a>
158
+ <a href="../utils/wait.html">wait</a>
159
+ </div>
160
+ </menu>
161
+ </k-aside>
162
+ <style>
163
+ #navSearchList a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none;color:var(--tc);}
164
+ #navSearchList a:hover{background:rgba(128,128,128,.15);}
165
+ #navSearchList a small{display:block;color:var(--tc_muted);}
166
+ </style>
167
+ <script src="../src/components/Nav.js" type="module"></script>
168
+ <script src="../src/components/FilterList.js" type="module"></script>
169
+ <script src="../src/components/FilterItem.js" type="module"></script>
170
+ <script src="../src/components/Aside.js" type="module"></script>
171
+ <script src="../src/components/Icon.js" type="module"></script>
172
+ <script src="../src/components/ThemeSwitcher.js" type="module"></script>
173
+ <script type="module">
174
+ import debounce from '../src/utils/debounce.js';
175
+
176
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
177
+ await window.customElements.whenDefined('k-aside');
178
+ document.getElementById('navSideMenu').toggle();
179
+ });
180
+
181
+ document.addEventListener('click', function(e) {
182
+ if(e.target.matches('a[href^="#"]')) {
183
+ e.preventDefault();
184
+ const targetId = e.target.getAttribute('href').replace('#', '');
185
+ const target = document.getElementById(targetId);
186
+ if(target) {
187
+ target.scrollIntoView({ behavior: 'smooth' });
188
+ const url = window.location.pathname + window.location.search + '#' + targetId;
189
+ history.replaceState(null, '', url);
190
+ }
191
+ }
192
+ });
193
+
194
+ /*
195
+ Nav Search
196
+ */
197
+ const searchInput = document.getElementById('navSearchInput');
198
+ const searchDropdown = document.getElementById('navSearchDropdown');
199
+ let navSearchList = null;
200
+
201
+ const openSearch = async () => {
202
+ await customElements.whenDefined('k-filter-list');
203
+ if(!navSearchList) navSearchList = document.getElementById('navSearchList');
204
+ navSearchList.filter(searchInput.value);
205
+ searchDropdown.hidden = false;
206
+ };
207
+
208
+ const closeSearch = () => {
209
+ searchDropdown.hidden = true;
210
+ navSearchList?.clearFocus();
211
+ };
212
+
213
+ searchInput.addEventListener('focus', openSearch);
214
+
215
+ searchInput.addEventListener('input', debounce(e => {
216
+ navSearchList?.filter(e.target.value);
217
+ }, 150));
218
+
219
+ searchInput.addEventListener('keydown', e => {
220
+ if(e.key === 'Escape') {
221
+ searchInput.value = '';
222
+ searchInput.blur();
223
+ closeSearch();
224
+ } else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
225
+ navSearchList?.handleKeydown(e);
226
+ }
227
+ });
228
+
229
+ searchInput.addEventListener('blur', () => {
230
+ setTimeout(closeSearch, 150);
231
+ });
232
+
233
+ document.addEventListener('keydown', e => {
234
+ let active = document.activeElement;
235
+ while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
236
+ const tag = active?.tagName;
237
+ if(tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
238
+ if(e.metaKey || e.ctrlKey || e.altKey) return;
239
+ if(e.key.length === 1) {
240
+ searchInput.focus();
241
+ }
242
+ });
243
+ </script>
244
+
245
+
17
246
  <k-main>
247
+
18
248
  <h1>Wait Utilities</h1>
19
249
 
20
250
  <k-accordion persistent-id="toc" class="b r mb">
@@ -38,11 +268,12 @@
38
268
  <h3 id="waitFrames"><a href="#waitFrames" class="no-link">waitFrames</a></h3>
39
269
  <p>Creates a promise that resolves after a specified number of animation frames.</p>
40
270
  <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { waitFrames } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/wait.js'</span>;<br /><br /><span class="hljs-comment">// Wait for 2 animation frames</span><br />await waitFrames(<span class="hljs-number">2</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'This runs after 2 frames'</span>);</code></pre>
41
-
271
+
42
272
  </k-main>
43
273
  <div style="height:33vh"></div>
44
- <script type="module" src="../src/components/Import.js"></script>
45
274
  <script type="module" src="../src/components/Main.js"></script>
46
- <script type="module" src="../src/components/Accordion.js"></script>
275
+
276
+ <script type="module" src="../src/components/Accordion.js"></script>
277
+
47
278
  </body>
48
- </html>
279
+ </html>
package/docs-src/.config.js ADDED
@@ -0,0 +1,16 @@
1
+ export default {
2
+ customRoutes: {
3
+ "icons/**": "../icons/**",
4
+ "src/**": "../src/**",
5
+ "media/**": "../docs/media/**",
6
+ "kempo-hljs.css": "../docs/kempo-hljs.css",
7
+ "kempo-vars.css": "../docs/kempo-vars.css",
8
+ "kempo.min.css": "../docs/kempo.min.css",
9
+ "styles.css": "../docs/styles.css",
10
+ "manifest.json": "../docs/manifest.json"
11
+ },
12
+ templating: {
13
+ ssr: true,
14
+ ssrPriority: true
15
+ }
16
+ };
package/docs-src/bare.template.html ADDED
@@ -0,0 +1,16 @@
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>{{title}}</title>
7
+ <link rel="stylesheet" href="{{pathToRoot}}kempo-vars.css" />
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
9
+ <script>window.litDisableBundleWarning = true;</script>
10
+ <location name="head" />
11
+ </head>
12
+ <body>
13
+ <location />
14
+ <location name="scripts" />
15
+ </body>
16
+ </html>
package/docs-src/components/accordion.page.html ADDED
@@ -0,0 +1,201 @@
1
+ <page pageName="Accordion" title="Accordion - Components - Kempo Docs - A Web Components Solution">
2
+ <content>
3
+ <k-accordion persistent-id="toc" class="b r mb">
4
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
5
+ <k-accordion-panel name="toc-panel">
6
+ <div class="m ">
7
+ <h6>Examples</h6>
8
+ <a href="#basicUsage">Basic Usage</a><br />
9
+ <a href="#defaultOpen">Default Open Panel</a><br />
10
+ <a href="#multiple">Multiple Panels Mode</a><br />
11
+ <a href="#persistent">Persistent State Example</a><br />
12
+ <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
13
+ <a href="#accordion-ref">Accordion</a><br />
14
+ <a href="#accordion-header-ref">AccordionHeader</a><br />
15
+ <a href="#accordion-panel-ref">AccordionPanel</a><br />
16
+ <a href="#events">Events</a><br />
17
+ </div>
18
+ </k-accordion-panel>
19
+ </k-accordion>
20
+
21
+ <h3>Description</h3>
22
+ <p>A widget that allows a single panel of content to be opened and closed.</p>
23
+
24
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
25
+ <div class="row -mx mb">
26
+ <div class="col d-span-6 m-span-12 px">
27
+ <k-card label="HTML">
28
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</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">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</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">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</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">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
29
+ </k-card>
30
+ </div>
31
+ <div class="col d-span-6 m-span-12 px">
32
+ <k-card label="Results">
33
+ <k-accordion class="mb">
34
+ <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
35
+ <k-accordion-panel name="panel1">
36
+ <p class="m">Panel 1 content</p>
37
+ </k-accordion-panel>
38
+ <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
39
+ <k-accordion-panel name="panel2">
40
+ <p class="m">Panel 2 content</p>
41
+ </k-accordion-panel>
42
+ <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
43
+ <k-accordion-panel name="panel3">
44
+ <p class="m">Panel 3 content</p>
45
+ </k-accordion-panel>
46
+ </k-accordion>
47
+ </k-card>
48
+ </div>
49
+ </div>
50
+
51
+
52
+
53
+ <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link">Default Open Panel</a></h3>
54
+ <p>You can have a panel open by default by adding the <code>active</code> attribute to both the header and the
55
+ <div class="row -mx mb">
56
+ <div class="col d-span-6 m-span-12 px">
57
+ <k-card label="HTML">
58
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>=<span class="hljs-string">"true"</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">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</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">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</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">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
59
+ </k-card>
60
+ </div>
61
+ <div class="col d-span-6 m-span-12 px">
62
+ <k-card label="Results">
63
+ <k-accordion class="mb">
64
+ <k-accordion-header for-panel="panel1" active>Panel 1</k-accordion-header>
65
+ <k-accordion-panel name="panel1" active>
66
+ <p class="m">Panel 1 content</p>
67
+ </k-accordion-panel>
68
+ <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
69
+ <k-accordion-panel name="panel2">
70
+ <p class="m">Panel 2 content</p>
71
+ </k-accordion-panel>
72
+ <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
73
+ <k-accordion-panel name="panel3">
74
+ <p class="m">Panel 3 content</p>
75
+ </k-accordion-panel>
76
+ </k-accordion>
77
+ </k-card>
78
+ </div>
79
+ </div>
80
+
81
+ <h3 id="multiple"><a href="#multiple" class="no-link">Multiple Panels Mode</a></h3>
82
+ <p>Add the <code>multiple</code> attribute to <code>k-accordion</code> to allow more than one panel to be open at a
83
+ time.</p>
84
+ <div class="row -mx mb">
85
+ <div class="col d-span-6 m-span-12 px">
86
+ <k-card label="HTML">
87
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span> <span class="hljs-attr">multiple</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</span> <span class="hljs-attr">active</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">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</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">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</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">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
88
+ </k-card>
89
+ </div>
90
+ <div class="col d-span-6 m-span-12 px">
91
+ <k-card label="Results">
92
+ <k-accordion class="mb" multiple>
93
+ <k-accordion-header for-panel="panel1" active>Panel 1</k-accordion-header>
94
+ <k-accordion-panel name="panel1" active>
95
+ <p class="m">Panel 1 content</p>
96
+ </k-accordion-panel>
97
+ <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
98
+ <k-accordion-panel name="panel2">
99
+ <p class="m">Panel 2 content</p>
100
+ </k-accordion-panel>
101
+ <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
102
+ <k-accordion-panel name="panel3">
103
+ <p class="m">Panel 3 content</p>
104
+ </k-accordion-panel>
105
+ </k-accordion>
106
+ </k-card>
107
+ </div>
108
+ </div>
109
+
110
+ <h3 id="persistent"><a href="#persistent" class="no-link">Persistent State Example</a></h3>
111
+ <p>Add the <code>persistent-id</code> attribute to <code>k-accordion</code> to save and restore open panels across
112
+ page reloads. The state is stored in <code>localStorage</code> (if available) using the provided ID.</p>
113
+ <div class="row -mx mb">
114
+ <div class="col d-span-6 m-span-12 px">
115
+ <k-card label="HTML">
116
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-accordion</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">"demo-accordion"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel1"</span>&gt;</span>Panel 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel1"</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">"m"</span>&gt;</span>Panel 1 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel2"</span>&gt;</span>Panel 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel2"</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">"m"</span>&gt;</span>Panel 2 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-header</span> <span class="hljs-attr">for-panel</span>=<span class="hljs-string">"panel3"</span>&gt;</span>Panel 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-header</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-accordion-panel</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"panel3"</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">"m"</span>&gt;</span>Panel 3 content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-accordion</span>&gt;</span></code></pre>
117
+ </k-card>
118
+ </div>
119
+ <div class="col d-span-6 m-span-12 px">
120
+ <k-card label="Results">
121
+ <k-accordion class="mb" persistent-id="demo-accordion">
122
+ <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
123
+ <k-accordion-panel name="panel1">
124
+ <p class="m">Panel 1 content</p>
125
+ </k-accordion-panel>
126
+ <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
127
+ <k-accordion-panel name="panel2">
128
+ <p class="m">Panel 2 content</p>
129
+ </k-accordion-panel>
130
+ <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
131
+ <k-accordion-panel name="panel3">
132
+ <p class="m">Panel 3 content</p>
133
+ </k-accordion-panel>
134
+ </k-accordion>
135
+ </k-card>
136
+ </div>
137
+ </div>
138
+
139
+ <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
140
+ <k-card>
141
+ <h3 id="accordion-ref" class="bb pb">Accordion</h3>
142
+ <h4>Properties</h4>
143
+ <ul>
144
+ <li><code>multiple: boolean</code> — If present, allows multiple panels to be open.</li>
145
+ </ul>
146
+ <h4>Methods</h4>
147
+ <ul>
148
+ <li><code>getHeader(panelName): HTMLElement | null</code></li>
149
+ <li><code>getPanel(panelName): HTMLElement | null</code></li>
150
+ <li><code>openPanel(panelName): void</code></li>
151
+ <li><code>closePanel(panelName): void</code></li>
152
+ <li><code>togglePanel(panelName): void</code></li>
153
+ </ul>
154
+ <h4>Lifecycle</h4>
155
+ <ul>
156
+ <li>State is restored in <code>updated()</code> when <code>persistentId</code> changes.</li>
157
+ </ul>
158
+ </k-card>
159
+
160
+ <k-card>
161
+ <h3 id="accordion-header-ref" class="bb pb">AccordionHeader</h3>
162
+ <h4>Properties</h4>
163
+ <ul>
164
+ <li><code>forPanel: string</code> — The panel name this header controls.</li>
165
+ <li><code>active: boolean</code> — Whether this header is active.</li>
166
+ <li><code>accordion: Accordion | null</code> <i>(read only)</i> — Parent accordion.</li>
167
+ </ul>
168
+ <h4>Event Handlers</h4>
169
+ <ul>
170
+ <li>Click: toggles associated panel.</li>
171
+ </ul>
172
+ </k-card>
173
+
174
+ <k-card>
175
+ <h3 id="accordion-panel-ref" class="bb pb">AccordionPanel</h3>
176
+ <h4>Properties</h4>
177
+ <ul>
178
+ <li><code>name: string</code> — Unique panel identifier.</li>
179
+ <li><code>active: boolean</code> — Whether this panel is open.</li>
180
+ <li><code>transitioning: boolean</code> — Whether this panel is animating.</li>
181
+ </ul>
182
+ <h4>Methods</h4>
183
+ <ul>
184
+ <li><code>accordion: Accordion | null</code> (getter) — Returns parent accordion.</li>
185
+ </ul>
186
+
187
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
188
+ <h5><code>openpanel</code></h5>
189
+ <p>Fired when a panel is opened. The event detail contains <code>{ panelName }</code>.</p>
190
+ <h5><code>closepanel</code></h5>
191
+ <p>Fired when a panel is closed. The event detail contains <code>{ panelName }</code>.</p>
192
+ <h5><code>togglepanel</code></h5>
193
+ <p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
194
+ </k-card>
195
+ </content>
196
+ <content location="scripts">
197
+ <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
198
+ <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
199
+ <script type="module" src="{{pathToRoot}}src/components/Resize.js"></script>
200
+ </content>
201
+ </page>
package/docs-src/components/aside-items.page.html ADDED
@@ -0,0 +1,36 @@
1
+ <page template="bare" title="Aside Items Example">
2
+ <content location="head">
3
+ <style>
4
+ body {
5
+ margin: 0;
6
+ padding: 0;
7
+ height: 100vh;
8
+ overflow: hidden;
9
+ }
10
+ </style>
11
+ <script type="module">
12
+ import theme from '{{pathToRoot}}src/utils/theme.js';
13
+ theme.init();
14
+ </script>
15
+ <script type="module" src="{{pathToRoot}}src/components/Aside.js"></script>
16
+ <script type="module" src="{{pathToRoot}}src/components/Main.js"></script>
17
+ </content>
18
+ <content>
19
+ <k-aside main="push" state="expanded" style="--aside_padding: 0;">
20
+ <k-aside-toggle><h5 class="m0">Kempo</h5></k-aside-toggle>
21
+ <k-aside-item icon="cards" href="#" active>Dashboard</k-aside-item>
22
+ <k-aside-item icon="check" href="#">Tasks</k-aside-item>
23
+ <k-aside-item icon="label" href="#">Email</k-aside-item>
24
+ <k-aside-label>Projects</k-aside-label>
25
+ <k-aside-item icon="folder" href="#">Figma Design</k-aside-item>
26
+ <k-aside-item icon="folder" href="#">Static Mania</k-aside-item>
27
+ <k-aside-spacer></k-aside-spacer>
28
+ <k-aside-item icon="settings" href="#">Settings</k-aside-item>
29
+ <k-aside-item icon="account-circle" href="#">Profile</k-aside-item>
30
+ </k-aside>
31
+ <k-main>
32
+ <h2>Main Content</h2>
33
+ <p>Click the aside's collapse/expand to see items react.</p>
34
+ </k-main>
35
+ </content>
36
+ </page>
package/docs-src/components/aside-menu.page.html ADDED
@@ -0,0 +1,36 @@
1
+ <page template="bare" title="Aside Menu Example">
2
+ <content location="head">
3
+ <style>
4
+ body {
5
+ margin: 0;
6
+ padding: 0;
7
+ height: 100vh;
8
+ overflow: hidden;
9
+ }
10
+ </style>
11
+ <script type="module">
12
+ import theme from '{{pathToRoot}}src/utils/theme.js';
13
+ theme.init();
14
+ </script>
15
+ <script type="module" src="{{pathToRoot}}src/components/Aside.js"></script>
16
+ <script type="module" src="{{pathToRoot}}src/components/Main.js"></script>
17
+ </content>
18
+ <content>
19
+ <k-aside main="push" state="expanded" style="--aside_padding: 0;">
20
+ <k-aside-toggle><h5 class="m0">Kempo</h5></k-aside-toggle>
21
+ <k-aside-item icon="cards" href="#">Dashboard</k-aside-item>
22
+ <k-aside-menu icon="folder" label="Projects">
23
+ <k-aside-item href="#">Website Redesign</k-aside-item>
24
+ <k-aside-item href="#">Mobile App</k-aside-item>
25
+ </k-aside-menu>
26
+ <k-aside-menu icon="settings" label="Settings">
27
+ <k-aside-item href="#">General</k-aside-item>
28
+ <k-aside-item href="#">Security</k-aside-item>
29
+ </k-aside-menu>
30
+ </k-aside>
31
+ <k-main>
32
+ <h2>Main Content</h2>
33
+ <p>Click menu headers to expand sub-items. Collapse the aside to see menus fold.</p>
34
+ </k-main>
35
+ </content>
36
+ </page>