lilact 0.2.3 → 0.4.0

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 (51) hide show
  1. package/README.md +1 -1
  2. package/dist/lilact.development.min.js +1 -1
  3. package/dist/lilact.development.min.js.map +1 -1
  4. package/dist/lilact.production.min.js +1 -1
  5. package/dist/lilact.production.min.js.map +1 -1
  6. package/docs/assets/navigation.js +1 -1
  7. package/docs/assets/search.js +1 -1
  8. package/docs/classes/accessories.ErrorBoundary.html +8 -8
  9. package/docs/classes/accessories.Suspense.html +7 -7
  10. package/docs/classes/components.Component.html +10 -10
  11. package/docs/classes/components.HTMLComponent.html +10 -10
  12. package/docs/classes/components.RootComponent.html +10 -10
  13. package/docs/functions/components.createComponent.html +1 -1
  14. package/docs/functions/components.createRoot.html +1 -1
  15. package/docs/functions/components.render.html +1 -1
  16. package/docs/functions/hooks.forwardRef.html +1 -1
  17. package/docs/functions/hooks.useImperativeHandle.html +1 -1
  18. package/docs/functions/misc.toBool.html +3 -0
  19. package/docs/functions/redux.combineReducers.html +12 -0
  20. package/docs/functions/redux.connect.html +1 -1
  21. package/docs/functions/timers.animationFramePromise.html +1 -1
  22. package/docs/functions/timers.clearInterval.html +1 -1
  23. package/docs/functions/timers.clearTimeout.html +1 -1
  24. package/docs/functions/timers.grabTimers.html +1 -1
  25. package/docs/functions/timers.pauseTimers.html +1 -1
  26. package/docs/functions/timers.releaseTimers.html +1 -1
  27. package/docs/functions/timers.resetTimers.html +1 -1
  28. package/docs/functions/timers.resumeTimers.html +1 -1
  29. package/docs/functions/timers.setInterval.html +1 -1
  30. package/docs/functions/timers.setTimeout.html +1 -1
  31. package/docs/functions/timers.timeoutPromise.html +1 -1
  32. package/docs/index.html +2 -2
  33. package/docs/modules/misc.html +1 -1
  34. package/docs/modules/redux.html +1 -1
  35. package/docs/static/demos/form-elements.jsx +110 -0
  36. package/docs/static/index.html +2 -1
  37. package/docs/static/lilact.development.min.js +1 -1
  38. package/docs/static/lilact.production.min.js +1 -1
  39. package/package.json +2 -2
  40. package/root/demos/form-elements.jsx +110 -0
  41. package/root/index.html +2 -1
  42. package/root/lilact.development.min.js +1 -1
  43. package/root/lilact.production.min.js +1 -1
  44. package/src/components.jsx +27 -10
  45. package/src/hooks.jsx +1 -2
  46. package/src/jsx.js +5 -1
  47. package/src/lilact.jsx +3 -7
  48. package/src/misc.jsx +42 -14
  49. package/src/redux.jsx +60 -55
  50. package/src/timers.jsx +7 -2
  51. package/webpack.config.js +1 -1
