kempo-ui 0.0.3 → 0.0.4

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 (137) hide show
  1. package/.github/workflows/publish-major.yml +39 -0
  2. package/.github/workflows/publish-minor.yml +39 -0
  3. package/.github/workflows/{publish-npm.yml → publish-patch.yml} +1 -1
  4. package/.vscode/settings.json +2 -0
  5. package/dist/kempo-hljs.css +1 -0
  6. package/dist/src/components/Accordion.js +36 -0
  7. package/dist/src/components/Card.js +37 -0
  8. package/dist/src/components/Collapsible.js +41 -0
  9. package/dist/src/components/ContentSlider.js +44 -0
  10. package/dist/src/components/Dialog.js +113 -0
  11. package/dist/src/components/Icon.js +2 -2
  12. package/dist/src/components/PersistantCollapsible.js +1 -0
  13. package/dist/src/components/PhotoViewer.js +135 -0
  14. package/dist/src/components/Resize.js +96 -0
  15. package/dist/src/components/ShowMore.js +42 -0
  16. package/dist/src/components/SideMenu.js +1 -1
  17. package/dist/src/components/Split.js +84 -0
  18. package/dist/src/components/Tabs.js +155 -0
  19. package/dist/src/components/Tags.js +69 -0
  20. package/dist/src/components/ThemeSwitcher.js +23 -0
  21. package/dist/src/components/Timestamp.js +1 -0
  22. package/dist/src/utils/debounce.js +1 -0
  23. package/dist/src/utils/drag.js +1 -0
  24. package/dist/src/utils/formatTimestamp.js +1 -0
  25. package/dist/src/utils/propConverters.js +1 -0
  26. package/dist/src/utils/watchWindowSize.js +1 -0
  27. package/docs/components/accordion.html +69 -25
  28. package/docs/components/card.html +6 -5
  29. package/docs/components/collapsible.html +198 -0
  30. package/docs/components/content-slider.html +56 -26
  31. package/docs/components/dialog.html +54 -48
  32. package/docs/components/focus-capture.html +2 -3
  33. package/docs/components/icon.html +5 -8
  34. package/docs/components/import.html +1 -6
  35. package/docs/components/persistant-collapsible.html +123 -0
  36. package/docs/components/photo-viewer.html +226 -0
  37. package/docs/components/resize.html +44 -18
  38. package/docs/components/show-more.html +12 -6
  39. package/docs/components/side-menu.html +3 -12
  40. package/docs/components/split.html +26 -5
  41. package/docs/components/tablePagination.html +4 -4
  42. package/docs/components/tableRecordFiltering.html +16 -3
  43. package/docs/components/tableRecordSelection.html +2 -2
  44. package/docs/components/tabs.html +24 -7
  45. package/docs/components/tags.html +24 -8
  46. package/docs/components/theme-switcher.html +3 -6
  47. package/docs/components/timestamp.html +20 -24
  48. package/docs/components/toast.html +23 -32
  49. package/docs/components/toggle.html +4 -3
  50. package/docs/kempo-hljs.css +1 -0
  51. package/docs/media/civic.jpg +0 -0
  52. package/docs/media/corvette.jpg +0 -0
  53. package/docs/media/evo.jpg +0 -0
  54. package/docs/media/gtr.jpg +0 -0
  55. package/docs/media/nsx.jpg +0 -0
  56. package/docs/nav.inc.html +11 -17
  57. package/docs/src/components/Accordion.js +36 -0
  58. package/docs/src/components/Card.js +37 -0
  59. package/docs/src/components/Collapsible.js +41 -0
  60. package/docs/src/components/ContentSlider.js +44 -0
  61. package/docs/src/components/Dialog.js +113 -0
  62. package/docs/src/components/Icon.js +2 -2
  63. package/docs/src/components/PersistantCollapsible.js +1 -0
  64. package/docs/src/components/PhotoViewer.js +135 -0
  65. package/docs/src/components/Resize.js +96 -0
  66. package/docs/src/components/ShowMore.js +42 -0
  67. package/docs/src/components/SideMenu.js +1 -1
  68. package/docs/src/components/Split.js +84 -0
  69. package/docs/src/components/Tabs.js +155 -0
  70. package/docs/src/components/Tags.js +69 -0
  71. package/docs/src/components/ThemeSwitcher.js +23 -0
  72. package/docs/src/components/Timestamp.js +1 -0
  73. package/docs/src/utils/debounce.js +1 -0
  74. package/docs/src/utils/drag.js +1 -0
  75. package/docs/src/utils/formatTimestamp.js +1 -0
  76. package/docs/src/utils/propConverters.js +1 -0
  77. package/docs/src/utils/watchWindowSize.js +1 -0
  78. package/docs/utils/debounce.html +78 -0
  79. package/docs/utils/drag.html +104 -0
  80. package/docs/utils/formatTimestamp.html +114 -0
  81. package/docs/utils/propConverters.html +132 -0
  82. package/docs/utils/watchWindowSize.html +166 -0
  83. package/icons/error.svg +1 -1
  84. package/icons/warning.svg +1 -1
  85. package/package.json +1 -1
  86. package/scripts/build.js +1 -1
  87. package/scripts/docs.js +4 -2
  88. package/src/components/Accordion.js +229 -0
  89. package/src/components/Collapsible.js +109 -0
  90. package/src/components/ContentSlider.js +205 -0
  91. package/src/components/Dialog.js +368 -0
  92. package/src/components/PersistantCollapsible.js +69 -0
  93. package/src/components/PhotoViewer.js +368 -0
  94. package/src/components/Resize.js +210 -0
  95. package/src/components/ShadowComponent.js +3 -1
  96. package/src/components/ShowMore.js +109 -0
  97. package/src/components/Sortable.js +193 -0
  98. package/src/components/Split.js +192 -0
  99. package/src/components/Table.js +1202 -0
  100. package/src/components/Tabs.js +428 -0
  101. package/src/components/Tags.js +253 -0
  102. package/src/components/Timestamp.js +31 -0
  103. package/src/components/Toast.js +454 -0
  104. package/src/components/Toggle.js +173 -0
  105. package/src/components/tableControls/DeleteRecord.js +29 -0
  106. package/src/components/tableControls/Edit.js +88 -0
  107. package/src/components/tableControls/ExportCSV.js +71 -0
  108. package/src/components/tableControls/ExportJson.js +55 -0
  109. package/src/components/tableControls/FieldSortHide.js +76 -0
  110. package/src/components/tableControls/Filters.js +114 -0
  111. package/src/components/tableControls/FirstPage.js +65 -0
  112. package/src/components/tableControls/HiddenCount.js +45 -0
  113. package/src/components/tableControls/Hide.js +34 -0
  114. package/src/components/tableControls/LastPage.js +65 -0
  115. package/src/components/tableControls/NextPage.js +65 -0
  116. package/src/components/tableControls/PageSelect.js +109 -0
  117. package/src/components/tableControls/PageSize.js +68 -0
  118. package/src/components/tableControls/PrevPage.js +65 -0
  119. package/src/components/tableControls/Search.js +58 -0
  120. package/src/components/tableControls/ShowAll.js +34 -0
  121. package/src/components/tableControls/TableControl.js +105 -0
  122. package/src/utils/debounce.js +9 -0
  123. package/src/utils/drag.js +80 -0
  124. package/src/utils/formatTimestamp.js +27 -0
  125. package/src/utils/toTitleCase.js +9 -0
  126. package/src/utils/watchWindowSize.js +16 -0
  127. package/dist/src/utils/cli.js +0 -1
  128. package/dist/src/utils/fs-utils.js +0 -1
  129. package/docs/components/component.html +0 -90
  130. package/docs/components/directory-viewer.html +0 -90
  131. package/docs/components/lazy-component.html +0 -84
  132. package/docs/components/reactive-component.html +0 -69
  133. package/docs/components/reactive-lazy-component.html +0 -69
  134. package/docs/components/search.html +0 -102
  135. package/docs/components/sortable.html +0 -96
  136. package/src/utils/cli.js +0 -43
  137. package/src/utils/fs-utils.js +0 -41
