kempo-ui 0.4.26 → 0.4.28

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 (87) hide show
  1. package/dist/utils/closestAcrossShadow.js +1 -0
  2. package/docs/components/accordion.html +3 -0
  3. package/docs/components/aside.html +3 -0
  4. package/docs/components/button.html +3 -0
  5. package/docs/components/calendar.html +3 -0
  6. package/docs/components/card.html +3 -0
  7. package/docs/components/chat.html +3 -0
  8. package/docs/components/code-editor.html +3 -0
  9. package/docs/components/color-picker.html +3 -0
  10. package/docs/components/combobox.html +3 -0
  11. package/docs/components/content-slider.html +3 -0
  12. package/docs/components/context.html +3 -0
  13. package/docs/components/dialog.html +3 -0
  14. package/docs/components/dropdown.html +3 -0
  15. package/docs/components/filter-list.html +3 -0
  16. package/docs/components/focus-capture.html +3 -0
  17. package/docs/components/html-editor.html +3 -0
  18. package/docs/components/hybrid-component.html +3 -0
  19. package/docs/components/icon.html +3 -0
  20. package/docs/components/import.html +3 -0
  21. package/docs/components/light-component.html +3 -0
  22. package/docs/components/markdown-editor.html +3 -0
  23. package/docs/components/markdown.html +3 -0
  24. package/docs/components/nav-spacer.html +3 -0
  25. package/docs/components/nav.html +3 -0
  26. package/docs/components/pagination.html +3 -0
  27. package/docs/components/photo-viewer.html +3 -0
  28. package/docs/components/progress.html +3 -0
  29. package/docs/components/resize.html +3 -0
  30. package/docs/components/segmented-control.html +3 -0
  31. package/docs/components/shadow-component.html +3 -0
  32. package/docs/components/show-more.html +3 -0
  33. package/docs/components/slider.html +3 -0
  34. package/docs/components/sortable.html +3 -0
  35. package/docs/components/speech-to-text.html +3 -0
  36. package/docs/components/spinner.html +3 -0
  37. package/docs/components/split.html +3 -0
  38. package/docs/components/table.html +3 -0
  39. package/docs/components/tableControls.html +3 -0
  40. package/docs/components/tableCustomFields.html +3 -0
  41. package/docs/components/tableFetchRecords.html +3 -0
  42. package/docs/components/tableFieldSortHide.html +3 -0
  43. package/docs/components/tablePagination.html +3 -0
  44. package/docs/components/tablePlaceholder.html +3 -0
  45. package/docs/components/tableRecordEditing.html +3 -0
  46. package/docs/components/tableRecordFiltering.html +3 -0
  47. package/docs/components/tableRecordHiding.html +3 -0
  48. package/docs/components/tableRecordSearching.html +3 -0
  49. package/docs/components/tableRecordSelection.html +3 -0
  50. package/docs/components/tableRowControls.html +3 -0
  51. package/docs/components/tableServerSync.html +3 -0
  52. package/docs/components/tableSorting.html +3 -0
  53. package/docs/components/tabs.html +3 -0
  54. package/docs/components/tags.html +3 -0
  55. package/docs/components/text-to-speech.html +3 -0
  56. package/docs/components/theme-select.html +3 -0
  57. package/docs/components/theme-switcher.html +3 -0
  58. package/docs/components/time.html +3 -0
  59. package/docs/components/timestamp.html +3 -0
  60. package/docs/components/toast.html +3 -0
  61. package/docs/components/toggle.html +3 -0
  62. package/docs/components/tree.html +3 -0
  63. package/docs/components/voice-selector.html +3 -0
  64. package/docs/index.html +9 -0
  65. package/docs/src/utils/closestAcrossShadow.js +1 -0
  66. package/docs/utils/closestAcrossShadow.html +549 -0
  67. package/docs/utils/context.html +3 -0
  68. package/docs/utils/cookie.html +3 -0
  69. package/docs/utils/debounce.html +3 -0
  70. package/docs/utils/drag.html +3 -0
  71. package/docs/utils/elevation.html +3 -0
  72. package/docs/utils/formatTimestamp.html +3 -0
  73. package/docs/utils/object.html +3 -0
  74. package/docs/utils/propConverters.html +3 -0
  75. package/docs/utils/sanitizeHtml.html +3 -0
  76. package/docs/utils/string.html +3 -0
  77. package/docs/utils/theme.html +3 -0
  78. package/docs/utils/toTitleCase.html +3 -0
  79. package/docs/utils/type.html +3 -0
  80. package/docs/utils/voice.html +3 -0
  81. package/docs/utils/wait.html +3 -0
  82. package/docs-src/index.page.html +6 -0
  83. package/docs-src/nav.fragment.html +3 -0
  84. package/docs-src/utils/closestAcrossShadow.page.html +49 -0
  85. package/package.json +1 -1
  86. package/src/utils/closestAcrossShadow.js +23 -0
  87. package/tests/utils/closestAcrossShadow.browser-test.js +90 -0