package/docs/modules/redux.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>redux | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">redux</a></li></ul><h1>Module redux</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="connect"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.connect.html">connect</a><a href="#connect" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="provider"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.Provider.html">Provider</a><a href="#provider" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="usedispatch"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.useDispatch.html">useDispatch</a><a href="#usedispatch" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="useselector"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.useSelector.html">useSelector</a><a href="#useselector" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="usestore"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.useStore.html">useStore</a><a href="#usestore" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#connect"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>connect</span></a><a href="#provider"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Provider</span></a><a href="#usedispatch"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>use<wbr/>Dispatch</span></a><a href="#useselector"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>use<wbr/>Selector</span></a><a href="#usestore"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>use<wbr/>Store</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
1
+ <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>redux | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">redux</a></li></ul><h1>Module redux</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="combinereducers"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.combineReducers.html">combineReducers</a><a href="#combinereducers" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="connect"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.connect.html">connect</a><a href="#connect" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="provider"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.Provider.html">Provider</a><a href="#provider" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="usedispatch"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.useDispatch.html">useDispatch</a><a href="#usedispatch" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="useselector"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.useSelector.html">useSelector</a><a href="#useselector" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="usestore"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/redux.useStore.html">useStore</a><a href="#usestore" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#combinereducers"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>combine<wbr/>Reducers</span></a><a href="#connect"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>connect</span></a><a href="#provider"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Provider</span></a><a href="#usedispatch"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>use<wbr/>Dispatch</span></a><a href="#useselector"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>use<wbr/>Selector</span></a><a href="#usestore"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>use<wbr/>Store</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
package/docs/static/demos/form-elements.jsx ADDED
@@ -0,0 +1,110 @@
1
+ module.exports = function() {
2
+
3
+ return <>
4
+
5
+ <p>Boolean attributes: literal JSX -> Lilact correct; pasted-as-HTML examples below intentionally look wrong</p>
6
+ <div style={{ fontFamily: "sans-serif" }}>
7
+ <h3>Boolean: disabled={false} (should NOT render disabled)</h3>
8
+ <input disabled={false} />
9
+
10
+ <h3>Boolean: disabled (presence) (should render disabled)</h3>
11
+ <input disabled />
12
+
13
+ <h3>Boolean: readOnly={false} (should NOT be readonly)</h3>
14
+ <input readOnly={false} defaultValue="Try editing (should be editable)" />
15
+
16
+ <h3>Boolean: readOnly (presence) (should be readonly)</h3>
17
+ <input readOnly defaultValue="Readonly (pasted HTML demo should be wrong)" />
18
+
19
+ <h3>Boolean: required={false} (should NOT be required)</h3>
20
+ <input required={false} placeholder="Not required" />
21
+
22
+ <h3>Boolean: required (presence) (should be required)</h3>
23
+ <input required placeholder="Required" />
24
+
25
+ <h3>Boolean: checked={false} (checkbox should be unchecked)</h3>
26
+ <input type="checkbox" checked={false} onChange={() => {}} />
27
+
28
+ <h3>Boolean: checked={true} (checkbox should be checked)</h3>
29
+ <input type="checkbox" checked={true} onChange={() => {}} />
30
+
31
+ <h3>Boolean: multiple={false} (select should NOT allow multiple)</h3>
32
+ <select multiple={false}>
33
+ <option>A</option>
34
+ <option>B</option>
35
+ </select>
36
+
37
+ <h3>Boolean: multiple (presence) (select should allow multiple)</h3>
38
+ <select multiple>
39
+ <option>A</option>
40
+ <option>B</option>
41
+ </select>
42
+
43
+ <h3>Boolean: autoFocus={false} (should NOT steal focus)</h3>
44
+ <input autoFocus={false} defaultValue="No autofocus (Lilact)" />
45
+
46
+ <h3>Boolean: autoFocus (presence) (should autofocus)</h3>
47
+ <input autoFocus defaultValue="Autofocus (Lilact)" />
48
+
49
+ <hr />
50
+
51
+ <h3>Select: value="b" (Lilact selects option b)</h3>
52
+ <select value="b" onChange={() => {}}>
53
+ <option value="a">A</option>
54
+ <option value="b">B</option>
55
+ <option value="c">C</option>
56
+ </select>
57
+
58
+ <hr />
59
+
60
+ {/* Uncontrolled components: defaultValue/defaultChecked (Lilact sets initial, then DOM updates) */}
61
+ <h3>Uncontrolled input: defaultValue (initial value, then user can edit)</h3>
62
+ <input defaultValue="Uncontrolled after mount" />
63
+
64
+ <h3>Uncontrolled checkbox: defaultChecked (initially checked, then user toggles)</h3>
65
+ <input type="checkbox" defaultChecked />
66
+
67
+ <hr />
68
+
69
+ {/* checked vs value pitfall */}
70
+ <h3>Checkbox using value attribute (NOT the checked state in Lilact)</h3>
71
+ <input type="checkbox" value="on" onChange={() => {}} />
72
+
73
+ <h3>Checkbox using checked prop (checked state in Lilact)</h3>
74
+ <input type="checkbox" checked onChange={() => {}} />
75
+
76
+ <hr />
77
+
78
+ {/* JSX camelCase: works in Lilact; if pasted literally into HTML it’s “visibly wrong” because HTML won’t interpret JSX props */}
79
+ <h3>JSX attribute casing: className="..." (Lilact applies class; pasted HTML uses className literally)</h3>
80
+ <div className="demo" style={{ padding: 8, border: "1px solid #888" }}>
81
+ className target
82
+ </div>
83
+
84
+ <h3>HTML uses class; Lilact uses className (pasted HTML would ignore className)</h3>
85
+ <div class="demo" style={{ padding: 8, border: "1px solid #888" }}>
86
+ (This one uses class, so pasted HTML is correct.)
87
+ </div>
88
+
89
+ <h3>JSX attribute casing: htmlFor="x" (Lilact links label; pasted HTML uses htmlFor literally)</h3>
90
+ <label htmlFor="x_Lilact">Click label (Lilact should focus input)</label>
91
+ <input id="x_Lilact" type="text" placeholder="Focus target" />
92
+
93
+ <h3>Corresponding plain HTML: for="x" (works in both)</h3>
94
+ <label htmlFor="y_html">Click label (HTML should focus input)</label>
95
+ <input id="y_html" type="text" placeholder="Focus target" />
96
+
97
+ <h3>JSX: tabIndex={2} (Lilact sets focus order; pasted HTML won’t)</h3>
98
+ <input tabIndex={2} defaultValue="tabIndex Lilact" />
99
+
100
+ <h3>JSX: readOnly={true} (Lilact makes readonly; pasted HTML won’t interpret readonly={true})</h3>
101
+ <input readOnly={true} defaultValue="readonly (Lilact)" />
102
+
103
+ <h3>JSX: maxLength={5} (Lilact enforces length; pasted HTML won’t parse maxLength={5})</h3>
104
+ <input maxLength={5} defaultValue="123456789" />
105
+ <p style={{ margin: "4px 0 0" }}>
106
+ Type/try to enter more: Lilact will limit to 5 chars; pasted HTML won’t.
107
+ </p>
108
+ </div>
109
+ </>
110
+ }
package/docs/static/index.html CHANGED
@@ -174,7 +174,8 @@ function App()
174
174
  ['redux.jsx', '( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
175
175
  ['suspense.jsx', '( Suspense, Spinner )'],
176
176
  ['transition.jsx', '( useState, Transition )'],
177
- ['lazy.jsx', '( lazy, require, Suspene, Spinner )']
177
+ ['lazy.jsx', '( lazy, require, Suspene, Spinner )'],
178
+ ['form-elements.jsx', '()']
178
179
  ];
179
180
 
180
181
  return <>