package/docs/components/import.html CHANGED
@@ -27,7 +27,6 @@
27
27
  <h6 class="mt">JavaScript Reference</h6>
28
28
  <a href="#constructor">Constructor</a><br />
29
29
  <a href="#requirements">Requirements</a><br />
30
- <a href="#attributes">Attributes</a><br />
31
30
  <a href="#properties">Properties</a><br />
32
31
  <a href="#methods">Methods</a><br />
33
32
  </div>
@@ -58,13 +57,9 @@
58
57
  <li><a href="./component.html">Component</a></li>
59
58
  </ul>
60
59
 
61
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
62
- <h5><code>src<i>: string</i></code></h5>
63
- <p>The source URL of the HTML snippet to import.</p>
64
-
65
60
  <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
66
61
  <h5><code>src<i>: string</i></code></h5>
67
- <p>The source URL of the HTML snippet to import.</p>
62
+ <p>The source URL of the HTML snippet to import. Syncs to <code>src</code> attribute.</p>
68
63
 
69
64
  <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
70
65
  <h5><code>load()<i>: Promise</i></code></h5>
package/docs/components/persistant-collapsible.html ADDED
@@ -0,0 +1,123 @@
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>PersistantCollapsible - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
9
+ <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module">
11
+ import ShadowComponent from '../src/components/ShadowComponent.js';
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
15
+ Import.replacements.root = '../';
16
+ Icon.pathToIcons = ['../icons'];
17
+ </script>
18
+ </head>
19
+ <body>
20
+ <k-import src="../nav.inc.html"></k-import>
21
+ <main>
22
+ <h1 class="ta-center">PersistantCollapsible</h1>
23
+
24
+ <details class="b r mb">
25
+ <summary class="p">Table of Contents</summary>
26
+ <div class="m mt0 pl">
27
+ <h6>Examples</h6>
28
+ <a href="#basicUsage">Basic Usage</a><br />
29
+ <a href="#customLabel">Custom Label</a><br />
30
+ <a href="#customIcon">Custom Icon</a><br />
31
+
32
+ <h6 class="mt">JavaScript Reference</h6>
33
+ <a href="#constructor">Constructor</a><br />
34
+ <a href="#requirements">Requirements</a><br />
35
+ <a href="#properties">Properties</a><br />
36
+ <a href="#methods">Methods</a><br />
37
+ </div>
38
+ </details>
39
+
40
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
41
+ <p>The <code>k-p-collapsible</code> component extends the regular <code>k-collapsible</code> with automatic state persistence using localStorage. The component remembers its opened/closed state and restores it when the page is reloaded or reopened.</p>
42
+ <p><strong>Important:</strong> The component requires an <code>id</code> attribute to function properly, as this is used as the localStorage key.</p>
43
+
44
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>Persistent Section<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>This content's visibility state will be remembered across page reloads.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-p-collapsible</span>&gt;</span></code></pre>
45
+
46
+ <k-p-collapsible id="example1" class="mb">
47
+ <span slot="label">Persistent Section</span>
48
+ <p class="p">This content's visibility state will be remembered across page reloads. Try expanding/collapsing it and then refreshing the page.</p>
49
+ </k-p-collapsible>
50
+
51
+ <h3 id="customLabel"><a href="#customLabel" class="no-link">Custom Label</a></h3>
52
+ <p>You can customize the label using the <code>label</code> slot, just like with regular collapsible components.</p>
53
+
54
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span> Enable notifications<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span> Auto-save<br /> <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-p-collapsible</span>&gt;</span></code></pre>
55
+
56
+ <k-p-collapsible id="example2" class="mb">
57
+ <h4 slot="label" class="m0">Settings</h4>
58
+ <div class="p">
59
+ <label>
60
+ <input type="checkbox"> Enable notifications
61
+ </label><br>
62
+ <label>
63
+ <input type="checkbox"> Auto-save
64
+ </label>
65
+ </div>
66
+ </k-p-collapsible>
67
+
68
+ <h3 id="customIcon"><a href="#customIcon" class="no-link">Custom Icon</a></h3>
69
+ <p>Override the default chevron icon using the <code>icon</code> slot.</p>
70
+
71
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-p-collapsible</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"label"</span>&gt;</span>Advanced Options<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"settings"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>Advanced configuration options with persistent state.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-p-collapsible</span>&gt;</span></code></pre>
72
+
73
+ <k-p-collapsible id="example3" class="mb">
74
+ <span slot="label">Advanced Options</span>
75
+ <k-icon name="settings" slot="icon"></k-icon>
76
+ <p class="p">Advanced configuration options with persistent state.</p>
77
+ </k-p-collapsible>
78
+
79
+ <h2 id="jsRef">JavaScript Reference</h2>
80
+
81
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
82
+ <h6>Extends <a href="./collapsible.html">Collapsible</a></h6>
83
+ <h5>
84
+ <code>new PersistantCollapsible()</code>
85
+ </h5>
86
+ <p>Creates a new PersistantCollapsible instance. The constructor takes no parameters.</p>
87
+
88
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
89
+ <ul>
90
+ <li><a href="./collapsible.html">Collapsible</a></li>
91
+ </ul>
92
+
93
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
94
+ <p>Inherits all properties from <a href="./collapsible.html">Collapsible</a>:</p>
95
+ <h5><code>opened<i>: boolean</i></code></h5>
96
+ <p>Whether the collapsible is opened. This state is automatically persisted to localStorage. Syncs to <code>opened</code> attribute.</p>
97
+ <h5><code>id<i>: string</i></code> <strong>(Required)</strong></h5>
98
+ <p>A unique identifier for the component. This is used as the localStorage key and must be present for persistence to work. Syncs to <code>id</code> attribute.</p>
99
+
100
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
101
+ <p>Inherits all methods from <a href="./collapsible.html">Collapsible</a>:</p>
102
+ <h5><code>open()<i>: void</i></code></h5>
103
+ <p>Opens the collapsible and saves the state to localStorage.</p>
104
+ <h5><code>close()<i>: void</i></code></h5>
105
+ <p>Closes the collapsible and saves the state to localStorage.</p>
106
+ <h5><code>toggle()<i>: void</i></code></h5>
107
+ <p>Toggles the collapsible open or closed and saves the state to localStorage.</p>
108
+
109
+ <h4>Storage Behavior</h4>
110
+ <p>The component automatically:</p>
111
+ <ul>
112
+ <li>Loads its state from localStorage when connected to the DOM</li>
113
+ <li>Saves its state to localStorage whenever the <code>opened</code> property changes</li>
114
+ <li>Synchronizes state across browser tabs using storage events</li>
115
+ <li>Uses the storage key format: <code>PersistantCollapsible-{id}</code></li>
116
+ </ul>
117
+
118
+ </main>
119
+ <div style="height:33vh"></div>
120
+ <script type="module" src="../src/components/Import.js"></script>
121
+ <script type="module" src="../src/components/PersistantCollapsible.js"></script>
122
+ </body>
123
+ </html>
package/docs/components/photo-viewer.html ADDED
@@ -0,0 +1,226 @@
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>PhotoViewer - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
9
+ <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module">
11
+ import ShadowComponent from '../src/components/ShadowComponent.js';
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
15
+ Import.replacements.root = '../';
16
+ Icon.pathToIcons = ['../icons'];
17
+ </script>
18
+ </head>
19
+ <body>
20
+ <k-import src="../nav.inc.html"></k-import>
21
+ <main>
22
+ <h1 class="ta-center">PhotoViewer</h1>
23
+
24
+ <details class="b r mb">
25
+ <summary class="p">Table of Contents</summary>
26
+ <div class="m mt0 pl">
27
+ <h6>Examples</h6>
28
+ <a href="#basicUsage">Basic Usage</a><br />
29
+ <a href="#gallery">Gallery Navigation</a><br />
30
+ <a href="#globalNavigation">Global Navigation</a><br />
31
+ <a href="#customControls">Custom Controls</a><br />
32
+ <a href="#captions">Captions</a><br />
33
+
34
+ <h6 class="mt">JavaScript Reference</h6>
35
+ <a href="#constructor">Constructor</a><br />
36
+ <a href="#requirements">Requirements</a><br />
37
+ <a href="#properties">Properties</a><br />
38
+ <a href="#methods">Methods</a><br />
39
+ <a href="#events">Events</a><br />
40
+ <a href="#slots">Slots</a><br />
41
+ </div>
42
+ </details>
43
+
44
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
45
+ <p>The <code>k-photo-viewer</code> component displays images with fullscreen viewing capabilities. Click on any image to open it in fullscreen mode.</p>
46
+
47
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Honda Civic Type R - Track-focused hot hatch<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
48
+
49
+ <div class="mb" style="max-width: 400px;">
50
+ <k-photo-viewer
51
+ src="../media/civic.jpg"
52
+ alt="Honda Civic Type R"
53
+ >
54
+ <p>Honda Civic Type R - Track-focused hot hatch</p>
55
+ </k-photo-viewer>
56
+ </div>
57
+
58
+ <h3 id="gallery"><a href="#gallery" class="no-link">Gallery Navigation</a></h3>
59
+ <p>When multiple PhotoViewer components are siblings, you can navigate between them using the arrow buttons in fullscreen mode or keyboard arrow keys.</p>
60
+
61
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"gallery"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/civic.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda Civic Type R"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda Civic Type R<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Chevrolet Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
62
+
63
+ <div class="gallery mb" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px;">
64
+ <k-photo-viewer
65
+ src="../media/civic.jpg"
66
+ alt="Honda Civic Type R"
67
+ >
68
+ <h6 class="m0">Honda Civic Type R</h6>
69
+ </k-photo-viewer>
70
+ <k-photo-viewer
71
+ src="../media/corvette.jpg"
72
+ alt="Chevrolet Corvette C8"
73
+ >
74
+ <h6 class="m0">Chevrolet Corvette C8</h6>
75
+ </k-photo-viewer>
76
+ <k-photo-viewer
77
+ src="../media/evo.jpg"
78
+ alt="Mitsubishi Lancer Evolution"
79
+ >
80
+ <h6 class="m0">Mitsubishi Lancer Evolution</h6>
81
+ </k-photo-viewer>
82
+ </div>
83
+
84
+ <h3 id="globalNavigation"><a href="#globalNavigation" class="no-link">Global Navigation</a></h3>
85
+ <p>With the <code>global</code> attribute, PhotoViewers can navigate between all instances on the page, not just siblings.</p>
86
+
87
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/gtr.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Nissan GT-R"</span><br /> <span class="hljs-attr">global</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Nissan GT-R (Global Navigation)<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
88
+
89
+ <div class="mb" style="max-width: 300px;">
90
+ <k-photo-viewer
91
+ src="../media/gtr.jpg"
92
+ alt="Nissan GT-R"
93
+ global
94
+ >
95
+ <h6 class="m0">Nissan GT-R (Global Navigation)</h6>
96
+ <p class="m0 small">This viewer can navigate to all photos on the page</p>
97
+ </k-photo-viewer>
98
+ </div>
99
+
100
+ <h3 id="customControls"><a href="#customControls" class="no-link">Custom Controls</a></h3>
101
+ <p>Customize the fullscreen controls using slots and disable keyboard controls if needed.</p>
102
+
103
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/nsx.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Honda NSX"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Honda NSX<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/evo.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Mitsubishi Lancer Evolution"</span><br /> <span class="hljs-attr">keyboard-controls</span>=<span class="hljs-string">"false"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"close"</span>&gt;</span>✕<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"prev"</span>&gt;</span>◀<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"next"</span>&gt;</span>▶<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Mitsubishi Lancer Evolution<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Custom controls, keyboard disabled<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
104
+
105
+ <div class="mb" style="max-width: 350px;">
106
+ <k-photo-viewer
107
+ src="../media/nsx.jpg"
108
+ alt="Honda NSX"
109
+ keyboard-controls="false"
110
+ >
111
+ <span slot="close">✕</span>
112
+ <span slot="prev">◀</span>
113
+ <span slot="next">▶</span>
114
+ <h6 class="m0">Honda NSX</h6>
115
+ <p class="m0">Custom controls, keyboard disabled</p>
116
+ </k-photo-viewer>
117
+ <k-photo-viewer
118
+ src="../media/evo.jpg"
119
+ alt="Mitsubishi Lancer Evolution"
120
+ keyboard-controls="false"
121
+ >
122
+ <span slot="close">✕</span>
123
+ <span slot="prev">◀</span>
124
+ <span slot="next">▶</span>
125
+ <h6 class="m0">Mitsubishi Lancer Evolution</h6>
126
+ <p class="m0">Custom controls, keyboard disabled</p>
127
+ </k-photo-viewer>
128
+ </div>
129
+
130
+ <h3 id="captions"><a href="#captions" class="no-link">Captions</a></h3>
131
+ <p>Use different captions for thumbnail view and fullscreen view using slots.</p>
132
+
133
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-photo-viewer</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"../media/corvette.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chevrolet Corvette C8"</span><br />&gt;</span><br /> <span class="hljs-comment">&lt;!-- Default caption (thumbnail view) --&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Corvette C8<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br /> <br /> <span class="hljs-comment">&lt;!-- Fullscreen caption --&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"fullscreen-caption"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>2020 Chevrolet Corvette C8 Stingray<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The first mid-engine Corvette featuring a 6.2L V8 engine<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-photo-viewer</span>&gt;</span></code></pre>
134
+
135
+ <div class="mb" style="max-width: 400px;">
136
+ <k-photo-viewer
137
+ src="../media/corvette.jpg"
138
+ alt="Chevrolet Corvette C8"
139
+ >
140
+ <h6 class="m0">Corvette C8</h6>
141
+ <div slot="fullscreen-caption">
142
+ <h4>2020 Chevrolet Corvette C8 Stingray</h4>
143
+ <p>The first mid-engine Corvette featuring a 6.2L V8 engine producing 495 horsepower</p>
144
+ </div>
145
+ </k-photo-viewer>
146
+ </div>
147
+
148
+ <h2 id="jsRef">JavaScript Reference</h2>
149
+
150
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
151
+ <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
152
+ <h5>
153
+ <code>new PhotoViewer()</code>
154
+ </h5>
155
+ <p>Creates a new PhotoViewer instance. Configuration is done through attributes or properties.</p>
156
+
157
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
158
+ <ul>
159
+ <li><a href="./ShadowComponent.html">ShadowComponent</a></li>
160
+ <li><a href="./icon.html">Icon</a></li>
161
+ </ul>
162
+
163
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
164
+ <h5><code>src<i>: string</i></code></h5>
165
+ <p>The URL of the image to display. Syncs with the <code>src</code> attribute.</p>
166
+ <h5><code>alt<i>: string</i></code></h5>
167
+ <p>Alternative text for the image. Syncs with the <code>alt</code> attribute.</p>
168
+ <h5><code>fullscreen<i>: boolean</i></code></h5>
169
+ <p>Whether the photo viewer is currently in fullscreen mode. Syncs with the <code>fullscreen</code> attribute.</p>
170
+ <h5><code>keyboardControls<i>: boolean</i></code></h5>
171
+ <p>Whether keyboard controls are enabled (default: true). When enabled: Enter opens fullscreen, ESC closes, arrow keys navigate. Syncs with the <code>keyboard-controls</code> attribute.</p>
172
+ <h5><code>global<i>: boolean</i></code></h5>
173
+ <p>Whether navigation should include all PhotoViewers on the page (true) or just siblings (false, default). Syncs with the <code>global</code> attribute.</p>
174
+
175
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
176
+ <h5><code>open()<i>: void</i></code></h5>
177
+ <p>Opens the photo viewer in fullscreen mode.</p>
178
+ <h5><code>close()<i>: void</i></code></h5>
179
+ <p>Closes the fullscreen mode.</p>
180
+ <h5><code>toggle()<i>: void</i></code></h5>
181
+ <p>Toggles between fullscreen and normal mode.</p>
182
+
183
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
184
+ <h5><code>fullscreenchange</code></h5>
185
+ <p>Fired when the fullscreen state changes. Event detail contains <code>{ fullscreen: boolean }</code>.</p>
186
+ <h5><code>fullscreen</code></h5>
187
+ <p>Fired when entering fullscreen mode.</p>
188
+ <h5><code>fullscreenclose</code></h5>
189
+ <p>Fired when exiting fullscreen mode.</p>
190
+
191
+ <h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
192
+ <h5><code>default</code></h5>
193
+ <p>Caption content displayed below the thumbnail image.</p>
194
+ <h5><code>fullscreen-caption</code></h5>
195
+ <p>Caption content displayed in fullscreen mode. If not provided, the default slot content is cloned.</p>
196
+ <h5><code>close</code></h5>
197
+ <p>Custom close button content. Defaults to a close icon.</p>
198
+ <h5><code>prev</code></h5>
199
+ <p>Custom previous button content. Defaults to a chevron-left icon.</p>
200
+ <h5><code>next</code></h5>
201
+ <p>Custom next button content. Defaults to a chevron-right icon.</p>
202
+
203
+ <h4>Keyboard Controls</h4>
204
+ <p>When <code>keyboard-controls</code> is enabled (default):</p>
205
+ <ul>
206
+ <li><strong>Enter</strong>: Open fullscreen when focused on thumbnail</li>
207
+ <li><strong>Escape</strong>: Close fullscreen</li>
208
+ <li><strong>Arrow Left</strong>: Navigate to previous photo</li>
209
+ <li><strong>Arrow Right</strong>: Navigate to next photo</li>
210
+ </ul>
211
+
212
+ <h4>Navigation Behavior</h4>
213
+ <p>Navigation between photos works as follows:</p>
214
+ <ul>
215
+ <li><strong>Sibling mode</strong> (default): Navigate only between PhotoViewer components that are direct siblings</li>
216
+ <li><strong>Global mode</strong>: Navigate between all PhotoViewer components on the page</li>
217
+ <li><strong>Wrap-around</strong>: Navigation wraps from last to first photo and vice versa</li>
218
+ <li><strong>Auto-hide</strong>: Navigation buttons are hidden when only one photo is available</li>
219
+ </ul>
220
+
221
+ </main>
222
+ <div style="height:33vh"></div>
223
+ <script type="module" src="../src/components/Import.js"></script>
224
+ <script type="module" src="../src/components/PhotoViewer.js"></script>
225
+ </body>
226
+ </html>
package/docs/components/resize.html CHANGED
@@ -7,8 +7,10 @@
7
7
  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
