kempo-ui 0.0.29 → 0.0.31

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 (61) hide show
  1. package/.github/copilot-instructions.md +16 -0
  2. package/color-picker-fixed.png +0 -0
  3. package/dist/components/Accordion.js +1 -1
  4. package/dist/components/ColorPicker.js +40 -0
  5. package/dist/components/Dialog.js +1 -1
  6. package/dist/components/SideMenu.js +1 -1
  7. package/dist/components/Table.js +1 -1
  8. package/dist/utils/cookie.js +1 -0
  9. package/dist/utils/object.js +1 -0
  10. package/dist/utils/string.js +1 -0
  11. package/dist/utils/type.js +1 -0
  12. package/dist/utils/wait.js +1 -0
  13. package/docs/components/color-picker.html +369 -0
  14. package/docs/components/content-slider.html +2 -2
  15. package/docs/components/theme-switcher.html +4 -4
  16. package/docs/index.html +33 -3
  17. package/docs/kempo.min.css +1 -1
  18. package/docs/nav-1.inc.html +6 -1
  19. package/docs/nav.inc.html +6 -1
  20. package/docs/src/components/Accordion.js +1 -1
  21. package/docs/src/components/ColorPicker.js +40 -0
  22. package/docs/src/components/Dialog.js +1 -1
  23. package/docs/src/components/SideMenu.js +1 -1
  24. package/docs/src/components/Table.js +1 -1
  25. package/docs/src/utils/cookie.js +1 -0
  26. package/docs/src/utils/object.js +1 -0
  27. package/docs/src/utils/string.js +1 -0
  28. package/docs/src/utils/type.js +1 -0
  29. package/docs/src/utils/wait.js +1 -0
  30. package/docs/utils/cookie.html +145 -0
  31. package/docs/utils/object.html +93 -0
  32. package/docs/utils/string.html +83 -0
  33. package/docs/utils/toTitleCase.html +2 -1
  34. package/docs/utils/type.html +48 -0
  35. package/docs/utils/wait.html +48 -0
  36. package/package.json +2 -2
  37. package/src/components/Accordion.js +5 -13
  38. package/src/components/Card.js +1 -3
  39. package/src/components/ColorPicker.js +578 -0
  40. package/src/components/ContentSlider.js +1 -3
  41. package/src/components/Dialog.js +3 -3
  42. package/src/components/Icon.js +1 -3
  43. package/src/components/Import.js +1 -3
  44. package/src/components/PhotoViewer.js +1 -3
  45. package/src/components/Resize.js +1 -3
  46. package/src/components/ShowMore.js +1 -3
  47. package/src/components/SideMenu.js +3 -5
  48. package/src/components/Table.js +1 -1
  49. package/src/components/ThemeSwitcher.js +1 -3
  50. package/src/components/tableControls/Edit.js +1 -3
  51. package/src/components/tableControls/HiddenCount.js +1 -3
  52. package/src/components/tableControls/Search.js +1 -3
  53. package/src/components/tableControls/TableControl.js +1 -3
  54. package/src/utils/cookie.js +20 -0
  55. package/src/utils/object.js +198 -0
  56. package/src/utils/string.js +74 -0
  57. package/src/utils/type.js +13 -0
  58. package/src/utils/wait.js +18 -0
  59. package/dist/utils/toTitleCase.js +0 -1
  60. package/docs/src/utils/toTitleCase.js +0 -1
  61. package/src/utils/toTitleCase.js +0 -9
package/docs/components/theme-switcher.html CHANGED
@@ -37,7 +37,7 @@
37
37
  </k-accordion>
38
38
 
39
39
  <h3>Description</h3>
40
- <p>The <code>ThemeSwitcher</code> component allows users to switch between different themes (auto, light, dark). It extends the <a href="./component.html">ShadowComponent</a> class and automatically saves the selected theme to local storage, applies it to the document, and synchronizes across browser tabs.</p>
40
+ <p>The <code>ThemeSwitcher</code> component allows users to switch between different themes (auto, light, dark). It extends the <a href="./shadow-component.html">ShadowComponent</a> class and automatically saves the selected theme to local storage, applies it to the document, and synchronizes across browser tabs.</p>
41
41
 
42
42
  <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
43
43
  <p>Use the <code>ThemeSwitcher</code> component to allow users to cycle through themes. Clicking the button cycles through auto → light → dark → auto. The component automatically detects the user's system preference when in auto mode.</p>
@@ -75,14 +75,14 @@
75
75
  <h2 id="jsRef"><a href="jsRef" class="no-link">JavaScript Reference</a></h2>
76
76
 
77
77
  <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
78
- <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
78
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
79
79
  <h5>
80
80
  <code>new ThemeSwitcher()</code>
81
81
  </h5>
82
82
 
83
83
  <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
84
84
  <ul>
85
- <li><a href="./component.html">ShadowComponent</a></li>
85
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
86
86
  <li><a href="./icon.html">Icon</a></li>
87
87
  </ul>
88
88
 
@@ -98,7 +98,7 @@
98
98
  }</code></pre>
99
99
 
100
100
  <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
101
- <p>The <code>ThemeSwitcher</code> class does not introduce any new public methods beyond those provided by the <a href="./component.html">ShadowComponent</a> class.</p>
101
+ <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>
102
102
 
103
103
  <h3 id="staticMethods"><a href="#staticMethods" class="no-link">Static Methods</a></h3>
104
104
  <h5><code>static setTheme(theme)<i>: void</i></code></h5>
package/docs/index.html CHANGED
@@ -61,6 +61,12 @@
61
61
  <p class="tc-muted">Container component with optional labels and border styling.</p>
62
62
  </a>
63
63
  </div>
64
+ <div class="span-12 t-span-6 d-span-4 px">
65
+ <a href="./components/color-picker.html" class="card mb no-link d-b">
66
+ <h3 class="tc-primary">ColorPicker</h3>
67
+ <p class="tc-muted">Advanced color selection supporting all CSS color formats with alpha transparency.</p>
68
+ </a>
69
+ </div>
64
70
  <div class="span-12 t-span-6 d-span-4 px">
65
71
  <a href="./components/content-slider.html" class="card mb no-link d-b">
66
72
  <h3 class="tc-primary">Content Slider</h3>
@@ -226,9 +232,33 @@
226
232
  </a>
227
233
  </div>
228
234
  <div class="span-12 t-span-6 d-span-4 px">
229
- <a href="./utils/toTitleCase.html" class="card mb no-link d-b">
230
- <h3 class="tc-primary">toTitleCase</h3>
231
- <p class="tc-muted">Convert strings from various formats to Title Case.</p>
235
+ <a href="./utils/string.html" class="card mb no-link d-b">
236
+ <h3 class="tc-primary">string</h3>
237
+ <p class="tc-muted">Collection of functions for string manipulation and conversion.</p>
238
+ </a>
239
+ </div>
240
+ <div class="span-12 t-span-6 d-span-4 px">
241
+ <a href="./utils/type.html" class="card mb no-link d-b">
242
+ <h3 class="tc-primary">type</h3>
243
+ <p class="tc-muted">Functions for checking and identifying JavaScript value types.</p>
244
+ </a>
245
+ </div>
246
+ <div class="span-12 t-span-6 d-span-4 px">
247
+ <a href="./utils/object.html" class="card mb no-link d-b">
248
+ <h3 class="tc-primary">object</h3>
249
+ <p class="tc-muted">Functions for manipulating and analyzing JavaScript objects.</p>
250
+ </a>
251
+ </div>
252
+ <div class="span-12 t-span-6 d-span-4 px">
253
+ <a href="./utils/cookie.html" class="card mb no-link d-b">
254
+ <h3 class="tc-primary">cookie</h3>
255
+ <p class="tc-muted">Functions for managing browser cookies.</p>
256
+ </a>
257
+ </div>
258
+ <div class="span-12 t-span-6 d-span-4 px">
259
+ <a href="./utils/wait.html" class="card mb no-link d-b">
260
+ <h3 class="tc-primary">wait</h3>
261
+ <p class="tc-muted">Functions for creating delays and waiting for animation frames.</p>
232
262
  </a>
233
263
  </div>
234
264
  </div>
