kempo-ui 0.3.14 → 0.3.16
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.
- package/dist/components/Combobox.js +97 -0
- package/dist/components/Option.js +1 -0
- package/dist/components/ThemeSwitcher.js +77 -14
- package/docs/components/accordion.html +282 -94
- package/docs/components/aside.html +282 -94
- package/docs/components/card.html +282 -94
- package/docs/components/code-editor.html +282 -94
- package/docs/components/color-picker.html +282 -94
- package/docs/components/combobox.html +798 -0
- package/docs/components/content-slider.html +282 -94
- package/docs/components/context.html +282 -94
- package/docs/components/dialog.html +282 -94
- package/docs/components/dropdown.html +282 -94
- package/docs/components/filter-list.html +282 -94
- package/docs/components/focus-capture.html +282 -94
- package/docs/components/html-editor.html +282 -94
- package/docs/components/hybrid-component.html +282 -94
- package/docs/components/icon.html +282 -94
- package/docs/components/import.html +282 -94
- package/docs/components/light-component.html +282 -94
- package/docs/components/nav-spacer.html +282 -94
- package/docs/components/nav.html +282 -94
- package/docs/components/photo-viewer.html +282 -94
- package/docs/components/resize.html +282 -94
- package/docs/components/shadow-component.html +282 -94
- package/docs/components/show-more.html +282 -94
- package/docs/components/sortable.html +282 -94
- package/docs/components/spinner.html +282 -94
- package/docs/components/split.html +282 -94
- package/docs/components/table.html +282 -94
- package/docs/components/tableControls.html +282 -94
- package/docs/components/tableCustomFields.html +282 -94
- package/docs/components/tableFetchRecords.html +282 -94
- package/docs/components/tableFieldSortHide.html +282 -94
- package/docs/components/tablePagination.html +282 -94
- package/docs/components/tablePlaceholder.html +282 -94
- package/docs/components/tableRecordEditing.html +282 -94
- package/docs/components/tableRecordFiltering.html +282 -94
- package/docs/components/tableRecordHiding.html +282 -94
- package/docs/components/tableRecordSearching.html +282 -94
- package/docs/components/tableRecordSelection.html +282 -94
- package/docs/components/tableRowControls.html +282 -94
- package/docs/components/tableServerSync.html +282 -94
- package/docs/components/tableSorting.html +282 -94
- package/docs/components/tabs.html +282 -94
- package/docs/components/tags.html +282 -94
- package/docs/components/theme-select.html +282 -94
- package/docs/components/theme-switcher-aside.html +47 -0
- package/docs/components/theme-switcher.html +441 -101
- package/docs/components/timestamp.html +282 -94
- package/docs/components/toast.html +282 -94
- package/docs/components/toggle.html +282 -94
- package/docs/components/tree.html +282 -94
- package/docs/index.html +288 -94
- package/docs/src/components/Combobox.js +97 -0
- package/docs/src/components/Option.js +1 -0
- package/docs/src/components/ThemeSwitcher.js +77 -14
- package/docs/utils/context.html +282 -94
- package/docs/utils/cookie.html +282 -94
- package/docs/utils/debounce.html +282 -94
- package/docs/utils/drag.html +282 -94
- package/docs/utils/elevation.html +282 -94
- package/docs/utils/formatTimestamp.html +282 -94
- package/docs/utils/object.html +282 -94
- package/docs/utils/propConverters.html +282 -94
- package/docs/utils/string.html +282 -94
- package/docs/utils/theme.html +282 -94
- package/docs/utils/toTitleCase.html +282 -94
- package/docs/utils/type.html +282 -94
- package/docs/utils/wait.html +282 -94
- package/docs-src/components/combobox.page.html +358 -0
- package/docs-src/components/theme-switcher-aside.page.html +35 -0
- package/docs-src/components/theme-switcher.page.html +159 -7
- package/docs-src/index.page.html +6 -0
- package/docs-src/nav.fragment.html +283 -95
- package/llms.txt +2 -1
- package/package.json +1 -1
- package/src/components/Combobox.js +338 -0
- package/src/components/Option.js +19 -0
- package/src/components/ThemeSwitcher.js +171 -24
- package/tests/components/Combobox.browser-test.js +790 -0
- package/tests/components/ThemeSwitcher.browser-test.js +361 -33
|
@@ -15,93 +15,249 @@
|
|
|
15
15
|
</head>
|
|
16
16
|
<body>
|
|
17
17
|
|
|
18
|
-
<k-nav
|
|
19
|
-
|
|
18
|
+
<k-nav
|
|
19
|
+
fixed
|
|
20
|
+
class="bg-primary"
|
|
21
|
+
>
|
|
22
|
+
<button
|
|
23
|
+
id="toggleNavSideMenu"
|
|
24
|
+
class="link"
|
|
25
|
+
>
|
|
20
26
|
<k-icon name="menu"></k-icon>
|
|
21
27
|
</button>
|
|
22
|
-
<a
|
|
23
|
-
|
|
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
|
+
/>
|
|
24
38
|
Kempo UI
|
|
25
39
|
</a>
|
|
26
|
-
<div
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<k-filter-item filter-keywords="
|
|
48
|
-
|
|
49
|
-
<k-filter-item filter-keywords="
|
|
50
|
-
|
|
51
|
-
<k-filter-item filter-keywords="
|
|
52
|
-
|
|
53
|
-
<k-filter-item filter-keywords="
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<k-filter-item filter-keywords="
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<k-filter-item filter-keywords="
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<k-filter-item filter-keywords="
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<k-filter-item filter-keywords="
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<k-filter-item filter-keywords="
|
|
69
|
-
|
|
70
|
-
<k-filter-item filter-keywords="
|
|
71
|
-
|
|
72
|
-
<k-filter-item filter-keywords="
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<k-filter-item filter-keywords="
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<k-filter-item filter-keywords="
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<k-filter-item filter-keywords="
|
|
82
|
-
|
|
83
|
-
<k-filter-item filter-keywords="
|
|
84
|
-
|
|
85
|
-
<k-filter-item filter-keywords="
|
|
86
|
-
|
|
87
|
-
<k-filter-item filter-keywords="
|
|
88
|
-
|
|
89
|
-
|
|
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="card components"><a
|
|
66
|
+
href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
|
|
67
|
+
<k-filter-item filter-keywords="code editor codeeditor monaco components"><a
|
|
68
|
+
href="../components/code-editor.html"
|
|
69
|
+
>Code Editor<br><small>Component</small></a></k-filter-item>
|
|
70
|
+
<k-filter-item filter-keywords="combobox combo box search autocomplete components"><a
|
|
71
|
+
href="../components/combobox.html"
|
|
72
|
+
>Combobox<br><small>Component</small></a></k-filter-item>
|
|
73
|
+
<k-filter-item filter-keywords="color picker colorpicker components"><a
|
|
74
|
+
href="../components/color-picker.html"
|
|
75
|
+
>Color Picker<br><small>Component</small></a></k-filter-item>
|
|
76
|
+
<k-filter-item filter-keywords="content slider components"><a
|
|
77
|
+
href="../components/content-slider.html"
|
|
78
|
+
>Content Slider<br><small>Component</small></a></k-filter-item>
|
|
79
|
+
<k-filter-item filter-keywords="context state global components"><a
|
|
80
|
+
href="../components/context.html"
|
|
81
|
+
>Context<br><small>Component</small></a></k-filter-item>
|
|
82
|
+
<k-filter-item filter-keywords="dialog modal popup components"><a
|
|
83
|
+
href="../components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
|
|
84
|
+
<k-filter-item filter-keywords="dropdown select components"><a
|
|
85
|
+
href="../components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
|
|
86
|
+
<k-filter-item filter-keywords="filter list filterlist components"><a
|
|
87
|
+
href="../components/filter-list.html"
|
|
88
|
+
>Filter List<br><small>Component</small></a></k-filter-item>
|
|
89
|
+
<k-filter-item filter-keywords="focus capture focuscapture components"><a
|
|
90
|
+
href="../components/focus-capture.html"
|
|
91
|
+
>Focus Capture<br><small>Component</small></a></k-filter-item>
|
|
92
|
+
<k-filter-item filter-keywords="html editor components"><a
|
|
93
|
+
href="../components/html-editor.html">HTML
|
|
94
|
+
Editor<br><small>Component</small></a></k-filter-item>
|
|
95
|
+
<k-filter-item filter-keywords="icon components"><a
|
|
96
|
+
href="../components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
|
|
97
|
+
<k-filter-item filter-keywords="import components"><a
|
|
98
|
+
href="../components/import.html">Import<br><small>Component</small></a></k-filter-item>
|
|
99
|
+
<k-filter-item filter-keywords="nav navbar navigation components"><a
|
|
100
|
+
href="../components/nav.html">Nav<br><small>Component</small></a></k-filter-item>
|
|
101
|
+
<k-filter-item filter-keywords="nav spacer navbar spacer navspacer components"><a
|
|
102
|
+
href="../components/nav-spacer.html"
|
|
103
|
+
>Nav Spacer<br><small>Component</small></a></k-filter-item>
|
|
104
|
+
<k-filter-item filter-keywords="photo viewer photoviewer components"><a
|
|
105
|
+
href="../components/photo-viewer.html"
|
|
106
|
+
>Photo Viewer<br><small>Component</small></a></k-filter-item>
|
|
107
|
+
<k-filter-item filter-keywords="resize components"><a
|
|
108
|
+
href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
|
|
109
|
+
<k-filter-item filter-keywords="show more showmore components"><a
|
|
110
|
+
href="../components/show-more.html"
|
|
111
|
+
>Show More<br><small>Component</small></a></k-filter-item>
|
|
112
|
+
<k-filter-item filter-keywords="sortable drag drop sort components"><a
|
|
113
|
+
href="../components/sortable.html"
|
|
114
|
+
>Sortable<br><small>Component</small></a></k-filter-item>
|
|
115
|
+
<k-filter-item filter-keywords="spinner loading components"><a
|
|
116
|
+
href="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
|
|
117
|
+
<k-filter-item filter-keywords="split pane components"><a
|
|
118
|
+
href="../components/split.html">Split<br><small>Component</small></a></k-filter-item>
|
|
119
|
+
<k-filter-item filter-keywords="table data grid components"><a
|
|
120
|
+
href="../components/table.html">Table<br><small>Component</small></a></k-filter-item>
|
|
121
|
+
<k-filter-item filter-keywords="table controls advanced example"><a
|
|
122
|
+
href="../components/tableControls.html"
|
|
123
|
+
>Table — Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
124
|
+
<k-filter-item filter-keywords="table custom fields advanced example"><a
|
|
125
|
+
href="../components/tableCustomFields.html"
|
|
126
|
+
>Table — Custom Fields<br><small>Advanced Example</small></a></k-filter-item>
|
|
127
|
+
<k-filter-item filter-keywords="table fetch records advanced example"><a
|
|
128
|
+
href="../components/tableFetchRecords.html"
|
|
129
|
+
>Table — Fetch Records<br><small>Advanced Example</small></a></k-filter-item>
|
|
130
|
+
<k-filter-item filter-keywords="table field sort hide advanced example"><a
|
|
131
|
+
href="../components/tableFieldSortHide.html"
|
|
132
|
+
>Table — Field Sort & Hide<br><small>Advanced Example</small></a></k-filter-item>
|
|
133
|
+
<k-filter-item filter-keywords="table pagination advanced example"><a
|
|
134
|
+
href="../components/tablePagination.html"
|
|
135
|
+
>Table — Pagination<br><small>Advanced Example</small></a></k-filter-item>
|
|
136
|
+
<k-filter-item filter-keywords="table record editing advanced example"><a
|
|
137
|
+
href="../components/tableRecordEditing.html"
|
|
138
|
+
>Table — Record Editing<br><small>Advanced Example</small></a></k-filter-item>
|
|
139
|
+
<k-filter-item filter-keywords="table record filtering advanced example"><a
|
|
140
|
+
href="../components/tableRecordFiltering.html"
|
|
141
|
+
>Table — Record Filtering<br><small>Advanced Example</small></a></k-filter-item>
|
|
142
|
+
<k-filter-item filter-keywords="table record hiding advanced example"><a
|
|
143
|
+
href="../components/tableRecordHiding.html"
|
|
144
|
+
>Table — Record Hiding<br><small>Advanced Example</small></a></k-filter-item>
|
|
145
|
+
<k-filter-item filter-keywords="table record searching advanced example"><a
|
|
146
|
+
href="../components/tableRecordSearching.html"
|
|
147
|
+
>Table — Record Searching<br><small>Advanced Example</small></a></k-filter-item>
|
|
148
|
+
<k-filter-item filter-keywords="table record selection advanced example"><a
|
|
149
|
+
href="../components/tableRecordSelection.html"
|
|
150
|
+
>Table — Record Selection<br><small>Advanced Example</small></a></k-filter-item>
|
|
151
|
+
<k-filter-item filter-keywords="table row controls advanced example"><a
|
|
152
|
+
href="../components/tableRowControls.html"
|
|
153
|
+
>Table — Row Controls<br><small>Advanced Example</small></a></k-filter-item>
|
|
154
|
+
<k-filter-item filter-keywords="table server sync advanced example"><a
|
|
155
|
+
href="../components/tableServerSync.html"
|
|
156
|
+
>Table — Server Sync<br><small>Advanced Example</small></a></k-filter-item>
|
|
157
|
+
<k-filter-item filter-keywords="table sorting advanced example"><a
|
|
158
|
+
href="../components/tableSorting.html"
|
|
159
|
+
>Table — Sorting<br><small>Advanced Example</small></a></k-filter-item>
|
|
160
|
+
<k-filter-item filter-keywords="table placeholder advanced example"><a
|
|
161
|
+
href="../components/tablePlaceholder.html"
|
|
162
|
+
>Table — Placeholder<br><small>Advanced Example</small></a></k-filter-item>
|
|
163
|
+
<k-filter-item filter-keywords="tabs tab panel components"><a
|
|
164
|
+
href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
|
|
165
|
+
<k-filter-item filter-keywords="tags tag input components"><a
|
|
166
|
+
href="../components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
|
|
167
|
+
<k-filter-item filter-keywords="theme select dropdown dark light components"><a
|
|
168
|
+
href="../components/theme-select.html"
|
|
169
|
+
>Theme Select<br><small>Component</small></a></k-filter-item>
|
|
170
|
+
<k-filter-item filter-keywords="theme switcher dark light components"><a
|
|
171
|
+
href="../components/theme-switcher.html"
|
|
172
|
+
>Theme Switcher<br><small>Component</small></a></k-filter-item>
|
|
173
|
+
<k-filter-item filter-keywords="timestamp date time components"><a
|
|
174
|
+
href="../components/timestamp.html"
|
|
175
|
+
>Timestamp<br><small>Component</small></a></k-filter-item>
|
|
176
|
+
<k-filter-item filter-keywords="toast notification alert components"><a
|
|
177
|
+
href="../components/toast.html"
|
|
178
|
+
>Toast<br><small>Component</small></a></k-filter-item>
|
|
179
|
+
<k-filter-item filter-keywords="toggle switch checkbox components"><a
|
|
180
|
+
href="../components/toggle.html"
|
|
181
|
+
>Toggle<br><small>Component</small></a></k-filter-item>
|
|
182
|
+
<k-filter-item filter-keywords="tree treeview components"><a
|
|
183
|
+
href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
|
|
184
|
+
<k-filter-item filter-keywords="shadow component base"><a
|
|
185
|
+
href="../components/shadow-component.html"
|
|
186
|
+
>Shadow Component<br><small>Base Component</small></a></k-filter-item>
|
|
187
|
+
<k-filter-item filter-keywords="light component base"><a
|
|
188
|
+
href="../components/light-component.html">Light Component<br><small>Base
|
|
189
|
+
Component</small></a></k-filter-item>
|
|
190
|
+
<k-filter-item filter-keywords="hybrid component base"><a
|
|
191
|
+
href="../components/hybrid-component.html"
|
|
192
|
+
>Hybrid Component<br><small>Base Component</small></a></k-filter-item>
|
|
193
|
+
<k-filter-item filter-keywords="cookie utils utility"><a
|
|
194
|
+
href="../utils/cookie.html">cookie<br><small>Utility</small></a></k-filter-item>
|
|
195
|
+
<k-filter-item filter-keywords="context utils utility"><a
|
|
196
|
+
href="../utils/context.html">context<br><small>Utility</small></a></k-filter-item>
|
|
197
|
+
<k-filter-item filter-keywords="debounce utils utility"><a
|
|
198
|
+
href="../utils/debounce.html">debounce<br><small>Utility</small></a></k-filter-item>
|
|
199
|
+
<k-filter-item filter-keywords="drag utils utility"><a
|
|
200
|
+
href="../utils/drag.html">drag<br><small>Utility</small></a></k-filter-item>
|
|
201
|
+
<k-filter-item filter-keywords="elevation z-index stacking utils"><a
|
|
202
|
+
href="../utils/elevation.html">elevation<br><small>Utility</small></a></k-filter-item>
|
|
203
|
+
<k-filter-item filter-keywords="formattimestamp timestamp format date time utils utility"><a
|
|
204
|
+
href="../utils/formatTimestamp.html"
|
|
205
|
+
>formatTimestamp<br><small>Utility</small></a></k-filter-item>
|
|
206
|
+
<k-filter-item filter-keywords="object utils utility"><a
|
|
207
|
+
href="../utils/object.html">object<br><small>Utility</small></a></k-filter-item>
|
|
208
|
+
<k-filter-item filter-keywords="propconverters prop converters utils utility"><a
|
|
209
|
+
href="../utils/propConverters.html"
|
|
210
|
+
>propConverters<br><small>Utility</small></a></k-filter-item>
|
|
211
|
+
<k-filter-item filter-keywords="string utils utility"><a
|
|
212
|
+
href="../utils/string.html">string<br><small>Utility</small></a></k-filter-item>
|
|
213
|
+
<k-filter-item filter-keywords="theme utils utility"><a
|
|
214
|
+
href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
|
|
215
|
+
<k-filter-item filter-keywords="type utils utility"><a
|
|
216
|
+
href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
|
|
217
|
+
<k-filter-item filter-keywords="wait async utils utility"><a
|
|
218
|
+
href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
|
|
90
219
|
</k-filter-list>
|
|
91
220
|
</div>
|
|
92
221
|
</div>
|
|
93
222
|
<div class="flex"></div>
|
|
94
|
-
<a
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
223
|
+
<a
|
|
224
|
+
href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
|
|
225
|
+
target="_blank"
|
|
226
|
+
><k-icon name="license"></k-icon></a>
|
|
227
|
+
<a
|
|
228
|
+
href="https://www.npmjs.com/package/kempo-ui"
|
|
229
|
+
target="_blank"
|
|
230
|
+
><k-icon name="npm"></k-icon></a>
|
|
231
|
+
<a
|
|
232
|
+
href="https://github.com/dustinpoissant/kempo-ui"
|
|
233
|
+
target="_blank"
|
|
234
|
+
><k-icon name="github-mark"></k-icon></a>
|
|
235
|
+
<k-theme-switcher
|
|
236
|
+
class="mr"
|
|
237
|
+
style="
|
|
238
|
+
--padding: 0.5rem;
|
|
239
|
+
--c_active: var(--tc_on_primary);
|
|
240
|
+
--tc_active: var(--c_primary);
|
|
241
|
+
--c_inactive__hover: rgba(255, 255, 255, 0.1);
|
|
242
|
+
"
|
|
243
|
+
></k-theme-switcher>
|
|
98
244
|
</k-nav>
|
|
99
245
|
<div style="width: 100%; height: 4rem;"></div>
|
|
100
|
-
<k-aside
|
|
246
|
+
<k-aside
|
|
247
|
+
id="navSideMenu"
|
|
248
|
+
main="overlay"
|
|
249
|
+
state="offscreen"
|
|
250
|
+
>
|
|
101
251
|
<menu>
|
|
102
|
-
<a
|
|
252
|
+
<a
|
|
253
|
+
href="../"
|
|
254
|
+
class="ta-center bb mb r0"
|
|
255
|
+
>
|
|
103
256
|
<h1 class="tc-primary">Kempo UI</h1>
|
|
104
|
-
<img
|
|
257
|
+
<img
|
|
258
|
+
src="../media/icon128.png"
|
|
259
|
+
alt="Kempo UI Icon"
|
|
260
|
+
/>
|
|
105
261
|
</a>
|
|
106
262
|
|
|
107
263
|
<div class="pl mb">
|
|
@@ -110,6 +266,7 @@
|
|
|
110
266
|
<a href="../components/aside.html">Aside</a>
|
|
111
267
|
<a href="../components/card.html">Card</a>
|
|
112
268
|
<a href="../components/code-editor.html">Code Editor</a>
|
|
269
|
+
<a href="../components/combobox.html">Combobox</a>
|
|
113
270
|
<a href="../components/color-picker.html">ColorPicker</a>
|
|
114
271
|
<a href="../components/content-slider.html">Content Slider</a>
|
|
115
272
|
<a href="../components/context.html">Context</a>
|
|
@@ -164,16 +321,47 @@
|
|
|
164
321
|
</menu>
|
|
165
322
|
</k-aside>
|
|
166
323
|
<style>
|
|
167
|
-
#navSearchList a{
|
|
168
|
-
|
|
169
|
-
|
|
324
|
+
#navSearchList a {
|
|
325
|
+
display: block;
|
|
326
|
+
padding: .25rem .5rem;
|
|
327
|
+
border-radius: var(--radius);
|
|
328
|
+
text-decoration: none;
|
|
329
|
+
color: var(--tc);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
#navSearchList a:hover {
|
|
333
|
+
background: rgba(128, 128, 128, .15);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
#navSearchList a small {
|
|
337
|
+
display: block;
|
|
338
|
+
color: var(--tc_muted);
|
|
339
|
+
}
|
|
170
340
|
</style>
|
|
171
|
-
<script
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
<script
|
|
176
|
-
|
|
341
|
+
<script
|
|
342
|
+
src="../src/components/Nav.js"
|
|
343
|
+
type="module"
|
|
344
|
+
></script>
|
|
345
|
+
<script
|
|
346
|
+
src="../src/components/FilterList.js"
|
|
347
|
+
type="module"
|
|
348
|
+
></script>
|
|
349
|
+
<script
|
|
350
|
+
src="../src/components/FilterItem.js"
|
|
351
|
+
type="module"
|
|
352
|
+
></script>
|
|
353
|
+
<script
|
|
354
|
+
src="../src/components/Aside.js"
|
|
355
|
+
type="module"
|
|
356
|
+
></script>
|
|
357
|
+
<script
|
|
358
|
+
src="../src/components/Icon.js"
|
|
359
|
+
type="module"
|
|
360
|
+
></script>
|
|
361
|
+
<script
|
|
362
|
+
src="../src/components/ThemeSwitcher.js"
|
|
363
|
+
type="module"
|
|
364
|
+
></script>
|
|
177
365
|
<script type="module">
|
|
178
366
|
import debounce from '../src/utils/debounce.js';
|
|
179
367
|
|
|
@@ -182,12 +370,12 @@
|
|
|
182
370
|
document.getElementById('navSideMenu').toggle();
|
|
183
371
|
});
|
|
184
372
|
|
|
185
|
-
document.addEventListener('click', function(e) {
|
|
186
|
-
if(e.target.matches('a[href^="#"]')) {
|
|
373
|
+
document.addEventListener('click', function (e) {
|
|
374
|
+
if (e.target.matches('a[href^="#"]')) {
|
|
187
375
|
e.preventDefault();
|
|
188
376
|
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
189
377
|
const target = document.getElementById(targetId);
|
|
190
|
-
if(target) {
|
|
378
|
+
if (target) {
|
|
191
379
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
192
380
|
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
193
381
|
history.replaceState(null, '', url);
|
|
@@ -204,7 +392,7 @@
|
|
|
204
392
|
|
|
205
393
|
const openSearch = async () => {
|
|
206
394
|
await customElements.whenDefined('k-filter-list');
|
|
207
|
-
if(!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
395
|
+
if (!navSearchList) navSearchList = document.getElementById('navSearchList');
|
|
208
396
|
navSearchList.filter(searchInput.value);
|
|
209
397
|
searchDropdown.hidden = false;
|
|
210
398
|
};
|
|
@@ -221,11 +409,11 @@
|
|
|
221
409
|
}, 150));
|
|
222
410
|
|
|
223
411
|
searchInput.addEventListener('keydown', e => {
|
|
224
|
-
if(e.key === 'Escape') {
|
|
412
|
+
if (e.key === 'Escape') {
|
|
225
413
|
searchInput.value = '';
|
|
226
414
|
searchInput.blur();
|
|
227
415
|
closeSearch();
|
|
228
|
-
} else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
416
|
+
} else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
|
229
417
|
navSearchList?.handleKeydown(e);
|
|
230
418
|
}
|
|
231
419
|
});
|
|
@@ -236,11 +424,11 @@
|
|
|
236
424
|
|
|
237
425
|
document.addEventListener('keydown', e => {
|
|
238
426
|
let active = document.activeElement;
|
|
239
|
-
while(active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
427
|
+
while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
|
|
240
428
|
const tag = active?.tagName;
|
|
241
|
-
if(tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
|
|
242
|
-
if(e.metaKey || e.ctrlKey || e.altKey) return;
|
|
243
|
-
if(e.key.length === 1) {
|
|
429
|
+
if (tag === 'INPUT' || tag === 'TEXTAREA' || active?.isContentEditable) return;
|
|
430
|
+
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
|
431
|
+
if (e.key.length === 1) {
|
|
244
432
|
searchInput.focus();
|
|
245
433
|
}
|
|
246
434
|
});
|
|
@@ -256,7 +444,11 @@
|
|
|
256
444
|
<k-accordion-panel name="toc-panel">
|
|
257
445
|
<div class="m pl">
|
|
258
446
|
<h6>Examples</h6>
|
|
259
|
-
<a href="#basicUsage">Basic Usage</a><br />
|
|
447
|
+
<a href="#basicUsage">Basic Usage (Segmented)</a><br />
|
|
448
|
+
<a href="#toggleMode">Toggle Mode</a><br />
|
|
449
|
+
<a href="#customOptions">Custom Options</a><br />
|
|
450
|
+
<a href="#autoMode">Auto Mode (Aside Detection)</a><br />
|
|
451
|
+
<a href="#labels">Labels</a><br />
|
|
260
452
|
<a href="#customPadding">Custom Padding</a><br />
|
|
261
453
|
|
|
262
454
|
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
@@ -272,10 +464,11 @@
|
|
|
272
464
|
|
|
273
465
|
<h3>Description</h3>
|
|
274
466
|
<p>The <code>ThemeSwitcher</code> component provides a UI control for users to switch between different themes (auto, light, dark). It extends the <a href="./shadow-component.html">ShadowComponent</a> class and uses the <a href="../utils/theme.html">theme utility</a> internally for state management, persistence, and synchronization.</p>
|
|
467
|
+
<p>The component supports two display modes: <strong>segmented</strong> (shows all options as buttons) and <strong>toggle</strong> (single button that cycles through options on click). When <code>mode</code> is <code>"auto"</code> (the default), the component detects if it is inside a <code><k-aside></code> and switches between segmented and toggle based on the aside state.</p>
|
|
275
468
|
<p><strong>Note:</strong> You can manage theme state without this component by directly importing the <a href="../utils/theme.html">theme utility</a>.</p>
|
|
276
469
|
|
|
277
|
-
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
278
|
-
<p>
|
|
470
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage (Segmented)</a></h3>
|
|
471
|
+
<p>By default, the component renders as a segmented control with buttons for each theme option. The active theme is highlighted.</p>
|
|
279
472
|
|
|
280
473
|
<div class="row -mx mb">
|
|
281
474
|
<div class="col d-span-6 m-span-12 px">
|
|
@@ -290,6 +483,112 @@
|
|
|
290
483
|
</div>
|
|
291
484
|
</div>
|
|
292
485
|
|
|
486
|
+
<h3 id="toggleMode"><a href="#toggleMode" class="no-link">Toggle Mode</a></h3>
|
|
487
|
+
<p>Set <code>mode="toggle"</code> to display a single button that cycles through the theme options on each click.</p>
|
|
488
|
+
|
|
489
|
+
<div class="row -mx mb">
|
|
490
|
+
<div class="col d-span-6 m-span-12 px">
|
|
491
|
+
<k-card label="HTML">
|
|
492
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">'toggle'</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
493
|
+
</k-card>
|
|
494
|
+
</div>
|
|
495
|
+
<div class="col d-span-6 m-span-12 px">
|
|
496
|
+
<k-card label="Output">
|
|
497
|
+
<k-theme-switcher mode="toggle"></k-theme-switcher>
|
|
498
|
+
</k-card>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
<h3 id="customOptions"><a href="#customOptions" class="no-link">Custom Options</a></h3>
|
|
503
|
+
<p>Use the <code>options</code> attribute to control which themes are available and in what order. Provide a comma-separated list. Both toggle and segmented modes respect this attribute.</p>
|
|
504
|
+
|
|
505
|
+
<div class="row -mx mb">
|
|
506
|
+
<div class="col d-span-6 m-span-12 px">
|
|
507
|
+
<k-card label="HTML (segmented, dark & light only)">
|
|
508
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">options</span>=<span class="hljs-string">'dark, light'</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
509
|
+
</k-card>
|
|
510
|
+
</div>
|
|
511
|
+
<div class="col d-span-6 m-span-12 px">
|
|
512
|
+
<k-card label="Output">
|
|
513
|
+
<k-theme-switcher options="dark, light"></k-theme-switcher>
|
|
514
|
+
</k-card>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
|
|
518
|
+
<div class="row -mx mb">
|
|
519
|
+
<div class="col d-span-6 m-span-12 px">
|
|
520
|
+
<k-card label="HTML (toggle, dark & light only)">
|
|
521
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">'toggle'</span> <span class="hljs-attr">options</span>=<span class="hljs-string">'dark, light'</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
522
|
+
</k-card>
|
|
523
|
+
</div>
|
|
524
|
+
<div class="col d-span-6 m-span-12 px">
|
|
525
|
+
<k-card label="Output">
|
|
526
|
+
<k-theme-switcher mode="toggle" options="dark, light"></k-theme-switcher>
|
|
527
|
+
</k-card>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<h3 id="autoMode"><a href="#autoMode" class="no-link">Auto Mode (Aside Detection)</a></h3>
|
|
532
|
+
<p>When <code>mode="auto"</code> (the default), the component checks if it is inside a <code><k-aside></code>. If so, it renders as <strong>segmented</strong> when the aside is expanded or offscreen, and as <strong>toggle</strong> when the aside is collapsed. If the component is not inside an aside, it always renders as segmented.</p>
|
|
533
|
+
<div class="row -mx">
|
|
534
|
+
<div class="col m-span-12 px">
|
|
535
|
+
<k-card label="HTML">
|
|
536
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-aside</span> <span class="hljs-attr">main</span>=<span class="hljs-string">'push'</span> <span class="hljs-attr">state</span>=<span class="hljs-string">'expanded'</span> <span class="hljs-attr">style</span>=<span class="hljs-string">'--aside_padding: 0;'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-aside-toggle</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'m0'</span>></span>Kempo<span class="hljs-tag"></<span class="hljs-name">h5</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">k-aside-toggle</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">'cards'</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span> <span class="hljs-attr">active</span>></span>Dashboard<span class="hljs-tag"></<span class="hljs-name">k-aside-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">'check'</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Tasks<span class="hljs-tag"></<span class="hljs-name">k-aside-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-aside-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">'label'</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#'</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">k-aside-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-aside-spacer</span>></span><span class="hljs-tag"></<span class="hljs-name">k-aside-spacer</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'p d-f jc-c'</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">style</span>=<span class="hljs-string">'--padding: 0.5rem;'</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-aside</span>></span><br><span class="hljs-tag"><<span class="hljs-name">k-main</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Main Content<span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Toggle the aside to see the ThemeSwitcher switch modes.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br><span class="hljs-tag"></<span class="hljs-name">k-main</span>></span></code></pre>
|
|
537
|
+
</k-card>
|
|
538
|
+
</div>
|
|
539
|
+
<div class="col m-span-12 px">
|
|
540
|
+
<k-card label="Output">
|
|
541
|
+
<iframe src="./theme-switcher-aside.html" style="width: 100%; height: 400px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
|
|
542
|
+
</k-card>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
<h3 id="labels"><a href="#labels" class="no-link">Labels</a></h3>
|
|
547
|
+
<p>The <code>labels</code> attribute adds text labels next to each icon. Works in both segmented and toggle modes. Labels are automatically hidden when inside a collapsed <code><k-aside></code> to preserve space.</p>
|
|
548
|
+
<ul>
|
|
549
|
+
<li><code>labels</code> (no value) — uses capitalized option names: "Light", "Auto", "Dark"</li>
|
|
550
|
+
<li><code>labels="Claro, Auto, Oscuro"</code> — uses custom labels in the same order as <code>options</code></li>
|
|
551
|
+
</ul>
|
|
552
|
+
|
|
553
|
+
<div class="row -mx mb">
|
|
554
|
+
<div class="col d-span-6 m-span-12 px">
|
|
555
|
+
<k-card label="HTML (Segmented)">
|
|
556
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">labels</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
557
|
+
</k-card>
|
|
558
|
+
</div>
|
|
559
|
+
<div class="col d-span-6 m-span-12 px">
|
|
560
|
+
<k-card label="Output">
|
|
561
|
+
<k-theme-switcher labels></k-theme-switcher>
|
|
562
|
+
</k-card>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
|
|
566
|
+
<div class="row -mx mb">
|
|
567
|
+
<div class="col d-span-6 m-span-12 px">
|
|
568
|
+
<k-card label="HTML (Custom Labels)">
|
|
569
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">labels</span>=<span class="hljs-string">'Claro, Auto, Oscuro'</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
570
|
+
</k-card>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="col d-span-6 m-span-12 px">
|
|
573
|
+
<k-card label="Output">
|
|
574
|
+
<k-theme-switcher labels="Claro, Auto, Oscuro"></k-theme-switcher>
|
|
575
|
+
</k-card>
|
|
576
|
+
</div>
|
|
577
|
+
</div>
|
|
578
|
+
|
|
579
|
+
<div class="row -mx mb">
|
|
580
|
+
<div class="col d-span-6 m-span-12 px">
|
|
581
|
+
<k-card label="HTML (Toggle)">
|
|
582
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-theme-switcher</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">'toggle'</span> <span class="hljs-attr">labels</span>></span><span class="hljs-tag"></<span class="hljs-name">k-theme-switcher</span>></span></code></pre>
|
|
583
|
+
</k-card>
|
|
584
|
+
</div>
|
|
585
|
+
<div class="col d-span-6 m-span-12 px">
|
|
586
|
+
<k-card label="Output">
|
|
587
|
+
<k-theme-switcher mode="toggle" labels></k-theme-switcher>
|
|
588
|
+
</k-card>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
|
|
293
592
|
<h3 id="customPadding"><a href="#customPadding" class="no-link">Custom Padding</a></h3>
|
|
294
593
|
<p>You can customize the button padding by setting the <code>--padding</code> CSS custom property. The default padding uses <code>var(--spacer, 1rem)</code>.</p>
|
|
295
594
|
|
|
@@ -326,12 +625,53 @@
|
|
|
326
625
|
<h5><code>currentTheme<i>: string</i></code></h5>
|
|
327
626
|
<p>Gets or sets the current theme. Possible values are <code>"auto"</code>, <code>"light"</code>, or <code>"dark"</code>. This property is reactive and will trigger a re-render when changed. Syncs to <code>current-theme</code> attribute.</p>
|
|
328
627
|
|
|
628
|
+
<h5><code>mode<i>: string</i></code></h5>
|
|
629
|
+
<p>Controls the display mode of the component. Possible values:</p>
|
|
630
|
+
<ul>
|
|
631
|
+
<li><code>"auto"</code> (default) - Detects if inside a <code><k-aside></code>. Shows segmented when aside is expanded/offscreen, toggle when collapsed. If not in an aside, shows segmented.</li>
|
|
632
|
+
<li><code>"toggle"</code> - Single button that cycles through options on click.</li>
|
|
633
|
+
<li><code>"segmented"</code> - Shows all options as separate buttons with the active one highlighted.</li>
|
|
634
|
+
</ul>
|
|
635
|
+
|
|
636
|
+
<h5><code>options<i>: string</i></code></h5>
|
|
637
|
+
<p>A comma-separated list of theme options to display. Defaults to <code>"light, auto, dark"</code>. Controls which themes are available and in what order for both toggle and segmented modes. Spaces around commas are optional.</p>
|
|
638
|
+
|
|
639
|
+
<h5><code>labels<i>: string</i></code></h5>
|
|
640
|
+
<p>A comma-separated list of labels to display next to each icon, matching the order of <code>options</code>. When present with no value (e.g., just <code>labels</code>), defaults to capitalized option names ("Light", "Auto", "Dark"). Labels are automatically hidden when inside a collapsed <code><k-aside></code> to preserve space. Works in both segmented and toggle modes.</p>
|
|
641
|
+
|
|
329
642
|
<h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
|
|
330
643
|
<h5><code>--padding<i>: length</i></code></h5>
|
|
331
|
-
<p>
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
644
|
+
<p>Padding of all buttons. Defaults to <code>var(--spacer, 1rem)</code>.</p>
|
|
645
|
+
|
|
646
|
+
<h5><code>--c_inactive<i>: color</i></code></h5>
|
|
647
|
+
<p>Background color of inactive buttons. Defaults to <code>transparent</code>.</p>
|
|
648
|
+
|
|
649
|
+
<h5><code>--tc_inactive<i>: color</i></code></h5>
|
|
650
|
+
<p>Text/icon color of inactive buttons. Defaults to <code>inherit</code>.</p>
|
|
651
|
+
|
|
652
|
+
<h5><code>--c_inactive__hover<i>: color</i></code></h5>
|
|
653
|
+
<p>Background color of inactive buttons on hover. Defaults to <code>var(--c_bg__alt)</code>.</p>
|
|
654
|
+
|
|
655
|
+
<h5><code>--tc_inactive__hover<i>: color</i></code></h5>
|
|
656
|
+
<p>Text/icon color of inactive buttons on hover. Defaults to <code>inherit</code>.</p>
|
|
657
|
+
|
|
658
|
+
<h5><code>--c_active<i>: color</i></code></h5>
|
|
659
|
+
<p>Background color of the active button. Defaults to <code>var(--c_primary)</code>.</p>
|
|
660
|
+
|
|
661
|
+
<h5><code>--tc_active<i>: color</i></code></h5>
|
|
662
|
+
<p>Text/icon color of the active button. Defaults to <code>var(--tc_light)</code>.</p>
|
|
663
|
+
|
|
664
|
+
<h5><code>--c_active__hover<i>: color</i></code></h5>
|
|
665
|
+
<p>Background color of the active button on hover. Defaults to <code>var(--c_active)</code>.</p>
|
|
666
|
+
|
|
667
|
+
<h5><code>--tc_active__hover<i>: color</i></code></h5>
|
|
668
|
+
<p>Text/icon color of the active button on hover. Defaults to <code>var(--tc_active)</code>.</p>
|
|
669
|
+
|
|
670
|
+
<h5><code>--border<i>: border</i></code></h5>
|
|
671
|
+
<p>Border applied to inactive buttons in segmented mode. Defaults to <code>1px solid var(--c_border)</code>.</p>
|
|
672
|
+
|
|
673
|
+
<p>Example — styling for use on a primary-colored nav background:</p>
|
|
674
|
+
<pre><code class="hljs css">k-theme-switcher {<br> <span class="hljs-attr">--padding</span>: <span class="hljs-number">0.5rem</span>;<br> <span class="hljs-attr">--c_inactive</span>: transparent;<br> <span class="hljs-attr">--tc_inactive</span>: <span class="hljs-built_in">var</span>(--tc_light);<br> <span class="hljs-attr">--c_active</span>: white;<br> <span class="hljs-attr">--tc_active</span>: <span class="hljs-built_in">var</span>(--c_primary);<br> <span class="hljs-attr">--border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">0.4</span>);<br>}</code></pre>
|
|
335
675
|
|
|
336
676
|
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
337
677
|
<p>The <code>ThemeSwitcher</code> class does not introduce any new public methods beyond those provided by the <a href="./shadow-component.html">ShadowComponent</a> class.</p>
|