8
  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
9
  <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
10
11
  import Import from '../src/components/Import.js';
11
12
  import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
12
14
  Import.replacements.root = '../';
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  </script>
@@ -27,9 +29,8 @@
27
29
  <h6 class="mt">JavaScript Reference</h6>
28
30
  <a href="#constructor">Constructor</a><br />
29
31
  <a href="#requirements">Requirements</a><br />
30
- <a href="#attributes">Attributes</a><br />
31
32
  <a href="#properties">Properties</a><br />
32
- <a href="#methods">Methods</a><br />
33
+ <a href="#slots">Slots</a><br />
33
34
  </div>
34
35
  </details>
35
36
 
@@ -77,14 +78,14 @@
77
78
  <div class="row -mx mb">
78
79
  <div class="col d-span-6 m-span-12 px">
79
80
  <k-card label="HTML">
80
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br /> <span class="hljs-attr">dimention</span>=<span class="hljs-string">"width"</span><br />&gt;</span><br /> Resize Width<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
81
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br /> <span class="hljs-attr">dimension</span>=<span class="hljs-string">"width"</span><br />&gt;</span><br /> Resize Width<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
81
82
  </k-card>
82
83
  </div>
83
84
  <div class="col d-span-6 m-span-12 px">
84
85
  <k-card label="Output*" class="pb">