@@ -0,0 +1,549 @@
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>closestAcrossShadow - Kempo UI</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@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
+
15
+ </head>
16
+ <body>
17
+
18
+ <k-nav
19
+ fixed
20
+ class="bg-primary"
21
+ >
22
+ <button
23
+ id="toggleNavSideMenu"
24
+ class="link"
25
+ >
26
+ <k-icon name="menu"></k-icon>
27
+ </button>
28
+ <a
29
+ href="../"
30
+ class="d-if ph"
31
+ style="align-items: center"
32
+ >
33
+ <img
34
+ src="../media/icon32.png"
35
+ alt="Kempo UI Icon"
36
+ class="pr"
37
+ />
38
+ Kempo UI
39
+ </a>
40
+ <div
41
+ style="position:relative;margin:0 .25rem;align-self:center;"
42
+ theme="light"
43
+ >
44
+ <input
45
+ id="navSearchInput"
46
+ type="search"
47
+ placeholder="Search docs..."
48
+ autocomplete="off"
49
+ style="width:11rem;"
50
+ />
51
+ <div
52
+ id="navSearchDropdown"
53
+ hidden
54
+ theme="light"
55
+ 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);"
56
+ >
57
+ <k-filter-list
58
+ id="navSearchList"
59
+ style="display:block;padding:.25rem 0;"
60
+ >
61
+ <k-filter-item filter-keywords="accordion components"><a
62
+ href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
63
+ <k-filter-item filter-keywords="aside sidebar components"><a
64
+ href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
65
+ <k-filter-item filter-keywords="calendar date picker range month day components"><a
66
+ href="../components/calendar.html"
67
+ >Calendar<br><small>Component</small></a></k-filter-item>
68
+ <k-filter-item filter-keywords="card components"><a
69
+ href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
70
+ <k-filter-item filter-keywords="chat message conversation messaging components"><a
71
+ href="../components/chat.html"
72
+ >Chat<br><small>Component</small></a></k-filter-item>
73
+ <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
74
+ href="../components/code-editor.html"
75
+ >Code Editor<br><small>Component</small></a></k-filter-item>
76
+ <k-filter-item filter-keywords="combobox combo box search autocomplete components"><a
77
+ href="../components/combobox.html"
78
+ >Combobox<br><small>Component</small></a></k-filter-item>
79
+ <k-filter-item filter-keywords="color picker colorpicker components"><a
80
+ href="../components/color-picker.html"
81
+ >Color Picker<br><small>Component</small></a></k-filter-item>
82
+ <k-filter-item filter-keywords="content slider components"><a
83
+ href="../components/content-slider.html"
84
+ >Content Slider<br><small>Component</small></a></k-filter-item>
85
+ <k-filter-item filter-keywords="context state global components"><a
86
+ href="../components/context.html"
87
+ >Context<br><small>Component</small></a></k-filter-item>
88
+ <k-filter-item filter-keywords="dialog modal popup components"><a
89
+ href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
90
+ <k-filter-item filter-keywords="dropdown select components"><a
91
+ href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
92
+ <k-filter-item filter-keywords="filter list filterlist components"><a
93
+ href="../components/filter-list.html"
94
+ >Filter List<br><small>Component</small></a></k-filter-item>
95
+ <k-filter-item filter-keywords="focus capture focuscapture components"><a
96
+ href="../components/focus-capture.html"
97
+ >Focus Capture<br><small>Component</small></a></k-filter-item>
98
+ <k-filter-item filter-keywords="html editor components"><a
99
+ href="../components/html-editor.html">HTML
100
+ Editor<br><small>Component</small></a></k-filter-item>
101
+ <k-filter-item filter-keywords="markdown render parser marked gfm components"><a
102
+ href="../components/markdown.html"
103
+ >Markdown<br><small>Component</small></a></k-filter-item>
104
+ <k-filter-item filter-keywords="markdown editor markdowneditor write preview marked gfm tables components"><a
105
+ href="../components/markdown-editor.html"
106
+ >Markdown Editor<br><small>Component</small></a></k-filter-item>
107
+ <k-filter-item filter-keywords="icon components"><a
108
+ href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
109
+ <k-filter-item filter-keywords="import components"><a
110
+ href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
111
+ <k-filter-item filter-keywords="nav navbar navigation components"><a
112
+ href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
113
+ <k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a
114
+ href="../components/nav-spacer.html"
115
+ >Nav Spacer<br><small>Component</small></a></k-filter-item>
116
+ <k-filter-item filter-keywords="photo viewer photoviewer components"><a
117
+ href="../components/photo-viewer.html"
118
+ >Photo Viewer<br><small>Component</small></a></k-filter-item>
119
+ <k-filter-item filter-keywords="pagination pager page components"><a
120
+ href="../components/pagination.html"
121
+ >Pagination<br><small>Component</small></a></k-filter-item>
122
+ <k-filter-item filter-keywords="progress loading components"><a
123
+ href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
124
+ <k-filter-item filter-keywords="resize components"><a
125
+ href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
126
+ <k-filter-item filter-keywords="segmented control segment option button group components"><a
127
+ href="../components/segmented-control.html"
128
+ >Segmented Control<br><small>Component</small></a></k-filter-item>
129
+ <k-filter-item filter-keywords="show more showmore components"><a
130
+ href="../components/show-more.html"
131
+ >Show More<br><small>Component</small></a></k-filter-item>
132
+ <k-filter-item filter-keywords="slider range input step components"><a
133
+ href="../components/slider.html"
134
+ >Slider<br><small>Component</small></a></k-filter-item>
135
+ <k-filter-item filter-keywords="sortable drag drop sort components"><a
136
+ href="../components/sortable.html"
137
+ >Sortable<br><small>Component</small></a></k-filter-item>
138
+ <k-filter-item filter-keywords="speech to text speechtotext microphone voice recognition transcription components"><a
139
+ href="../components/speech-to-text.html"
140
+ >Speech To Text<br><small>Component</small></a></k-filter-item>
141
+ <k-filter-item filter-keywords="spinner loading components"><a
142
+ href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
143
+ <k-filter-item filter-keywords="split pane components"><a
144
+ href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
145
+ <k-filter-item filter-keywords="table data grid components"><a
146
+ href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
147
+ <k-filter-item filter-keywords="table controls advanced example"><a
148
+ href="../components/tableControls.html"
149
+ >Table &mdash; Controls<br><small>Advanced Example</small></a></k-filter-item>
150
+ <k-filter-item filter-keywords="table custom fields advanced example"><a
151
+ href="../components/tableCustomFields.html"
152
+ >Table &mdash; Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
153
+ <k-filter-item filter-keywords="table fetch records advanced example"><a
154
+ href="../components/tableFetchRecords.html"
155
+ >Table &mdash; Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
156
+ <k-filter-item filter-keywords="table field sort hide advanced example"><a
157
+ href="../components/tableFieldSortHide.html"
158
+ >Table &mdash; Field Sort &amp; Hide<br><small>Advanced Example</small></a></k-filter-item>
159
+ <k-filter-item filter-keywords="table pagination advanced example"><a
160
+ href="../components/tablePagination.html"
161
+ >Table &mdash; Pagination<br><small>Advanced Example</small></a></k-filter-item>
162
+ <k-filter-item filter-keywords="table record editing advanced example"><a
163
+ href="../components/tableRecordEditing.html"
164
+ >Table &mdash; Record Editing<br><small>Advanced Example</small></a></k-filter-item>
165
+ <k-filter-item filter-keywords="table record filtering advanced example"><a
166
+ href="../components/tableRecordFiltering.html"
167
+ >Table &mdash; Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
168
+ <k-filter-item filter-keywords="table record hiding advanced example"><a
169
+ href="../components/tableRecordHiding.html"
170
+ >Table &mdash; Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
171
+ <k-filter-item filter-keywords="table record searching advanced example"><a
172
+ href="../components/tableRecordSearching.html"
173
+ >Table &mdash; Record Searching<br><small>Advanced Example</small></a></k-filter-item>
174
+ <k-filter-item filter-keywords="table record selection advanced example"><a
175
+ href="../components/tableRecordSelection.html"
176
+ >Table &mdash; Record Selection<br><small>Advanced Example</small></a></k-filter-item>
177
+ <k-filter-item filter-keywords="table row controls advanced example"><a
178
+ href="../components/tableRowControls.html"
179
+ >Table &mdash; Row Controls<br><small>Advanced Example</small></a></k-filter-item>
180
+ <k-filter-item filter-keywords="table server sync advanced example"><a
181
+ href="../components/tableServerSync.html"
182
+ >Table &mdash; Server Sync<br><small>Advanced Example</small></a></k-filter-item>
183
+ <k-filter-item filter-keywords="table sorting advanced example"><a
184
+ href="../components/tableSorting.html"
185
+ >Table &mdash; Sorting<br><small>Advanced Example</small></a></k-filter-item>
186
+ <k-filter-item filter-keywords="table placeholder advanced example"><a
187
+ href="../components/tablePlaceholder.html"
188
+ >Table &mdash; Placeholder<br><small>Advanced Example</small></a></k-filter-item>
189
+ <k-filter-item filter-keywords="tabs tab panel components"><a
190
+ href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
191
+ <k-filter-item filter-keywords="tags tag input components"><a
192
+ href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
193
+ <k-filter-item filter-keywords="text to speech texttospeech tts speak voice synthesis components"><a
194
+ href="../components/text-to-speech.html"
195
+ >Text To Speech<br><small>Component</small></a></k-filter-item>
196
+ <k-filter-item filter-keywords="theme select dropdown dark light components"><a
197
+ href="../components/theme-select.html"
198
+ >Theme Select<br><small>Component</small></a></k-filter-item>
199
+ <k-filter-item filter-keywords="theme switcher dark light components"><a
200
+ href="../components/theme-switcher.html"
201
+ >Theme Switcher<br><small>Component</small></a></k-filter-item>
202
+ <k-filter-item filter-keywords="time picker clock hour minute form components"><a
203
+ href="../components/time.html"
204
+ >Time<br><small>Component</small></a></k-filter-item>
205
+ <k-filter-item filter-keywords="timestamp date time components"><a
206
+ href="../components/timestamp.html"
207
+ >Timestamp<br><small>Component</small></a></k-filter-item>
208
+ <k-filter-item filter-keywords="toast notification alert components"><a
209
+ href="../components/toast.html"
210
+ >Toast<br><small>Component</small></a></k-filter-item>
211
+ <k-filter-item filter-keywords="toggle switch checkbox components"><a
212
+ href="../components/toggle.html"
213
+ >Toggle<br><small>Component</small></a></k-filter-item>
214
+ <k-filter-item filter-keywords="tree treeview components"><a
215
+ href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
216
+ <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
217
+ href="../components/voice-selector.html"
218
+ >Voice Selector<br><small>Component</small></a></k-filter-item>
219
+ <k-filter-item filter-keywords="shadow component base"><a
220
+ href="../components/shadow-component.html"
221
+ >Shadow Component<br><small>Base Component</small></a></k-filter-item>
222
+ <k-filter-item filter-keywords="light component base"><a
223
+ href="../components/light-component.html">Light Component<br><small>Base
224
+ Component</small></a></k-filter-item>
225
+ <k-filter-item filter-keywords="hybrid component base"><a
226
+ href="../components/hybrid-component.html"
227
+ >Hybrid Component<br><small>Base Component</small></a></k-filter-item>
228
+ <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
229
+ href="../components/button.html"
230
+ >Button<br><small>Base Component</small></a></k-filter-item>
231
+ <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
232
+ href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
233
+ <k-filter-item filter-keywords="cookie utils utility"><a
234
+ href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
235
+ <k-filter-item filter-keywords="context utils utility"><a
236
+ href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
237
+ <k-filter-item filter-keywords="debounce utils utility"><a
238
+ href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
239
+ <k-filter-item filter-keywords="drag utils utility"><a
240
+ href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
241
+ <k-filter-item filter-keywords="elevation z-index stacking utils"><a
242
+ href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
243
+ <k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a
244
+ href="../utils/formatTimestamp.html"
245
+ >formatTimestamp<br><small>Utility</small></a></k-filter-item>
246
+ <k-filter-item filter-keywords="object utils utility"><a
247
+ href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
248
+ <k-filter-item filter-keywords="propconverters prop converters utils utility"><a
249
+ href="../utils/propConverters.html"
250
+ >propConverters<br><small>Utility</small></a></k-filter-item>
251
+ <k-filter-item filter-keywords="sanitizehtml sanitize html xss security utils utility"><a
252
+ href="../utils/sanitizeHtml.html"
253
+ >sanitizeHtml<br><small>Utility</small></a></k-filter-item>
254
+ <k-filter-item filter-keywords="string utils utility"><a
255
+ href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
256
+ <k-filter-item filter-keywords="theme utils utility"><a
257
+ href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
258
+ <k-filter-item filter-keywords="type utils utility"><a
259
+ href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
260
+ <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
261
+ href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
262
+ <k-filter-item filter-keywords="wait async utils utility"><a
263
+ href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
264
+ </k-filter-list>
265
+ </div>
266
+ </div>
267
+ <div class="flex"></div>
268
+ <a
269
+ href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
270
+ target="_blank"
271
+ ><k-icon name="license"></k-icon></a>
272
+ <a
273
+ href="https://www.npmjs.com/package/kempo-ui"
274
+ target="_blank"
275
+ ><k-icon name="npm"></k-icon></a>
276
+ <a
277
+ href="https://github.com/dustinpoissant/kempo-ui"
278
+ target="_blank"
279
+ ><k-icon name="github-mark"></k-icon></a>
280
+ <k-theme-switcher
281
+ class="mr"
282
+ style="
283
+ --padding: 0.5rem;
284
+ --c_active: var(--tc_on_primary);
285
+ --tc_active: var(--c_primary);
286
+ --c_inactive__hover: rgba(255, 255, 255, 0.1);
287
+ "
288
+ ></k-theme-switcher>
289
+ </k-nav>
290
+ <div style="width: 100%; height: 4rem;"></div>
291
+ <k-aside
292
+ id="navSideMenu"
293
+ main="overlay"
294
+ state="offscreen"
295
+ >
296
+ <menu>
297
+ <a
298
+ href="../"
299
+ class="ta-center bb mb r0"
300
+ >
301
+ <h1 class="tc-primary">Kempo UI</h1>
302
+ <img
303
+ src="../media/icon128.png"
304
+ alt="Kempo UI Icon"
305
+ />
306
+ </a>
307
+
308
+ <div class="pl mb">
309
+ <h3>Components</h3>
310
+ <a href="../components/accordion.html">Accordion</a>
311
+ <a href="../components/aside.html">Aside</a>
312
+ <a href="../components/calendar.html">Calendar</a>
313
+ <a href="../components/card.html">Card</a>
314
+ <a href="../components/chat.html">Chat</a>
315
+ <a href="../components/code-editor.html">Code Editor</a>
316
+ <a href="../components/combobox.html">Combobox</a>
317
+ <a href="../components/color-picker.html">ColorPicker</a>
318
+ <a href="../components/content-slider.html">Content Slider</a>
319
+ <a href="../components/context.html">Context</a>
320
+ <a href="../components/dialog.html">Dialog</a>
321
+ <a href="../components/dropdown.html">Dropdown</a>
322
+ <a href="../components/filter-list.html">Filter List</a>
323
+ <a href="../components/focus-capture.html">FocusCapture</a>
324
+ <a href="../components/html-editor.html">HTML Editor</a>
325
+ <a href="../components/markdown.html">Markdown</a>
326
+ <a href="../components/markdown-editor.html">Markdown Editor</a>
327
+ <a href="../components/icon.html">Icon</a>
328
+ <a href="../components/import.html">Import</a>
329
+ <a href="../components/nav.html">Nav</a>
330
+ <a href="../components/nav-spacer.html">Nav Spacer</a>
331
+ <a href="../components/photo-viewer.html">Photo Viewer</a>
332
+ <a href="../components/pagination.html">Pagination</a>
333
+ <a href="../components/progress.html">Progress</a>
334
+ <a href="../components/resize.html">Resize</a>
335
+ <a href="../components/show-more.html">Show More</a>
336
+ <a href="../components/slider.html">Slider</a>
337
+ <a href="../components/sortable.html">Sortable</a>
338
+ <a href="../components/speech-to-text.html">Speech To Text</a>
339
+ <a href="../components/spinner.html">Spinner</a>
340
+ <a href="../components/split.html">Split</a>
341
+ <a href="../components/table.html">Table</a>
342
+ <a href="../components/tabs.html">Tabs</a>
343
+ <a href="../components/tags.html">Tags</a>
344
+ <a href="../components/text-to-speech.html">Text To Speech</a>
345
+ <a href="../components/theme-select.html">Theme Select</a>
346
+ <a href="../components/theme-switcher.html">Theme Switcher</a>
347
+ <a href="../components/time.html">Time</a>
348
+ <a href="../components/timestamp.html">Timestamp</a>
349
+ <a href="../components/toast.html">Toast</a>
350
+ <a href="../components/toggle.html">Toggle</a>
351
+ <a href="../components/tree.html">Tree</a>
352
+ <a href="../components/voice-selector.html">Voice Selector</a>
353
+ </div>
354
+
355
+ <h5 class="mb0">Base Components</h5>
356
+ <div class="pl mb">
357
+ <a href="../components/shadow-component.html">Shadow Component</a>
358
+ <a href="../components/light-component.html">Light Component</a>
359
+ <a href="../components/hybrid-component.html">Hybrid Component</a>
360
+ <a href="../components/button.html">Button</a>
361
+ </div>
362
+
363
+ <h5 class="mb0">Utils</h5>
364
+ <div class="pl mb">
365
+ <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
366
+ <a href="../utils/cookie.html">cookie</a>
367
+ <a href="../utils/context.html">context</a>
368
+ <a href="../utils/debounce.html">debounce</a>
369
+ <a href="../utils/drag.html">drag</a>
370
+ <a href="../utils/elevation.html">elevation</a>
371
+ <a href="../utils/formatTimestamp.html">formatTimestamp</a>
372
+ <a href="../utils/object.html">object</a>
373
+ <a href="../utils/propConverters.html">propConverters</a>
374
+ <a href="../utils/sanitizeHtml.html">sanitizeHtml</a>
375
+ <a href="../utils/string.html">string</a>
376
+ <a href="../utils/theme.html">theme</a>
377
+ <a href="../utils/type.html">type</a>
378
+ <a href="../utils/voice.html">voice</a>
379
+ <a href="../utils/wait.html">wait</a>
380
+ </div>
381
+ </menu>
382
+ </k-aside>
383
+ <style>
384
+ #navSearchList a {
385
+ display: block;
386
+ padding: .25rem .5rem;
387
+ border-radius: var(--radius);
388
+ text-decoration: none;
389
+ color: var(--tc);
390
+ }
391
+
392
+ #navSearchList a:hover {
393
+ background: rgba(128, 128, 128, .15);
394
+ }
395
+
396
+ #navSearchList a small {
397
+ display: block;
398
+ color: var(--tc_muted);
399
+ }
400
+ </style>
401
+ <script
402
+ src="../src/components/Nav.js"
403
+ type="module"
404
+ ></script>
405
+ <script
406
+ src="../src/components/FilterList.js"
407
+ type="module"
408
+ ></script>
409
+ <script
410
+ src="../src/components/FilterItem.js"
411
+ type="module"
412
+ ></script>
413
+ <script
414
+ src="../src/components/Aside.js"
415
+ type="module"
416
+ ></script>
417
+ <script
418
+ src="../src/components/Icon.js"
419
+ type="module"
420
+ ></script>
421
+ <script
422
+ src="../src/components/ThemeSwitcher.js"
423
+ type="module"
424
+ ></script>
425
+ <script type="module">
426
+ import debounce from '../src/utils/debounce.js';
427
+
428
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
429
+ await window.customElements.whenDefined('k-aside');
430
+ document.getElementById('navSideMenu').toggle();
431
+ });
432
+
433
+ document.addEventListener('click', function (e) {
434
+ if (e.target.matches('a[href^="#"]')) {
435
+ e.preventDefault();
436
+ const targetId = e.target.getAttribute('href').replace('#', '');
437
+ const target = document.getElementById(targetId);
438
+ if (target) {
439
+ target.scrollIntoView({ behavior: 'smooth' });
440
+ const url = window.location.pathname + window.location.search + '#' + targetId;
441
+ history.replaceState(null, '', url);
442
+ }
443
+ }
444
+ });
445
+
446
+ /*
447
+ Nav Search
448
+ */
449
+ const searchInput = document.getElementById('navSearchInput');
450
+ const searchDropdown = document.getElementById('navSearchDropdown');
451
+ let navSearchList = null;
452
+
453
+ const openSearch = async () => {
454
+ await customElements.whenDefined('k-filter-list');
455
+ if (!navSearchList) navSearchList = document.getElementById('navSearchList');
456
+ navSearchList.filter(searchInput.value);
457
+ searchDropdown.hidden = false;
458
+ };
459
+
460
+ const closeSearch = () => {
461
+ searchDropdown.hidden = true;
462
+ navSearchList?.clearFocus();
463
+ };
464
+
465
+ searchInput.addEventListener('focus', openSearch);
466
+
467
+ searchInput.addEventListener('input', debounce(e => {
468
+ navSearchList?.filter(e.target.value);
469
+ }, 150));
470
+
471
+ searchInput.addEventListener('keydown', e => {
472
+ if (e.key === 'Escape') {
473
+ searchInput.value = '';
474
+ searchInput.blur();
475
+ closeSearch();
476
+ } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
477
+ navSearchList?.handleKeydown(e);
478
+ }
479
+ });
480
+
481
+ searchInput.addEventListener('blur', () => {
482
+ setTimeout(closeSearch, 150);
483
+ });
484
+
485
+ document.addEventListener('keydown', e => {
486
+ let active = document.activeElement;
487
+ while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
488
+ const tag = active?.tagName;
489
+ if (tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
490
+ if (e.metaKey || e.ctrlKey || e.altKey) return;
491
+ if (e.key.length === 1) {
492
+ searchInput.focus();
493
+ }
494
+ });
495
+ </script>
496
+
497
+
498
+ <k-main>
499
+
500
+ <h1>closestAcrossShadow</h1>
501
+ <k-accordion persistent-id="toc" class="b r mb">
502
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
503
+ <k-accordion-panel name="toc-panel">
504
+ <div class="m ">
505
+ <h6>Usage</h6>
506
+ <a href="#basicUsage">Basic Usage</a><br />
507
+ <a href="#parameters">Parameters</a><br />
508
+ <a href="#examples">Examples</a><br />
509
+ </div>
510
+ </k-accordion-panel>
511
+ </k-accordion>
512
+
513
+ <h3>Description</h3>
514
+ <p>The <code>closestAcrossShadow</code> utility works like the native
515
+ <code>Element.closest()</code>, but it does not stop at shadow-DOM boundaries.
516
+ When the current tree yields no match it continues from the host of the enclosing
517
+ shadow root and keeps walking up toward the document, returning the nearest matching
518
+ ancestor (or the element itself), or <code>null</code> if there is none.</p>
519
+ <p>This is useful when a component nested inside another component's shadow root needs
520
+ to locate a shared ancestor — for example a <a href="../components/context.html"><code>k-context</code></a> —
521
+ which native <code>closest()</code> cannot reach because it never crosses shadow boundaries.</p>
522
+
523
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
524
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> closestAcrossShadow <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/closestAcrossShadow.js'</span>;<br /><br /><span class="hljs-comment">// From inside a deeply nested component, reach a shared k-context:</span><br /><span class="hljs-keyword">const</span> ctx = closestAcrossShadow(<span class="hljs-keyword">this</span>, <span class="hljs-string">'k-context'</span>);<br /><span class="hljs-keyword">const</span> settings = ctx?.get(<span class="hljs-string">'settings'</span>);</code></pre>
525
+
526
+ <h3 id="parameters"><a href="#parameters" class="no-link">Parameters</a></h3>
527
+ <h5><code>element<i>: Element</i></code></h5>
528
+ <p>The element to start searching from. The element itself is included in the match, just like <code>closest()</code>.</p>
529
+ <h5><code>selector<i>: string</i></code></h5>
530
+ <p>A CSS selector to match ancestors against.</p>
531
+ <h5><code><i>returns</i>: Element | null</code></h5>
532
+ <p>The nearest matching ancestor across shadow boundaries, or <code>null</code> if none match.</p>
533
+
534
+ <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
535
+
536
+ <h4>Reading a context from a nested shadow component</h4>
537
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> closestAcrossShadow <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/closestAcrossShadow.js'</span>;<br /><br />connectedCallback() {<br /> <span class="hljs-keyword">super</span>.connectedCallback();<br /> <span class="hljs-keyword">const</span> ctx = closestAcrossShadow(<span class="hljs-keyword">this</span>, <span class="hljs-string">'k-context'</span>);<br /> ctx?.addEventListener(<span class="hljs-string">'context:set'</span>, () =&gt; <span class="hljs-keyword">this</span>.requestUpdate());<br />}</code></pre>
538
+
539
+ <h4>Falls back to null</h4>
540
+ <pre><code class="hljs javascript"><span class="hljs-comment">// No matching ancestor in any tree:</span><br>closestAcrossShadow(someDetachedNode, <span class="hljs-string">'.missing'</span>); <span class="hljs-comment">// =&gt; null</span></code></pre>
541
+
542
+ </k-main>
543
+ <div style="height:33vh"></div>
544
+ <script type="module" src="../src/components/Main.js"></script>
545
+
546
+ <script type="module" src="../src/components/Accordion.js"></script>
547
+
548
+ </body>
549
+ </html>
@@ -228,6 +228,8 @@
228
228
  <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
229
229
  href="../components/button.html"
230
230
  >Button<br><small>Base Component</small></a></k-filter-item>
231
+ <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
232
+ href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
231
233
  <k-filter-item filter-keywords="cookie utils utility"><a
232
234
  href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
233
235
  <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
360
362
 
361
363
  <h5 class="mb0">Utils</h5>
362
364
  <div class="pl mb">
365
+ <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
363
366
  <a href="../utils/cookie.html">cookie</a>
364
367
  <a href="../utils/context.html">context</a>
365
368
  <a href="../utils/debounce.html">debounce</a>
@@ -228,6 +228,8 @@
228
228
  <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
229
229
  href="../components/button.html"
230
230
  >Button<br><small>Base Component</small></a></k-filter-item>
231
+ <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
232
+ href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
231
233
  <k-filter-item filter-keywords="cookie utils utility"><a
232
234
  href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
233
235
  <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
360
362
 
361
363
  <h5 class="mb0">Utils</h5>
362
364
  <div class="pl mb">
365
+ <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
363
366
  <a href="../utils/cookie.html">cookie</a>
364
367
  <a href="../utils/context.html">context</a>
365
368
  <a href="../utils/debounce.html">debounce</a>
@@ -228,6 +228,8 @@
228
228
  <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
229
229
  href="../components/button.html"
230
230
  >Button<br><small>Base Component</small></a></k-filter-item>
231
+ <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
232
+ href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
231
233
  <k-filter-item filter-keywords="cookie utils utility"><a
232
234
  href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
233
235
  <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
360
362
 
361
363
  <h5 class="mb0">Utils</h5>
362
364
  <div class="pl mb">
365
+ <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
363
366
  <a href="../utils/cookie.html">cookie</a>
364
367
  <a href="../utils/context.html">context</a>
365
368
  <a href="../utils/debounce.html">debounce</a>
@@ -228,6 +228,8 @@
228
228
  <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
229
229
  href="../components/button.html"
230
230
  >Button<br><small>Base Component</small></a></k-filter-item>
231
+ <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
232
+ href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
231
233
  <k-filter-item filter-keywords="cookie utils utility"><a
232
234
  href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
233
235
  <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
360
362
 
361
363
  <h5 class="mb0">Utils</h5>
362
364
  <div class="pl mb">
365
+ <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
363
366
  <a href="../utils/cookie.html">cookie</a>
364
367
  <a href="../utils/context.html">context</a>
365
368
  <a href="../utils/debounce.html">debounce</a>
@@ -228,6 +228,8 @@
228
228
  <k-filter-item filter-keywords="button base component keyboard disabled accessibility"><a
229
229
  href="../components/button.html"
230
230
  >Button<br><small>Base Component</small></a></k-filter-item>
231
+ <k-filter-item filter-keywords="closestAcrossShadow closest shadow dom utils utility"><a
232
+ href="../utils/closestAcrossShadow.html">closestAcrossShadow<br><small>Utility</small></a></k-filter-item>
231
233
  <k-filter-item filter-keywords="cookie utils utility"><a
232
234
  href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
233
235
  <k-filter-item filter-keywords="context utils utility"><a
@@ -360,6 +362,7 @@
360
362
 
361
363
  <h5 class="mb0">Utils</h5>
362
364
  <div class="pl mb">
365
+ <a href="../utils/closestAcrossShadow.html">closestAcrossShadow</a>
363
366
  <a href="../utils/cookie.html">cookie</a>
364
367
  <a href="../utils/context.html">context</a>
365
368
  <a href="../utils/debounce.html">debounce</a>