package/docs/kempo.min.css CHANGED
@@ -1 +1 @@
1
- :root{color-scheme:light;--ff_body:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_heading:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_mono:Consolas,monaco,monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--btn_padding:var(--spacer_h) var(--spacer);--c_bg:light-dark(rgb(249, 249, 249), rgb(51, 51, 51));--c_bg__inv:light-dark(rgb(51, 51, 51), rgb(249, 249, 249));--c_bg__alt:light-dark(rgb(238, 238, 238), rgb(34, 34, 34));--c_overscroll:light-dark(rgb(255, 255, 255), rgb(0, 0, 0));--c_border:light-dark(rgb(204, 204, 204), rgb(119, 119, 119));--c_border__inv:light-dark(var(--d_c_bg_border), rgb(204, 204, 204));--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_input_border:var(--c_border);--c_highlight:light-dark(rgba(41, 100, 210, 0.25), rgba(0, 89, 255, 0.25));--tc:light-dark(rgba(0, 0, 0, 0.93), rgba(255, 255, 255, 0.93));--tc_dark:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--tc_light:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_inv:light-dark(rgba(255, 255, 255, 0.93), rgba(0, 0, 0, 0.93));--tc_muted:light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));--tc_on_primary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_secondary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_success:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_warning:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_danger:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:light-dark(#36f, rgb(138, 180, 248));--tc_secondary:light-dark(#93f, rgb(187, 102, 255));--tc_success:light-dark(#080, rgb(102, 187, 102));--tc_warning:light-dark(#f60, rgb(255, 153, 51));--tc_danger:light-dark(#f03, rgb(255, 85, 119));--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:light-dark(rgb(221, 221, 221), rgb(170, 170, 170));--btn_bg__hover:light-dark(rgb(204, 204, 204), rgb(187, 187, 187));--btn_tc:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--btn_transparent__hover:light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:light-dark(white, var(--c_bg__alt));--input_tc:light-dark(rgba(0, 0, 0, 0.93), var(--tc));--drop_shadow:light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25));--date_picker_icon_filter:light-dark(invert(0), invert(1))}[theme=light]{color-scheme:light}[theme=dark]{color-scheme:dark}[theme=auto]{color-scheme:light dark}:root{interpolate-size:allow-keywords}*,::after,::before{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}blockquote,body,code,dd,dl,dt,h1,h2,h3,h4,h5,h6,li,ol,p,pre,ul{margin:0;padding:.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}.container,main{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav>.link,nav>a{display:inline-block;padding:var(--spacer)!important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}.d-b{display:block!important}.d-ib{display:inline-block!important}.d-g{display:grid!important}.d-i{display:inline!important}.d-n{display:none!important}.d-f{display:flex!important;flex-wrap:wrap}.d-if{display:inline-flex!important;flex-wrap:wrap}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-f{display:flex!important;flex-wrap:wrap}.d-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-f{display:flex!important;flex-wrap:wrap}.t-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-f{display:flex!important;flex-wrap:wrap}.m-d-if{display:inline-flex!important;flex-wrap:wrap}}.flex,.flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-if{display:inline-flex!important;flex-wrap:wrap}.d-d-f{display:flex!important;flex-wrap:wrap}.d-flex,.d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-if{display:inline-flex!important;flex-wrap:wrap}.t-d-f{display:flex!important;flex-wrap:wrap}.t-flex,.t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-if{display:inline-flex!important;flex-wrap:wrap}.m-d-f{display:flex!important;flex-wrap:wrap}.m-flex,.m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}.small,small{font-size:var(--fs_small)!important}.large{font-size:var(--fs_large)!important}.h1,.h2,.h3,.h4,.h5,.h6,b,h1,h2,h3,h4,h5,h6,strong{font-weight:var(--fw_bold)}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:var(--ff_heading)}.h1,h1{font-size:var(--fs_h1)}.h2,h2{font-size:var(--fs_h2)}.h3,h3{font-size:var(--fs_h3)}.h4,h4{font-size:var(--fs_h4)}.h5,h5{font-size:var(--fs_h5)}.h6,h6{font-size:var(--fs_h6)}blockquote,dd,dl,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin-bottom:var(--spacer)}dl,ol,ul{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono,code,pre{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.link,a{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms),box-shadow var(--animation_ms);outline:0;border-radius:var(--radius);text-decoration:var(--link_decoration)}.link:hover,a:hover{color:var(--tc_link__hover)}.link:focus-visible,a:focus{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:.75em}dl{padding:0;margin:0}dd,dt{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd+dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}.p,.pt,.py{padding-top:var(--spacer)!important}.p,.pr,.px{padding-right:var(--spacer)!important}.p,.pb,.py{padding-bottom:var(--spacer)!important}.p,.pl,.px{padding-left:var(--spacer)!important}.ph,.pth,.pyh{padding-top:var(--spacer_h)!important}.ph,.prh,.pxh{padding-right:var(--spacer_h)!important}.pbh,.ph,.pyh{padding-bottom:var(--spacer_h)!important}.ph,.plh,.pxh{padding-left:var(--spacer_h)!important}.pq,.ptq,.pyq{padding-top:var(--spacer_q)!important}.pq,.prq,.pxq{padding-right:var(--spacer_q)!important}.pbq,.pq,.pyq{padding-bottom:var(--spacer_q)!important}.plq,.pq,.pxq{padding-left:var(--spacer_q)!important}.p0,.pt0,.py0{padding-top:.1px!important}.p0,.pr0,.px0{padding-right:.1px!important}.p0,.pb0,.py0{padding-bottom:.1px!important}.p0,.pl0,.px0{padding-left:.1px!important}.m,.mt,.my{margin-top:var(--spacer)!important}.m,.mr,.mx{margin-right:var(--spacer)!important}.m,.mb,.my{margin-bottom:var(--spacer)!important}.m,.ml,.mx{margin-left:var(--spacer)!important}.mh,.mth,.myh{margin-top:var(--spacer_h)!important}.mh,.mrh,.mxh{margin-right:var(--spacer_h)!important}.mbh,.mh,.myh{margin-bottom:var(--spacer_h)!important}.mh,.mlh,.mxh{margin-left:var(--spacer_h)!important}.mq,.mtq,.myq{margin-top:var(--spacer_q)!important}.mq,.mrq,.mxq{margin-right:var(--spacer_q)!important}.mbq,.mq,.myq{margin-bottom:var(--spacer_q)!important}.mlq,.mq,.mxq{margin-left:var(--spacer_q)!important}.m0,.mt0,.my0{margin-top:0!important}.m0,.mr0,.mx0{margin-right:0!important}.m0,.mb0,.my0{margin-bottom:0!important}.m0,.ml0,.mx0{margin-left:0!important}.-m,.-mt,.-my{margin-top:calc(-1 * var(--spacer))!important}.-m,.-mr,.-mx{margin-right:calc(-1 * var(--spacer))!important}.-m,.-mb,.-my{margin-bottom:calc(-1 * var(--spacer))!important}.-m,.-ml,.-mx{margin-left:calc(-1 * var(--spacer))!important}.b,.bt,.by{border-top:1px solid var(--c_border)!important}.b,.br,.bx{border-right:1px solid var(--c_border)!important}.b,.bb,.by{border-bottom:1px solid var(--c_border)!important}.b,.bl,.bx{border-left:1px solid var(--c_border)!important}.b0,.bt0,.by0{border-top:none!important}.b0,.br0,.bx0{border-right:none!important}.b0,.bb0,.by0{border-bottom:none!important}.b0,.bl0,.bx0{border-left:none!important}.r,.rl,.rt,.rtl{border-top-left-radius:var(--radius)!important}.r,.rr,.rt,.rtr{border-top-right-radius:var(--radius)!important}.r,.rb,.rbr,.rr{border-bottom-right-radius:var(--radius)!important}.r,.rb,.rbl,.rl{border-bottom-left-radius:var(--radius)!important}.r0,.rl0,.rt0,.rtl0{border-top-left-radius:0!important}.r0,.rr0,.rt0,.rtr0{border-top-right-radius:0!important}.r0,.rb0,.rbr0,.rr0{border-bottom-right-radius:0!important}.r0,.rb0,.rbl0,.rl0{border-bottom-left-radius:0!important}.round{border-radius:9999rem!important}.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}.cols-7{grid-template-columns:repeat(7,1fr)}.cols-8{grid-template-columns:repeat(8,1fr)}.cols-9{grid-template-columns:repeat(9,1fr)}.cols-10{grid-template-columns:repeat(10,1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2,1fr)}.d-cols-3{grid-template-columns:repeat(3,1fr)}.d-cols-4{grid-template-columns:repeat(4,1fr)}.d-cols-5{grid-template-columns:repeat(5,1fr)}.d-cols-6{grid-template-columns:repeat(6,1fr)}.d-cols-7{grid-template-columns:repeat(7,1fr)}.d-cols-8{grid-template-columns:repeat(8,1fr)}.d-cols-9{grid-template-columns:repeat(9,1fr)}.d-cols-10{grid-template-columns:repeat(10,1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2,1fr)}.t-cols-3{grid-template-columns:repeat(3,1fr)}.t-cols-4{grid-template-columns:repeat(4,1fr)}.t-cols-5{grid-template-columns:repeat(5,1fr)}.t-cols-6{grid-template-columns:repeat(6,1fr)}.t-cols-7{grid-template-columns:repeat(7,1fr)}.t-cols-8{grid-template-columns:repeat(8,1fr)}.t-cols-9{grid-template-columns:repeat(9,1fr)}.t-cols-10{grid-template-columns:repeat(10,1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2,1fr)}.m-cols-3{grid-template-columns:repeat(3,1fr)}.m-cols-4{grid-template-columns:repeat(4,1fr)}.m-cols-5{grid-template-columns:repeat(5,1fr)}.m-cols-6{grid-template-columns:repeat(6,1fr)}.m-cols-7{grid-template-columns:repeat(7,1fr)}.m-cols-8{grid-template-columns:repeat(8,1fr)}.m-cols-9{grid-template-columns:repeat(9,1fr)}.m-cols-10{grid-template-columns:repeat(10,1fr)}}.btn,button:not(.no-btn):not(.no-style),input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:0;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms),box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}.btn:hover,button:not(.no-btn):not(.no-style):hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}.btn:focus,button:not(.no-btn):not(.no-style):focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--btn_box_shadow__hover),var(--focus_shadow);z-index:1}.btn[disabled],button:not(.no-btn):not(.no-style):disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{opacity:.6}.btn.primary,button:not(.no-btn).primary,input[type=button].primary,input[type=reset].primary,input[type=submit].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}.btn.primary:hover,button:not(.no-btn).primary:hover,input[type=button].primary:hover,input[type=reset].primary:hover,input[type=submit].primary:hover{background-color:var(--c_primary__hover)}.btn.secondary,button:not(.no-btn).secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}.btn.secondary:hover,button:not(.no-btn).secondary:hover,input[type=button].secondary:hover,input[type=reset].secondary:hover,input[type=submit].secondary:hover{background-color:var(--c_secondary__hover)}.btn.success,button:not(.no-btn).success,input[type=button].success,input[type=reset].success,input[type=submit].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}.btn.success:hover,button:not(.no-btn).success:hover,input[type=button].success:hover,input[type=reset].success:hover,input[type=submit].success:hover{background-color:var(--c_success__hover)}.btn.warning,button:not(.no-btn).warning,input[type=button].warning,input[type=reset].warning,input[type=submit].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}.btn.warning:hover,button:not(.no-btn).warning:hover,input[type=button].warning:hover,input[type=reset].warning:hover,input[type=submit].warning:hover{background-color:var(--c_warning__hover)}.btn.danger,button:not(.no-btn).danger,input[type=button].danger,input[type=reset].danger,input[type=submit].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}.btn.danger:hover,button:not(.no-btn).danger:hover,input[type=button].danger:hover,input[type=reset].danger:hover,input[type=submit].danger:hover{background-color:var(--c_danger__hover)}.btn.link,button:not(.no-btn):not(.no-style).link,input[type=button].link,input[type=reset].link,input[type=submit].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp .btn:not(:first-child),.btn-grp button:not(.no-btn):not(:first-child),.btn-grp input[type=button]:not(:first-child),.btn-grp input[type=reset]:not(:first-child),.btn-grp input[type=submit]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0,0,0,.25)}.btn-grp .btn:not(:last-child),.btn-grp button:not(.no-btn):not(:last-child),.btn-grp input[type=button]:not(:last-child),.btn-grp input[type=reset]:not(:last-child),.btn-grp input[type=submit]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:0;transition:box-shadow var(--animation_ms)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):focus,input[type=checkbox]:focus,input[type=radio]:focus,select:focus,textarea:focus{box-shadow:var(--focus_shadow)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):disabled,input[type=checkbox]:disabled,input[type=radio]:disabled,select:disabled,textarea:disabled{opacity:.6}select[multiple],textarea{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type=checkbox],input[type=radio]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:0;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer);background-color:var(--input_bg);color:var(--input_tc)}select[multiple]{padding:.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type=color]{padding:0!important;height:2.35em}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border-radius:var(--radius,.25rem);cursor:pointer}input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=time]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator{filter:var(--date_picker_icon_filter)}.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}td,th{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}td:last-child,th:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.bg-inv .tc-primary,.is-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.bg-inv .tc-secondary,.is-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.bg-inv .tc-success,.is-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.bg-inv .tc-warning,.is-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.bg-inv .tc-danger,.is-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
1
+ :root{color-scheme:light;--ff_body:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_heading:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_mono:Consolas,monaco,monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--btn_padding:var(--spacer_h) var(--spacer);--c_bg:light-dark(rgb(249, 249, 249), rgb(51, 51, 51));--c_bg__inv:light-dark(rgb(51, 51, 51), rgb(249, 249, 249));--c_bg__alt:light-dark(rgb(238, 238, 238), rgb(34, 34, 34));--c_overscroll:light-dark(rgb(255, 255, 255), rgb(0, 0, 0));--c_border:light-dark(rgb(204, 204, 204), rgb(119, 119, 119));--c_border__inv:light-dark(var(--d_c_bg_border), rgb(204, 204, 204));--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_input_border:var(--c_border);--c_highlight:light-dark(rgba(41, 100, 210, 0.25), rgba(0, 89, 255, 0.25));--tc:light-dark(rgba(0, 0, 0, 0.93), rgba(255, 255, 255, 0.93));--tc_dark:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--tc_light:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_inv:light-dark(rgba(255, 255, 255, 0.93), rgba(0, 0, 0, 0.93));--tc_muted:light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));--tc_on_primary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_secondary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_success:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_warning:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_danger:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:light-dark(#36f, rgb(138, 180, 248));--tc_secondary:light-dark(#93f, rgb(187, 102, 255));--tc_success:light-dark(#080, rgb(102, 187, 102));--tc_warning:light-dark(#f60, rgb(255, 153, 51));--tc_danger:light-dark(#f03, rgb(255, 85, 119));--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:light-dark(rgb(221, 221, 221), rgb(170, 170, 170));--btn_bg__hover:light-dark(rgb(204, 204, 204), rgb(187, 187, 187));--btn_tc:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--btn_transparent__hover:light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:light-dark(white, var(--c_bg__alt));--input_tc:light-dark(rgba(0, 0, 0, 0.93), var(--tc));--drop_shadow:light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25));--date_picker_icon_filter:light-dark(invert(0), invert(1))}[theme=light]{color-scheme:light}[theme=dark]{color-scheme:dark}[theme=auto]{color-scheme:light dark}:root{interpolate-size:allow-keywords}*,::after,::before{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}blockquote,body,code,dd,dl,dt,h1,h2,h3,h4,h5,h6,li,ol,p,pre,ul{margin:0;padding:.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc);scrollbar-gutter:stable}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}body.no-scroll{overflow:hidden!important}.container,main{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav>.link,nav>a{display:inline-block;padding:var(--spacer)!important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}.d-b{display:block!important}.d-ib{display:inline-block!important}.d-g{display:grid!important}.d-i{display:inline!important}.d-n{display:none!important}.d-f{display:flex!important;flex-wrap:wrap}.d-if{display:inline-flex!important;flex-wrap:wrap}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-f{display:flex!important;flex-wrap:wrap}.d-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-f{display:flex!important;flex-wrap:wrap}.t-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-f{display:flex!important;flex-wrap:wrap}.m-d-if{display:inline-flex!important;flex-wrap:wrap}}.flex,.flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-if{display:inline-flex!important;flex-wrap:wrap}.d-d-f{display:flex!important;flex-wrap:wrap}.d-flex,.d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-if{display:inline-flex!important;flex-wrap:wrap}.t-d-f{display:flex!important;flex-wrap:wrap}.t-flex,.t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-if{display:inline-flex!important;flex-wrap:wrap}.m-d-f{display:flex!important;flex-wrap:wrap}.m-flex,.m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}.small,small{font-size:var(--fs_small)!important}.large{font-size:var(--fs_large)!important}.h1,.h2,.h3,.h4,.h5,.h6,b,h1,h2,h3,h4,h5,h6,strong{font-weight:var(--fw_bold)}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:var(--ff_heading)}.h1,h1{font-size:var(--fs_h1)}.h2,h2{font-size:var(--fs_h2)}.h3,h3{font-size:var(--fs_h3)}.h4,h4{font-size:var(--fs_h4)}.h5,h5{font-size:var(--fs_h5)}.h6,h6{font-size:var(--fs_h6)}blockquote,dd,dl,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin-bottom:var(--spacer)}dl,ol,ul{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono,code,pre{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.link,a{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms),box-shadow var(--animation_ms);outline:0;border-radius:var(--radius);text-decoration:var(--link_decoration)}.link:hover,a:hover{color:var(--tc_link__hover)}.link:focus-visible,a:focus{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:.75em}dl{padding:0;margin:0}dd,dt{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd+dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}.p,.pt,.py{padding-top:var(--spacer)!important}.p,.pr,.px{padding-right:var(--spacer)!important}.p,.pb,.py{padding-bottom:var(--spacer)!important}.p,.pl,.px{padding-left:var(--spacer)!important}.ph,.pth,.pyh{padding-top:var(--spacer_h)!important}.ph,.prh,.pxh{padding-right:var(--spacer_h)!important}.pbh,.ph,.pyh{padding-bottom:var(--spacer_h)!important}.ph,.plh,.pxh{padding-left:var(--spacer_h)!important}.pq,.ptq,.pyq{padding-top:var(--spacer_q)!important}.pq,.prq,.pxq{padding-right:var(--spacer_q)!important}.pbq,.pq,.pyq{padding-bottom:var(--spacer_q)!important}.plq,.pq,.pxq{padding-left:var(--spacer_q)!important}.p0,.pt0,.py0{padding-top:.1px!important}.p0,.pr0,.px0{padding-right:.1px!important}.p0,.pb0,.py0{padding-bottom:.1px!important}.p0,.pl0,.px0{padding-left:.1px!important}.m,.mt,.my{margin-top:var(--spacer)!important}.m,.mr,.mx{margin-right:var(--spacer)!important}.m,.mb,.my{margin-bottom:var(--spacer)!important}.m,.ml,.mx{margin-left:var(--spacer)!important}.mh,.mth,.myh{margin-top:var(--spacer_h)!important}.mh,.mrh,.mxh{margin-right:var(--spacer_h)!important}.mbh,.mh,.myh{margin-bottom:var(--spacer_h)!important}.mh,.mlh,.mxh{margin-left:var(--spacer_h)!important}.mq,.mtq,.myq{margin-top:var(--spacer_q)!important}.mq,.mrq,.mxq{margin-right:var(--spacer_q)!important}.mbq,.mq,.myq{margin-bottom:var(--spacer_q)!important}.mlq,.mq,.mxq{margin-left:var(--spacer_q)!important}.m0,.mt0,.my0{margin-top:0!important}.m0,.mr0,.mx0{margin-right:0!important}.m0,.mb0,.my0{margin-bottom:0!important}.m0,.ml0,.mx0{margin-left:0!important}.-m,.-mt,.-my{margin-top:calc(-1 * var(--spacer))!important}.-m,.-mr,.-mx{margin-right:calc(-1 * var(--spacer))!important}.-m,.-mb,.-my{margin-bottom:calc(-1 * var(--spacer))!important}.-m,.-ml,.-mx{margin-left:calc(-1 * var(--spacer))!important}.b,.bt,.by{border-top:1px solid var(--c_border)!important}.b,.br,.bx{border-right:1px solid var(--c_border)!important}.b,.bb,.by{border-bottom:1px solid var(--c_border)!important}.b,.bl,.bx{border-left:1px solid var(--c_border)!important}.b0,.bt0,.by0{border-top:none!important}.b0,.br0,.bx0{border-right:none!important}.b0,.bb0,.by0{border-bottom:none!important}.b0,.bl0,.bx0{border-left:none!important}.r,.rl,.rt,.rtl{border-top-left-radius:var(--radius)!important}.r,.rr,.rt,.rtr{border-top-right-radius:var(--radius)!important}.r,.rb,.rbr,.rr{border-bottom-right-radius:var(--radius)!important}.r,.rb,.rbl,.rl{border-bottom-left-radius:var(--radius)!important}.r0,.rl0,.rt0,.rtl0{border-top-left-radius:0!important}.r0,.rr0,.rt0,.rtr0{border-top-right-radius:0!important}.r0,.rb0,.rbr0,.rr0{border-bottom-right-radius:0!important}.r0,.rb0,.rbl0,.rl0{border-bottom-left-radius:0!important}.round{border-radius:9999rem!important}.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}.cols-7{grid-template-columns:repeat(7,1fr)}.cols-8{grid-template-columns:repeat(8,1fr)}.cols-9{grid-template-columns:repeat(9,1fr)}.cols-10{grid-template-columns:repeat(10,1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2,1fr)}.d-cols-3{grid-template-columns:repeat(3,1fr)}.d-cols-4{grid-template-columns:repeat(4,1fr)}.d-cols-5{grid-template-columns:repeat(5,1fr)}.d-cols-6{grid-template-columns:repeat(6,1fr)}.d-cols-7{grid-template-columns:repeat(7,1fr)}.d-cols-8{grid-template-columns:repeat(8,1fr)}.d-cols-9{grid-template-columns:repeat(9,1fr)}.d-cols-10{grid-template-columns:repeat(10,1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2,1fr)}.t-cols-3{grid-template-columns:repeat(3,1fr)}.t-cols-4{grid-template-columns:repeat(4,1fr)}.t-cols-5{grid-template-columns:repeat(5,1fr)}.t-cols-6{grid-template-columns:repeat(6,1fr)}.t-cols-7{grid-template-columns:repeat(7,1fr)}.t-cols-8{grid-template-columns:repeat(8,1fr)}.t-cols-9{grid-template-columns:repeat(9,1fr)}.t-cols-10{grid-template-columns:repeat(10,1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2,1fr)}.m-cols-3{grid-template-columns:repeat(3,1fr)}.m-cols-4{grid-template-columns:repeat(4,1fr)}.m-cols-5{grid-template-columns:repeat(5,1fr)}.m-cols-6{grid-template-columns:repeat(6,1fr)}.m-cols-7{grid-template-columns:repeat(7,1fr)}.m-cols-8{grid-template-columns:repeat(8,1fr)}.m-cols-9{grid-template-columns:repeat(9,1fr)}.m-cols-10{grid-template-columns:repeat(10,1fr)}}.btn,button:not(.no-btn):not(.no-style),input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:0;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms),box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}.btn:hover,button:not(.no-btn):not(.no-style):hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}.btn:focus,button:not(.no-btn):not(.no-style):focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--btn_box_shadow__hover),var(--focus_shadow);z-index:1}.btn[disabled],button:not(.no-btn):not(.no-style):disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{opacity:.6}.btn.primary,button:not(.no-btn).primary,input[type=button].primary,input[type=reset].primary,input[type=submit].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}.btn.primary:hover,button:not(.no-btn).primary:hover,input[type=button].primary:hover,input[type=reset].primary:hover,input[type=submit].primary:hover{background-color:var(--c_primary__hover)}.btn.secondary,button:not(.no-btn).secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}.btn.secondary:hover,button:not(.no-btn).secondary:hover,input[type=button].secondary:hover,input[type=reset].secondary:hover,input[type=submit].secondary:hover{background-color:var(--c_secondary__hover)}.btn.success,button:not(.no-btn).success,input[type=button].success,input[type=reset].success,input[type=submit].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}.btn.success:hover,button:not(.no-btn).success:hover,input[type=button].success:hover,input[type=reset].success:hover,input[type=submit].success:hover{background-color:var(--c_success__hover)}.btn.warning,button:not(.no-btn).warning,input[type=button].warning,input[type=reset].warning,input[type=submit].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}.btn.warning:hover,button:not(.no-btn).warning:hover,input[type=button].warning:hover,input[type=reset].warning:hover,input[type=submit].warning:hover{background-color:var(--c_warning__hover)}.btn.danger,button:not(.no-btn).danger,input[type=button].danger,input[type=reset].danger,input[type=submit].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}.btn.danger:hover,button:not(.no-btn).danger:hover,input[type=button].danger:hover,input[type=reset].danger:hover,input[type=submit].danger:hover{background-color:var(--c_danger__hover)}.btn.link,button:not(.no-btn):not(.no-style).link,input[type=button].link,input[type=reset].link,input[type=submit].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp .btn:not(:first-child),.btn-grp button:not(.no-btn):not(:first-child),.btn-grp input[type=button]:not(:first-child),.btn-grp input[type=reset]:not(:first-child),.btn-grp input[type=submit]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0,0,0,.25)}.btn-grp .btn:not(:last-child),.btn-grp button:not(.no-btn):not(:last-child),.btn-grp input[type=button]:not(:last-child),.btn-grp input[type=reset]:not(:last-child),.btn-grp input[type=submit]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:0;transition:box-shadow var(--animation_ms)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):focus,input[type=checkbox]:focus,input[type=radio]:focus,select:focus,textarea:focus{box-shadow:var(--focus_shadow)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):disabled,input[type=checkbox]:disabled,input[type=radio]:disabled,select:disabled,textarea:disabled{opacity:.6}select[multiple],textarea{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type=checkbox],input[type=radio]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:0;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer);background-color:var(--input_bg);color:var(--input_tc)}select[multiple]{padding:.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type=color]{padding:0!important;height:2.35em}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border-radius:var(--radius,.25rem);cursor:pointer}input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=time]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator{filter:var(--date_picker_icon_filter)}.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}td,th{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}td:last-child,th:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.bg-inv .tc-primary,.is-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.bg-inv .tc-secondary,.is-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.bg-inv .tc-success,.is-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.bg-inv .tc-warning,.is-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.bg-inv .tc-danger,.is-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
package/docs/nav-1.inc.html CHANGED
@@ -33,6 +33,7 @@
33
33
  <h3>Components</h3>
34
34
  <a href="../components/accordion.html">Accordion</a>
35
35
  <a href="../components/card.html">Card</a>
36
+ <a href="../components/color-picker.html">ColorPicker</a>
36
37
  <a href="../components/content-slider.html">Content Slider</a>
37
38
  <a href="../components/dialog.html">Dialog</a>
38
39
  <a href="../components/focus-capture.html">FocusCapture</a>
@@ -63,11 +64,15 @@
63
64
 
64
65
  <h5 class="mb0">Utils</h5>
65
66
  <div class="pl mb">
67
+ <a href="../utils/cookie.html">cookie</a>
66
68
  <a href="../utils/debounce.html">debounce</a>
67
69
  <a href="../utils/drag.html">drag</a>
68
70
  <a href="../utils/formatTimestamp.html">formatTimestamp</a>
71
+ <a href="../utils/object.html">object</a>
69
72
  <a href="../utils/propConverters.html">propConverters</a>
70
- <a href="../utils/toTitleCase.html">toTitleCase</a>
73
+ <a href="../utils/string.html">string</a>
74
+ <a href="../utils/type.html">type</a>
75
+ <a href="../utils/wait.html">wait</a>
71
76
  </div>
72
77
  </menu>
73
78
  </k-side-menu>
package/docs/nav.inc.html CHANGED
@@ -34,6 +34,7 @@
34
34
  <h3>Components</h3>
35
35
  <a href="./components/accordion.html">Accordion</a>
36
36
  <a href="./components/card.html">Card</a>
37
+ <a href="./components/color-picker.html">ColorPicker</a>
37
38
  <a href="./components/content-slider.html">Content Slider</a>
38
39
  <a href="./components/dialog.html">Dialog</a>
39
40
  <a href="./components/focus-capture.html">FocusCapture</a>
@@ -64,11 +65,15 @@
64
65
 
65
66
  <h5 class="mb0">Utils</h5>
66
67
  <div class="pl mb">
68
+ <a href="./utils/cookie.html">cookie</a>
67
69
  <a href="./utils/debounce.html">debounce</a>
68
70
  <a href="./utils/drag.html">drag</a>
69
71
  <a href="./utils/formatTimestamp.html">formatTimestamp</a>
72
+ <a href="./utils/object.html">object</a>
70
73
  <a href="./utils/propConverters.html">propConverters</a>
71
- <a href="./utils/toTitleCase.html">toTitleCase</a>
74
+ <a href="./utils/string.html">string</a>
75
+ <a href="./utils/type.html">type</a>
76
+ <a href="./utils/wait.html">wait</a>
72
77
  </div>
73
78
  </menu>
74
79
  </k-side-menu>
package/docs/src/components/Accordion.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists,boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={multiple:{type:Boolean,reflect:!0,converter:boolExists},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.multiple=!1,this.persistentId=null}connectedCallback(){super.connectedCallback?.()}updated(e){if(super.updated?.(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);if(t){const e=t.split(",");this.querySelectorAll("k-accordion-panel").forEach(t=>{t.active=e.includes(t.name);const o=this.getHeader(t.name);o&&(o.active=e.includes(t.name))})}}}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){this.multiple||this.querySelectorAll("k-accordion-panel[active]").forEach(t=>{if(t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}});const t=this.getPanel(e);if(t){t.active=!0,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={multiple:{type:Boolean,reflect:!0,converter:boolExists},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.multiple=!1,this.persistentId=null}connectedCallback(){super.connectedCallback?.()}updated(e){if(super.updated?.(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);if(t){const e=t.split(",");this.querySelectorAll("k-accordion-panel").forEach(t=>{t.active=e.includes(t.name);const o=this.getHeader(t.name);o&&(o.active=e.includes(t.name))})}}}getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){this.multiple||this.querySelectorAll("k-accordion-panel[active]").forEach(t=>{if(t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}});const t=this.getPanel(e);if(t){t.active=!0,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}})),setTimeout(()=>{if(this.persistentId&&window?.localStorage){const e=`accordion-persistent-id-${this.persistentId}`,t=Array.from(this.querySelectorAll("k-accordion-panel[active]")).map(e=>e.name);window.localStorage.setItem(e,t.join(","))}},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
2
2
  :host {
3
3
  display: block;
4
4
  border: 1px solid var(--c_border, #ccc);
package/docs/src/components/ColorPicker.js ADDED
@@ -0,0 +1,40 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class ColorPicker extends ShadowComponent{static properties={format:{type:String,reflect:!0,attribute:"format"},value:{type:String,reflect:!0,attribute:"value"},red:{type:Number},green:{type:Number},blue:{type:Number},alpha:{type:Number}};constructor(){super(),this.format="hex",this.red=0,this.green=0,this.blue=0,this.alpha=1}updated(t){super.updated(t),t.has("format")&&this.requestUpdate()}get value(){if(void 0===this.red||void 0===this.green||void 0===this.blue){const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(0,0,0,1):"#000000"}const t=this.constructor.formats[this.format];return t&&t.toString?t.toString(this.red,this.green,this.blue,this.alpha||1):"#000000"}set value(t){if(t&&"string"==typeof t){for(const[a,s]of Object.entries(this.constructor.formats))if(s.detect(t)){const a=s.parse(t);if(a)return this.red=a.r,this.green=a.g,this.blue=a.b,void(a.hasAlpha&&(this.alpha=a.a))}this.red=0,this.green=0,this.blue=0,this.alpha=1}}onColorInputChange(t){const a=this.constructor.formats.hex.parse(t.target.value);a&&(this.red=a.r,this.green=a.g,this.blue=a.b,this.alpha=1)}onTextInputChange(t){this.value=t.target.value}render(){return html`
2
+ <div id="container">
3
+ <select
4
+ id="format"
5
+ value="${this.format}"
6
+ @change=${t=>this.format=t.target.value}
7
+ >${this.constructor.formats?Object.keys(this.constructor.formats).map(t=>html`<option value="${t}" ?selected=${this.format===t}>${t.toUpperCase()}</option>`):null}</select>
8
+ <input
9
+ id="text"
10
+ type="text"
11
+ value="${this.value}"
12
+ @change=${this.onTextInputChange}
13
+ />
14
+ <input
15
+ id="color"
16
+ type="color"
17
+ value="${this.constructor.formats.hex.toString(this.red||0,this.green||0,this.blue||0,1)}"
18
+ @change=${this.onColorInputChange}
19
+ />
20
+ </div>
21
+ `}static styles=css`
22
+ :host {
23
+ display: block;
24
+ }
25
+ #container {
26
+ display: flex;
27
+ align-items: stretch;
28
+ }
29
+ #format {
30
+ width: 7rem;
31
+ }
32
+ #text {
33
+ flex: 1 1 auto;
34
+ }
35
+ #color {
36
+ width: 3rem;
37
+ height: auto !important;
38
+ align-self: stretch !important;
39
+ }
40
+ `;static formats={hex:{detect:t=>/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(t),parse:t=>{let a,s,r,e=t.slice(1),o=e.length,h=1,n=!1;return 3===o||4===o?(a=parseInt(e[0]+e[0],16),s=parseInt(e[1]+e[1],16),r=parseInt(e[2]+e[2],16),4===o&&(h=parseInt(e[3]+e[3],16)/255,n=!0)):6!==o&&8!==o||(a=parseInt(e.slice(0,2),16),s=parseInt(e.slice(2,4),16),r=parseInt(e.slice(4,6),16),8===o&&(h=parseInt(e.slice(6,8),16)/255,n=!0)),{r:a,g:s,b:r,a:h,hasAlpha:n}},toString:(t,a,s,r)=>{let e=((t=Math.round(t))<<16|(a=Math.round(a))<<8|(s=Math.round(s))).toString(16).padStart(6,"0");if(r<1){e+=Math.round(255*r).toString(16).padStart(2,"0")}return"#"+e}},rgba:{detect:t=>/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;return{r:parseInt(a[1],10),g:parseInt(a[2],10),b:parseInt(a[3],10),a:a[4]?parseFloat(a[4]):1,hasAlpha:!!a[4]}},toString:(t,a,s,r)=>(t=Math.round(t),a=Math.round(a),s=Math.round(s),r<1?`rgba(${t}, ${a}, ${s}, ${r})`:`rgb(${t}, ${a}, ${s})`)},hsla:{detect:t=>/^hsla?\(\s*\d+(?:\.\d+)?\s*,\s*\d+(?:\.\d+)?%\s*,\s*\d+(?:\.\d+)?%\s*(?:,\s*(?:0?\.\d+|1(?:\.0*)?|\d+(?:\.\d*)?))?\s*\)$/.test(t),parse:t=>{const a=t.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*([\d.]+))?\s*\)$/);if(!a)return null;let s=parseFloat(a[1])/360,r=parseFloat(a[2])/100,e=parseFloat(a[3])/100,o=a[4]?parseFloat(a[4]):1;const h=!!a[4];let n,d,l;if(0===r)n=d=l=e;else{const t=(t,a,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(a-t)*s:s<.5?a:s<2/3?t+(a-t)*(2/3-s)*6:t),a=e<.5?e*(1+r):e+r-e*r,o=2*e-a;n=t(o,a,s+1/3),d=t(o,a,s),l=t(o,a,s-1/3)}return{r:Math.round(255*n),g:Math.round(255*d),b:Math.round(255*l),a:o,hasAlpha:h}},toString:(t,a,s,r)=>{t/=255,a/=255,s/=255;const e=Math.max(t,a,s),o=Math.min(t,a,s);let h,n,d=(e+o)/2;if(e===o)h=n=0;else{const r=e-o;switch(n=d>.5?r/(2-e-o):r/(e+o),e){case t:h=(a-s)/r+(a<s?6:0);break;case a:h=(s-t)/r+2;break;case s:h=(t-a)/r+4}h/=6}return h=Math.round(360*h),n=Math.round(100*n),d=Math.round(100*d),r<1?`hsla(${h}, ${n}%, ${d}%, ${r})`:`hsl(${h}, ${n}%, ${d}%)`}},hwb:{detect:t=>/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^hwb\(\s*(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s,r,e,o=parseFloat(a[1]),h=parseFloat(a[2])/100,n=parseFloat(a[3])/100,d=a[4]?parseFloat(a[4]):1,l=1-h-n;if(l>0){let t=o/360,a=1-Math.abs(6*t%2-1),n=h+l*(1-a),d=h+l*a;t<1/6?(s=h+l,r=d,e=h):t<2/6?(s=n,r=h+l,e=h):t<.5?(s=h,r=h+l,e=d):t<4/6?(s=h,r=n,e=h+l):t<5/6?(s=d,r=h,e=h+l):(s=h+l,r=h,e=n)}else s=r=e=h;const i=!!a[4];return{r:Math.round(255*s),g:Math.round(255*r),b:Math.round(255*e),a:d,hasAlpha:i}},toString:(t,a,s,r)=>{t/=255,a/=255,s/=255;const e=Math.max(t,a,s),o=Math.min(t,a,s),h=e-o;let n=0;if(0!==h){switch(e){case t:n=(a-s)/h%6;break;case a:n=(s-t)/h+2;break;case s:n=(t-a)/h+4}n=Math.round(60*n),n<0&&(n+=360)}const d=Math.round(100*o),l=Math.round(100*(1-e));return r<1?`hwb(${n} ${d}% ${l}% / ${r})`:`hwb(${n} ${d}% ${l}%)`}},lab:{detect:t=>/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*s+16)/116,n=h+r/500,d=h-e/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),i=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*l-1.5371385*i-.4985314*p,M=-.969266*l+1.8760108*i+.041556*p,c=.0556434*l-.2040259*i+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055,g=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const b=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:b}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=e>.008856?Math.pow(e,1/3):7.787*e+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=h>.008856?Math.pow(h,1/3):7.787*h+16/116,i=Math.round(100*(116*d-16))/100,p=Math.round(500*(n-d)*100)/100,u=Math.round(200*(d-l)*100)/100;return r<1?`lab(${i}% ${p} ${u} / ${r})`:`lab(${i}% ${p} ${u})`}},lch:{detect:t=>/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^lch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1]),r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=(100*(s/100)+16)/116,n=h+r*Math.cos(e*Math.PI/180)/500,d=h-r*Math.sin(e*Math.PI/180)/200,l=.95047*(n>.206893034?n*n*n:(n-16/116)/7.787),i=1*(h>.206893034?h*h*h:(h-16/116)/7.787),p=1.08883*(d>.206893034?d*d*d:(d-16/116)/7.787),u=3.2404542*l-1.5371385*i-.4985314*p,M=-.969266*l+1.8760108*i+.041556*p,c=.0556434*l-.2040259*i+1.0572252*p,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055,g=c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;const b=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,m))),g:Math.round(255*Math.max(0,Math.min(1,$))),b:Math.round(255*Math.max(0,Math.min(1,g))),a:o,hasAlpha:b}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=(.4124564*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.3575761*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.1804375*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)))/.95047,o=(.2126729*t+.7151522*a+.072175*s)/1,h=(.0193339*t+.119192*a+.9503041*s)/1.08883,n=e>.008856?Math.pow(e,1/3):7.787*e+16/116,d=o>.008856?Math.pow(o,1/3):7.787*o+16/116,l=(116*d-16)/100,i=500*(n-d),p=200*(d-(h>.008856?Math.pow(h,1/3):7.787*h+16/116)),u=Math.sqrt(i*i+p*p);let M=180*Math.atan2(p,i)/Math.PI;M<0&&(M+=360);const c=Math.round(100*l*100)/100,m=Math.round(100*u)/100,$=Math.round(100*M)/100;return r<1?`lch(${c}% ${m} ${$} / ${r})`:`lch(${c}% ${m} ${$})`}},oklab:{detect:t=>/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklab\(\s*(\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=s+.3963377774*r+.2158037573*e,n=s-.1055613458*r-.0638541728*e,d=s-.0894841775*r-1.291485548*e,l=4.0767416621*h-3.3077115913*n+.2309699292*d,i=-1.2684380046*h+2.6097574011*n-.3413193965*d,p=-.0041960863*h-.7034186147*n+1.707614701*d,u=l<=.0031308?12.92*l:1.055*Math.pow(l,1/2.4)-.055,M=i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055,c=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055;const m=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,u))),g:Math.round(255*Math.max(0,Math.min(1,M))),b:Math.round(255*Math.max(0,Math.min(1,c))),a:o,hasAlpha:m}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(e,1/3),d=Math.pow(o,1/3),l=Math.pow(h,1/3),i=.2104542553*n+.793617785*d-.0040720468*l,p=1.9779984951*n-2.428592205*d+.4505937099*l,u=.0259040371*n+.7827717662*d-.808675766*l,M=Math.round(100*i*100)/100,c=Math.round(100*p)/100,m=Math.round(100*u)/100;return r<1?`oklab(${M}% ${c} ${m} / ${r})`:`oklab(${M}% ${c} ${m})`}},oklch:{detect:t=>/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i.test(t),parse:t=>{const a=t.match(/^oklch\(\s*(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)(?:deg)?\s*(?:\/\s*([\d.]+))?\s*\)$/i);if(!a)return null;let s=parseFloat(a[1])/100,r=parseFloat(a[2]),e=parseFloat(a[3]),o=a[4]?parseFloat(a[4]):1,h=r*Math.cos(e*Math.PI/180),n=r*Math.sin(e*Math.PI/180),d=s+.3963377774*h+.2158037573*n,l=s-.1055613458*h-.0638541728*n,i=s-.0894841775*h-1.291485548*n,p=4.0767416621*d-3.3077115913*l+.2309699292*i,u=-1.2684380046*d+2.6097574011*l-.3413193965*i,M=-.0041960863*d-.7034186147*l+1.707614701*i,c=p<=.0031308?12.92*p:1.055*Math.pow(p,1/2.4)-.055,m=u<=.0031308?12.92*u:1.055*Math.pow(u,1/2.4)-.055,$=M<=.0031308?12.92*M:1.055*Math.pow(M,1/2.4)-.055;const g=!!a[4];return{r:Math.round(255*Math.max(0,Math.min(1,c))),g:Math.round(255*Math.max(0,Math.min(1,m))),b:Math.round(255*Math.max(0,Math.min(1,$))),a:o,hasAlpha:g}},toString:(t,a,s,r)=>{a/=255,s/=255;const e=.4122214708*(t=(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4))+.5363325363*(a=a<=.04045?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0514459929*(s=s<=.04045?s/12.92:Math.pow((s+.055)/1.055,2.4)),o=.2119034982*t+.6806995451*a+.1073969566*s,h=.0883024619*t+.2817188376*a+.6299787005*s,n=Math.pow(e,1/3),d=Math.pow(o,1/3),l=Math.pow(h,1/3),i=.2104542553*n+.793617785*d-.0040720468*l,p=1.9779984951*n-2.428592205*d+.4505937099*l,u=.0259040371*n+.7827717662*d-.808675766*l,M=Math.sqrt(p*p+u*u);let c=180*Math.atan2(u,p)/Math.PI;c<0&&(c+=360);const m=Math.round(100*i*100)/100,$=Math.round(100*M)/100,g=Math.round(100*c)/100;return r<1?`oklch(${m}% ${$} ${g} / ${r})`:`oklch(${m}% ${$} ${g})`}}}}window.customElements.define("k-color-picker",ColorPicker);
package/docs/src/components/Dialog.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=e=>e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},disableKeyboardClose:{type:Boolean,reflect:!0,attribute:"disable-keyboard-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.disableKeyboardClose=!1,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=e=>{const{target:t}=e,o=t.id||t.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(e),e.defaultPrevented||this.close())};handleKeydown=e=>{this.disableKeyboardClose||27!==e.keyCode||this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const e=this.updateComplete||this.requestUpdate();e&&e.then?e.then(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()}):setTimeout(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=e=>e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},disableKeyboardClose:{type:Boolean,reflect:!0,attribute:"disable-keyboard-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.disableKeyboardClose=!1,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=e=>{const{target:t}=e,o=t.id||t.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(e),e.defaultPrevented||this.close())};handleKeydown=e=>{this.disableKeyboardClose||27!==e.keyCode||this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown),document.body.classList.add("no-scroll");const e=this.updateComplete||this.requestUpdate();e&&e.then?e.then(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()}):setTimeout(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown),document.body.classList.remove("no-scroll")}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
2
2
  :host {
3
3
  position: fixed;
4
4
  top: 0;
package/docs/src/components/SideMenu.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class SideMenu extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},side:{type:String,reflect:!0}};constructor(){super(),this.opened=!1,this.overlayClose=!0,this.side="left"}overlayClick=()=>{this.overlayClose&&this.close()};updated(e){super.updated(e),e.has("opened")&&(this.opened?(document.body.style.overflow="hidden",this.dispatchEvent(new CustomEvent("change",{detail:"open"})),this.dispatchEvent(new CustomEvent("open"))):(document.body.style.overflow="",this.dispatchEvent(new CustomEvent("change",{detail:"close"})),this.dispatchEvent(new CustomEvent("close"))))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class SideMenu extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},side:{type:String,reflect:!0}};constructor(){super(),this.opened=!1,this.overlayClose=!0,this.side="left"}overlayClick=()=>{this.overlayClose&&this.close()};updated(e){super.updated(e),e.has("opened")&&(this.opened?(document.body.classList.add("no-scroll"),this.dispatchEvent(new CustomEvent("change",{detail:"open"})),this.dispatchEvent(new CustomEvent("open"))):(document.body.classList.remove("no-scroll"),this.dispatchEvent(new CustomEvent("change",{detail:"close"})),this.dispatchEvent(new CustomEvent("close"))))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
2
2
  <k-focus-capture>
3
3
  <div id="container">
4
4
  <button id="overlay" @click=${this.overlayClick}>
package/docs/src/components/Table.js CHANGED
@@ -1,4 +1,4 @@
1
- import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import toTitleCase from"../utils/toTitleCase.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}this.updateContainerWidths()}updateContainerWidths(){const e=this.columnSizes.total+"px",t=this.shadowRoot.getElementById("fields"),s=this.shadowRoot.getElementById("top"),i=this.shadowRoot.getElementById("bottom"),r=this.shadowRoot.getElementById("records");t&&(t.style.width=e),s&&(s.style.width=e),i&&(i.style.width=e),r&&(r.style.width=e)}renderFieldsTemplate(){this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls");const e=[];return this.enableSelection&&e.push(html`
1
+ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{toTitleCase}from"../utils/string.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}this.updateContainerWidths()}updateContainerWidths(){const e=this.columnSizes.total+"px",t=this.shadowRoot.getElementById("fields"),s=this.shadowRoot.getElementById("top"),i=this.shadowRoot.getElementById("bottom"),r=this.shadowRoot.getElementById("records");t&&(t.style.width=e),s&&(s.style.width=e),i&&(i.style.width=e),r&&(r.style.width=e)}renderFieldsTemplate(){this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls");const e=[];return this.enableSelection&&e.push(html`
2
2
  <div class="field controls cell field-select" style="width: 40px">
3
3
  <input
4
4
  type="checkbox"
package/docs/src/utils/cookie.js ADDED
@@ -0,0 +1 @@
1
+ export const saveCookie=(e,o,t=43200,i="/")=>{const n=new Date(Date.now()+60*t*1e3);document.cookie=`${e}=${o};expires=${n.toUTCString()};path=${i}`};export const getCookie=e=>{const o=document.cookie.split(";").map(e=>e.trim().split("=")),t=o.find(o=>o[0]===e);return t?t[1]:null};export const deleteCookie=e=>{document.cookie=`${e}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`};export default{saveCookie:saveCookie,getCookie:getCookie,deleteCookie:deleteCookie};
package/docs/src/utils/object.js ADDED
@@ -0,0 +1 @@
1
+ import{typeOf}from"./type.js";export const toJson=e=>JSON.stringify(e,(t,n)=>""!==t&&n===e?"<<Circular Reference>>":"undefined"!=typeof Element&&n instanceof Element?n.outerHTML:"function"===typeOf(n)?`<<Function ${t}>>`:n);export const flattenObject=(e,t=100,n=0,o=[])=>{const r=n+1;return null===e?{}:Object.keys(e).reduce((n,c)=>{const s=e[c],l=[...o,c].join(".");return"undefined"!==typeOf(Element)&&s instanceof Element?{...n,[l]:s.outerHTML}:null===s?{...n,[l]:null}:"object"==typeof s?t<=r?{...n,[l]:"<<Max Depth Reached>>"}:{...n,...flattenObject(s,t,r,[...o,c])}:{...n,[l]:s}},{})};export const flattenedObjects=(...e)=>e.map(e=>flattenObject(e));export const objectSummary=(e,t=100)=>{if("object"==typeof e){const n=flattenObject(e),o=[];return Object.keys(n).forEach(e=>{o.push(`${e} = ${objectSummary(n[e])}`)}),o.join(", ").substring(0,t)}return`${e}`.substring(0,t)};export const clone=e=>{const t=typeof e,n="undefined"==typeof window?class{}:window.Element;return e instanceof n?e.outerHTML:null===e?null:["string","number","boolean","undefined","bigint"].includes(t)?e:"symbol"===t?"<<SYMBOL>>":"function"===t?"<<function>>":e instanceof Array?e.map(e=>clone(e)):"object"===t?Object.keys(e).reduce((t,n)=>({...t,[n]:clone(e[n])}),{}):e};export const equalObjs=(...e)=>{if(e.length<2)return!0;const t=toJson(e[0]);for(let n=1;n<e.length;n++)if(t!==toJson(e[n]))return!1;return!0};const pruneVar=e=>void 0===e?[void 0,!0]:"string"==typeof e?[e,""===e]:e instanceof Array?[e,0===e.length]:null===e?[e,!1]:"object"==typeof e?pruneObject(e):[e,!1],pruneObject=e=>{const t={};return Object.keys(e).forEach(n=>{const[o,r]=pruneVar(e[n]);r||(t[n]=o)}),[t,0===Object.keys(t).length]};export const prune=e=>pruneObject(e)[0];export const getAllKeys=(...e)=>[...new Set(e.map(e=>Object.keys(e)).flat())];export const getDifferencesKeys=(...e)=>getAllKeys(...e).map(t=>1!==new Set(e.map(e=>e[t])).size?t:null).filter(e=>null!==e);export const diff=(e,t)=>{const n={};function o(e,t,o){Array.isArray(t)&&Array.isArray(o)?t.length===o.length&&t.every((e,t)=>e===o[t])||(n[e.join(".")]={newValue:t,oldValue:o}):"object"==typeof t&&"object"==typeof o?r([...e],t,o):t!==o&&(n[e.join(".")]={newValue:t,oldValue:o})}function r(e,t,n){for(const r in t)if(t.hasOwnProperty(r)){o([...e,r],t[r],n[r])}}return r([],e,t),n};export const mapObject=(e,t)=>Object.entries(e).reduce((e,[n,o])=>{const[r,c]=t(n,o);return e[r]=c,e},{});export default{toJson:toJson,flattenObject:flattenObject,flattenedObjects:flattenedObjects,objectSummary:objectSummary,clone:clone,equalObjs:equalObjs,pruneVar:pruneVar,pruneObject:pruneObject,prune:prune,getAllKeys:getAllKeys,getDifferencesKeys:getDifferencesKeys,diff:diff,mapObject:mapObject};
package/docs/src/utils/string.js ADDED
@@ -0,0 +1 @@
1
+ export const camelToDash=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();export const dashToCamel=e=>e.replace(/-([a-z])/g,(e,a)=>a.toUpperCase());export const isCamelCase=e=>/[a-z][A-Z]/.test(e);export const getCase=e=>isCamelCase(e)?{camel:e,dash:camelToDash(e)}:{camel:dashToCamel(e),dash:e};export const escapeHTML=e=>e.replace(/[&<>"'/]/g,e=>{switch(e){case"&":return"&amp;";case"<":return"&lt;";case">":return"&gt;";case'"':return"&quot;";case"'":return"&#39;";case"/":return"&#x2F;";default:return e}});export const unescapeHTML=e=>e.replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x2F;/g,e=>{switch(e){case"&amp;":return"&";case"&lt;":return"<";case"&gt;":return">";case"&quot;":return'"';case"&#39;":return"'";case"&#x2F;":return"/";default:return e}});export const trim=(e,a)=>e.replace(new RegExp(`^[${a}]+|[${a}]+$`,"g"),"");export const compoundKey=e=>trim(e.join("."),".");export const toTitleCase=e=>e.replace(/([A-Z])/g," $1").split(/[\s_-]+/).filter(e=>e.length>0).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(" ");export default{camelToDash:camelToDash,dashToCamel:dashToCamel,isCamelCase:isCamelCase,getCase:getCase,escapeHTML:escapeHTML,unescapeHTML:unescapeHTML,trim:trim,compoundKey:compoundKey,toTitleCase:toTitleCase};
package/docs/src/utils/type.js ADDED
@@ -0,0 +1 @@
1
+ export const typeOf=e=>null===e?"null":e instanceof Array?"array":"undefined"!=typeof Element&&e instanceof Element?"element":typeof e;export const isType=(e,t)=>typeOf(e)===t;export default{typeOf:typeOf,isType:isType};
package/docs/src/utils/wait.js ADDED
@@ -0,0 +1 @@
1
+ const wait=e=>new Promise(i=>new Timeout(i,e)),waitFrmaes=(e=1)=>new Promise(i=>{let n=0;requestAnimationFrame(function t(){n++,n>=e?i():requestAnimationFrame(t)})});
package/docs/utils/cookie.html ADDED
@@ -0,0 +1,145 @@
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>Cookie Utilities - 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="../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
+ <script src="../init-1.js" type="module"></script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav-1.inc.html"></k-import>
18
+ <main>
19
+ <h1>Cookie Utilities</h1>
20
+
21
+ <k-accordion persistent-id="toc" class="b r mb">
22
+ <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
23
+ <k-accordion-panel name="toc-panel">
24
+ <div class="m ">
25
+ <h6>Functions</h6>
26
+ <a href="#saveCookie">saveCookie</a><br />
27
+ <a href="#getCookie">getCookie</a><br />
28
+ <a href="#deleteCookie">deleteCookie</a><br />
29
+ </div>
30
+ </k-accordion-panel>
31
+ </k-accordion>
32
+
33
+ <h3>Description</h3>
34
+ <p>The cookie utilities module provides functions for managing browser cookies, including saving, retrieving, and
35
+ deleting cookie values.</p>
36
+
37
+ <h3>Working Example</h3>
38
+ <div class="row -mx mb">
39
+ <div class="col d-span-6 m-span-12 px">
40
+ <k-card label="HTML & JavaScript">
41
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cookie-example"</span>&gt;</span>
42
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"saved-message"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
43
+ <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cookie-form"</span>&gt;</span>
44
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"cookie-value"</span>&gt;</span>Value to save:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
45
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cookie-value"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookie-value"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter a value"</span>&gt;</span>
46
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span>&gt;</span>Save to Cookie<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
47
+ <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
48
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"delete-btn"</span>&gt;</span>Delete Cookie<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
49
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
50
+
51
+ <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
52
+ <span class="hljs-keyword">import</span> { saveCookie, getCookie, deleteCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;
53
+
54
+ <span class="hljs-comment">// Load saved value on page load</span>
55
+ <span class="hljs-keyword">const</span> savedValue = getCookie(<span class="hljs-string">'example'</span>);
56
+ <span class="hljs-keyword">if</span> (savedValue) {
57
+ document.getElementById(<span class="hljs-string">'saved-message'</span>).textContent =
58
+ `Saved value from cookie: ${savedValue}`;
59
+ }
60
+
61
+ <span class="hljs-comment">// Handle form submission</span>
62
+ document.getElementById(<span class="hljs-string">'cookie-form'</span>).addEventListener(<span class="hljs-string">'submit'</span>, (e) => {
63
+ e.preventDefault();
64
+ <span class="hljs-keyword">const</span> value = document.getElementById(<span class="hljs-string">'cookie-value'</span>).value;
65
+ saveCookie(<span class="hljs-string">'example'</span>, value);
66
+ <span class="hljs-comment">// Page will refresh due to form submission</span>
67
+ window.location.reload();
68
+ });
69
+
70
+ <span class="hljs-comment">// Delete cookie when delete button is clicked</span>
71
+ document.getElementById(<span class="hljs-string">'delete-btn'</span>).addEventListener(<span class="hljs-string">'click'</span>, () => {
72
+ deleteCookie(<span class="hljs-string">'example'</span>);
73
+ window.location.reload();
74
+ });
75
+ </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
76
+ </k-card>
77
+ </div>
78
+ <div class="col d-span-6 m-span-12 px">
79
+ <k-card label="Results">
80
+ <div id="cookie-example">
81
+ <p id="saved-message"></p>
82
+ <form id="cookie-form">
83
+ <label for="cookie-value">"example" Cookie value:</label>
84
+ <input type="text" id="cookie-value" name="cookie-value" class="mb" placeholder="Enter a value">
85
+ <div class="d-f">
86
+ <div class="flex"></div>
87
+ <button id="delete-btn" class="danger mr" type="button">Delete Cookie</button>
88
+ <button type="submit" class="primary">Save to Cookie</button>
89
+ </div>
90
+ </form>
91
+ </div>
92
+ </k-card>
93
+ </div>
94
+ </div>
95
+
96
+ <h3 id="saveCookie"><a href="#saveCookie" class="no-link">saveCookie</a></h3>
97
+ <p>Saves a cookie with an optional expiration time and path.</p>
98
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { saveCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;<br /><br /><span class="hljs-comment">// Save a cookie that expires in 30 minutes</span><br />saveCookie(<span class="hljs-string">'userId'</span>, <span class="hljs-string">'12345'</span>);<br /><br /><span class="hljs-comment">// Save a cookie that expires in 1 hour</span><br />saveCookie(<span class="hljs-string">'session'</span>, <span class="hljs-string">'abc123'</span>, <span class="hljs-number">60</span>);</code></pre>
99
+
100
+ <h3 id="getCookie"><a href="#getCookie" class="no-link">getCookie</a></h3>
101
+ <p>Retrieves the value of a cookie by name.</p>
102
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { getCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;<br /><br /><span class="hljs-keyword">const</span> userId = getCookie(<span class="hljs-string">'userId'</span>); <span class="hljs-comment">// "12345" or null if not found</span></code></pre>
103
+
104
+ <h3 id="deleteCookie"><a href="#deleteCookie" class="no-link">deleteCookie</a></h3>
105
+ <p>Deletes a cookie by setting its expiration to a past date.</p>
106
+ <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { deleteCookie } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/utils/cookie.js'</span>;<br /><br />deleteCookie(<span class="hljs-string">'userId'</span>);</code></pre>
107
+
108
+ </main>
109
+ <div style="height:33vh"></div>
110
+ <script type="module" src="../src/components/Import.js"></script>
111
+ <script type="module" src="../src/components/Accordion.js"></script>
112
+ <script type="module" src="../src/components/Card.js"></script>
113
+ <script type="module">
114
+ import { saveCookie, getCookie, deleteCookie } from '../src/utils/cookie.js';
115
+
116
+ // Load saved value on page load
117
+ const savedValue = getCookie('example');
118
+ const messageElement = document.getElementById('saved-message');
119
+ if (savedValue && messageElement) {
120
+ messageElement.textContent = `Saved value from cookie: ${savedValue}`;
121
+ }
122
+
123
+ // Handle form submission
124
+ const form = document.getElementById('cookie-form');
125
+ if (form) {
126
+ form.addEventListener('submit', (e) => {
127
+ e.preventDefault();
128
+ const value = document.getElementById('cookie-value').value;
129
+ saveCookie('example', value);
130
+ // Page will refresh due to form submission
131
+ window.location.reload();
132
+ });
133
+ }
134
+
135
+ // Delete cookie when delete button is clicked
136
+ const deleteBtn = document.getElementById('delete-btn');
137
+ if (deleteBtn) {
138
+ deleteBtn.addEventListener('click', () => {
139
+ deleteCookie('example');
140
+ window.location.reload();
141
+ });
142
+ }
143
+ </script>
144
+ </body>
145
+ </html>