85
86
  <k-resize
86
87
  style="height: 200px; width: 200px;"
87
- dimention="width"
88
+ dimension="width"
88
89
  >
89
90
  <p class="p">
90
91
  Resize Width
@@ -96,14 +97,14 @@
96
97
  <div class="row -mx mb">
97
98
  <div class="col d-span-6 m-span-12 px">
98
99
  <k-card label="HTML">
99
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br /> <span class="hljs-attr">dimention</span>=<span class="hljs-string">"height"</span><br />&gt;</span><br /> Resize Height<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
100
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-resize</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px; width: 200px;"</span><br /> <span class="hljs-attr">dimension</span>=<span class="hljs-string">"height"</span><br />&gt;</span><br /> Resize Height<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-resize</span>&gt;</span></code></pre>
100
101
  </k-card>
101
102
  </div>
102
103
  <div class="col d-span-6 m-span-12 px">
103
104
  <k-card label="Output*" class="pb">
104
105
  <k-resize
105
106
  style="height: 200px; width: 200px;"
106
- dimention="height"
107
+ dimension="height"
107
108
  >
108
109
  <p class="p">
109
110
  Resize Height
@@ -120,29 +121,54 @@
120
121
  <h2 id="jsRef">JavaScript Reference</h2>
121
122
 
122
123
  <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
123
- <h6>Extends <a href="./component.html">Component</a></h6>
124
+ <h6>Extends <a href="./ShadowComponent.html">ShadowComponent</a></h6>
124
125
  <h5>
125
126
  <code>new Resize()</code>
126
127
  </h5>
127
128
 
128
129
  <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
129
130
  <ul>
130
- <li><a href="./component.html">Component</a></li>
131
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
132
+ <li><a href="../utils/drag.js">drag Utility Function</a></li>
131
133
  </ul>
132
134
 
133
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
134
- <h5><code>resizing<i>: string</i></code></h5>
135
- <p>Indicates which handle is currently being used to resize the element.</p>
136
- <h5><code>dimention<i>: string</i></code></h5>
137
- <p>Specifies which dimension to resize. Can be <code>"width"</code> or <code>"height"</code>.</p>
138
-
139
135
  <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
140
136
  <h5><code>resizing<i>: string</i></code></h5>
141
- <p>Indicates which handle is currently being used to resize the element.</p>
137
+ <p>Indicates which handle is currently being used to resize the element. Values can be <code>"side"</code>, <code>"bottom"</code>, <code>"corner"</code>, or empty string. Syncs with the <code>resizing</code> attribute.</p>
138
+ <h5><code>dimension<i>: string</i></code></h5>
139
+ <p>Restricts resizing to a specific dimension. Possible values are <code>"width"</code> (horizontal only) or <code>"height"</code> (vertical only). If not specified, both dimensions can be resized. Syncs with the <code>dimension</code> attribute.</p>
140
+
141
+ <h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
142
+ <h5><code>default</code></h5>
143
+ <p>The main content area that will be resizable. Content automatically gets scroll behavior when it overflows the container.</p>
144
+
145
+ <h4>Resize Handles</h4>
146
+ <p>The resize component provides three types of handles:</p>
147
+ <ul>
148
+ <li><strong>Side Handle</strong>: Allows horizontal resizing (width adjustment)</li>
149
+ <li><strong>Bottom Handle</strong>: Allows vertical resizing (height adjustment)</li>
150
+ <li><strong>Corner Handle</strong>: Allows diagonal resizing (both width and height)</li>
151
+ </ul>
142
152
 
143
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
144
- <h5><code>render(force)<i>: Promise</i></code></h5>
145
- <p>Renders the component. If <code>force</code> is <code>true</code>, the component will be re-rendered even if it has already been rendered.</p>
153
+ <h4>CSS Custom Properties</h4>
154
+ <p>The component respects the following CSS custom properties:</p>
155
+ <ul>
156
+ <li><code>--handle_size</code>: Size of the resize handles (default: 1rem)</li>
157
+ <li><code>--c_border</code>: Border color of the container</li>
158
+ <li><code>--c_highlight</code>: Background color of active handles during resize</li>
159
+ <li><code>--radius</code>: Border radius of the container</li>
160
+ </ul>
161
+
162
+ <h4>Touch and Mouse Support</h4>
163
+ <p>The component supports both mouse and touch interactions for resizing on desktop and mobile devices.</p>
164
+
165
+ <h4>Behavior Notes</h4>
166
+ <ul>
167
+ <li>During resize operations, pointer events on the main content are disabled to prevent interference</li>
168
+ <li>The component enforces minimum dimensions of 10rem × 10rem and maximum dimensions of 100%</li>
169
+ <li>Active resize handles are highlighted with the theme's highlight color</li>
170
+ <li>Content automatically scrolls when it exceeds the container dimensions</li>
171
+ </ul>
146
172
 
147
173
  </main>
148
174
  <div style="height:33vh"></div>
package/docs/components/show-more.html CHANGED
@@ -7,8 +7,10 @@
7
7
  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
8
  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
9
  <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
10
11
  import Import from '../src/components/Import.js';
11
12
  import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
12
14
  Import.replacements.root = '../';
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  </script>
@@ -28,8 +30,8 @@
28
30
  <h6 class="mt">JavaScript Reference</h6>
29
31
  <a href="#constructor">Constructor</a><br />
30
32
  <a href="#requirements">Requirements</a><br />
31
- <a href="#attributes">Attributes</a><br />
32
33
  <a href="#properties">Properties</a><br />
34
+ <a href="#cssCustomProperties">CSS Custom Properties</a><br />
33
35
  <a href="#methods">Methods</a><br />
34
36
  </div>
35
37
  </details>
@@ -91,20 +93,24 @@
91
93
  <h2 id="jsRef">JavaScript Reference</h2>
92
94
 
93
95
  <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
94
- <h6>Extends <a href="./component.html">LazyComponent</a></h6>
96
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
95
97
  <h5>
96
98
  <code>new ShowMore()</code>
97
99
  </h5>
98
100
 
99
101
  <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
100
102
  <ul>
101
- <li><a href="./component.html">Component</a></li>
102
- <li><a href="./lazy-component.html">LazyComponent</a></li>
103
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
104
+ <li><a href="./icon.html">Icon</a></li>
103
105
  </ul>
104
106
 
105
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
107
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
106
108
  <h5><code>opened<i>: boolean</i></code></h5>
107
- <p>Whether the content is expanded.</p>
109
+ <p>Whether the content is expanded. Syncs to <code>opened</code> attribute.</p>
110
+
111
+ <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
112
+ <h5><code>--closed_height</code></h5>
113
+ <p>The height of the content when in the collapsed state. Default is <code>7rem</code>.</p>
108
114
 
109
115
  <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
110
116
  <h5><code>more()<i>: void</i></code></h5>
package/docs/components/side-menu.html CHANGED
@@ -30,7 +30,6 @@
30
30
  <h6 class="mt">JavaScript Reference</h6>
31
31
  <a href="#constructor">Constructor</a><br />
32
32
  <a href="#requirements">Requirements</a><br />
33
- <a href="#attributes">Attributes</a><br />
34
33
  <a href="#properties">Properties</a><br />
35
34
  <a href="#events">Events</a><br />
36
35
  <a href="#methods">Methods</a><br />
@@ -126,21 +125,13 @@
126
125
  <li><a href="./focuscapture.html">FocusCapture</a></li>
127
126
  </ul>
128
127
 
129
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
130
- <h5><code>opened<i>: boolean</i></code></h5>
131
- <p>Whether the side menu is opened.</p>
132
- <h5><code>overlay-close<i>: string</i></code></h5>
133
- <p>Whether clicking the overlay closes the side menu. Accepts "true" or "false" as string values. Defaults to "true".</p>
134
- <h5><code>side<i>: string</i></code></h5>
135
- <p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to "left".</p>
136
-
137
128
  <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
138
129
  <h5><code>opened<i>: boolean</i></code></h5>
139
- <p>Whether the side menu is opened. Defaults to <code>false</code>.</p>
130
+ <p>Whether the side menu is opened. Defaults to <code>false</code>. Syncs to <code>opened</code> attribute.</p>
140
131
  <h5><code>overlayClose<i>: boolean</i></code></h5>
141
- <p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code>.</p>
132
+ <p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code>. Syncs to <code>overlay-close</code> attribute.</p>
142
133
  <h5><code>side<i>: string</i></code></h5>
143
- <p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>.</p>
134
+ <p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>. Syncs to <code>side</code> attribute.</p>
144
135
 
145
136
  <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
146
137
  <h5><code>open</code></h5>