kempo-ui 0.1.6 → 0.2.2

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 (119) hide show
  1. package/.github/skills/highlight-code/SKILL.md +22 -6
  2. package/.github/skills/new-component/SKILL.md +68 -4
  3. package/AGENTS.md +11 -0
  4. package/bin/highlight_code.js +7 -15
  5. package/dist/components/Aside.js +326 -0
  6. package/dist/components/Dialog.js +1 -1
  7. package/dist/components/Dropdown.js +1 -1
  8. package/dist/components/Main.js +2 -2
  9. package/dist/components/Nav.js +27 -0
  10. package/dist/components/PhotoViewer.js +1 -1
  11. package/dist/components/ShadowComponent.js +1 -1
  12. package/dist/components/ThemeSwitcher.js +1 -0
  13. package/dist/components/Toast.js +1 -1
  14. package/docs/components/accordion.html +4 -3
  15. package/docs/components/aside-items.html +43 -0
  16. package/docs/components/aside-menu.html +43 -0
  17. package/docs/components/aside-push.html +26 -0
  18. package/docs/components/aside.html +567 -0
  19. package/docs/components/card.html +4 -3
  20. package/docs/components/color-picker.html +4 -3
  21. package/docs/components/content-slider.html +4 -3
  22. package/docs/components/dialog.html +4 -3
  23. package/docs/components/dropdown.html +4 -3
  24. package/docs/components/filter-list.html +4 -3
  25. package/docs/components/focus-capture.html +6 -5
  26. package/docs/components/html-editor.html +5 -4
  27. package/docs/components/hybrid-component.html +5 -4
  28. package/docs/components/icon.html +4 -3
  29. package/docs/components/import.html +5 -4
  30. package/docs/components/light-component.html +4 -3
  31. package/docs/components/nav.html +117 -0
  32. package/docs/components/photo-viewer.html +5 -4
  33. package/docs/components/resize.html +5 -4
  34. package/docs/components/shadow-component.html +4 -3
  35. package/docs/components/show-more.html +5 -4
  36. package/docs/components/sortable.html +4 -3
  37. package/docs/components/spinner.html +4 -3
  38. package/docs/components/split.html +5 -4
  39. package/docs/components/table.html +4 -3
  40. package/docs/components/tableControls.html +4 -3
  41. package/docs/components/tableCustomFields.html +4 -3
  42. package/docs/components/tableFetchRecords.html +5 -4
  43. package/docs/components/tableFieldSortHide.html +5 -4
  44. package/docs/components/tablePagination.html +4 -3
  45. package/docs/components/tableRecordEditing.html +4 -3
  46. package/docs/components/tableRecordFiltering.html +5 -4
  47. package/docs/components/tableRecordHiding.html +4 -3
  48. package/docs/components/tableRecordSearching.html +5 -4
  49. package/docs/components/tableRecordSelection.html +4 -3
  50. package/docs/components/tableRowControls.html +4 -3
  51. package/docs/components/tableServerSync.html +5 -4
  52. package/docs/components/tableSorting.html +5 -4
  53. package/docs/components/tabs.html +4 -3
  54. package/docs/components/tags.html +4 -3
  55. package/docs/components/theme-select.html +4 -3
  56. package/docs/components/theme-switcher.html +5 -4
  57. package/docs/components/timestamp.html +4 -3
  58. package/docs/components/toast.html +4 -3
  59. package/docs/components/toggle.html +5 -4
  60. package/docs/components/tree.html +5 -4
  61. package/docs/index.html +22 -21
  62. package/docs/nav-1.inc.html +18 -12
  63. package/docs/nav.inc.html +20 -13
  64. package/docs/nav.inc.js +1 -1
  65. package/docs/src/components/Aside.js +326 -0
  66. package/docs/src/components/Dialog.js +1 -1
  67. package/docs/src/components/Dropdown.js +1 -1
  68. package/docs/src/components/Main.js +2 -2
  69. package/docs/src/components/Nav.js +27 -0
  70. package/docs/src/components/PhotoViewer.js +1 -1
  71. package/docs/src/components/ShadowComponent.js +1 -1
  72. package/docs/src/components/ThemeSwitcher.js +1 -0
  73. package/docs/src/components/Toast.js +1 -1
  74. package/docs/utils/context.html +4 -3
  75. package/docs/utils/cookie.html +4 -3
  76. package/docs/utils/debounce.html +4 -3
  77. package/docs/utils/drag.html +4 -3
  78. package/docs/utils/elevation.html +156 -0
  79. package/docs/utils/formatTimestamp.html +4 -3
  80. package/docs/utils/object.html +4 -3
  81. package/docs/utils/propConverters.html +4 -3
  82. package/docs/utils/string.html +4 -3
  83. package/docs/utils/theme.html +4 -3
  84. package/docs/utils/toTitleCase.html +4 -3
  85. package/docs/utils/type.html +4 -3
  86. package/docs/utils/wait.html +4 -3
  87. package/llm.txt +247 -0
  88. package/package.json +3 -4
  89. package/src/components/Aside.js +726 -0
  90. package/src/components/Dialog.js +1 -1
  91. package/src/components/Dropdown.js +1 -1
  92. package/src/components/Main.js +34 -30
  93. package/src/components/Nav.js +53 -0
  94. package/src/components/PhotoViewer.js +1 -1
  95. package/src/components/ShadowComponent.js +1 -1
  96. package/src/components/ThemeSwitcher.js +1 -0
  97. package/src/components/Toast.js +1 -1
  98. package/tests/bin/get_icon.node-test.js +26 -0
  99. package/tests/bin/highlight_code.node-test.js +108 -0
  100. package/tests/bin/list_icons.node-test.js +26 -0
  101. package/tests/components/Aside.browser-test.js +778 -0
  102. package/tests/components/Main.browser-test.js +115 -283
  103. package/dist/components/SideMenu.js +0 -97
  104. package/dist/components/SidePanel.js +0 -236
  105. package/docs/components/side-menu.html +0 -189
  106. package/docs/components/side-panel-basic.html +0 -44
  107. package/docs/components/side-panel-dual.html +0 -70
  108. package/docs/components/side-panel-menu.html +0 -50
  109. package/docs/components/side-panel-persistent.html +0 -90
  110. package/docs/components/side-panel-scroll.html +0 -176
  111. package/docs/components/side-panel.html +0 -245
  112. package/docs/src/components/SideMenu.js +0 -97
  113. package/docs/src/components/SidePanel.js +0 -236
  114. package/scripts/update-kempo-css.js +0 -53
  115. package/src/components/SideMenu.js +0 -178
  116. package/src/components/SidePanel.js +0 -513
  117. package/tests/components/SideMenu.browser-test.js +0 -667
  118. package/tests/components/SidePanel.browser-test.js +0 -520
  119. package/tools/highlight.js +0 -51
package/docs/components/side-panel-persistent.html DELETED
@@ -1,90 +0,0 @@
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>SidePanel Persistent State Example</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" />
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
9
- <script>window.litDisableBundleWarning = true;</script>
10
- <script type="module">
11
- import theme from '../src/utils/theme.js';
12
- theme.init();
13
- </script>
14
- <script type="module" src="../src/components/SidePanel.js"></script>
15
- <script type="module" src="../src/components/Main.js"></script>
16
- <style>
17
- body {
18
- margin: 0;
19
- padding: 0;
20
- }
21
- </style>
22
- </head>
23
- <body>
24
- <k-side-panel persistent-id="demo-panel">
25
- <h3 slot="logo" class="m0">My App</h3>
26
- <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
27
- <k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
28
- <k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
29
- <k-side-panel-label>Projects</k-side-panel-label>
30
- <k-side-panel-item icon="folder" href="#">Website Redesign</k-side-panel-item>
31
- <k-side-panel-item icon="folder" href="#">Mobile App</k-side-panel-item>
32
- <k-side-panel-spacer></k-side-panel-spacer>
33
- <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
34
- <k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
35
- </k-side-panel>
36
-
37
- <k-main>
38
- <h1>Persistent State Demo</h1>
39
- <p>This side panel has <code>persistent-id="demo-panel"</code> set, which means it saves its collapsed/expanded state to localStorage.</p>
40
-
41
- <h2>Try It Out</h2>
42
- <ol>
43
- <li>Click the toggle arrow to collapse or expand the side panel</li>
44
- <li>Refresh the page (or this iframe)</li>
45
- <li>Notice the panel returns to the same state you left it in</li>
46
- </ol>
47
-
48
- <h2>How It Works</h2>
49
- <p>When you set the <code>persistent-id</code> attribute, the component:</p>
50
- <ul>
51
- <li>Saves the collapsed state to <code>localStorage</code> whenever it changes</li>
52
- <li>Restores the saved state when the component mounts</li>
53
- <li>Uses the key format: <code>side-panel-persistent-id-{persistentId}</code></li>
54
- </ul>
55
-
56
- <p>This is useful for preserving user preferences across sessions, making your application feel more responsive and personalized.</p>
57
-
58
- <div style="margin-top: 2rem; padding: 1rem; background: var(--c_bg__alt); border-radius: var(--radius);">
59
- <h3>Technical Details</h3>
60
- <p><strong>LocalStorage Key:</strong> <code>side-panel-persistent-id-demo-panel</code></p>
61
- <p><strong>Stored Value:</strong> <code id="stored-value">Loading...</code></p>
62
- <button onclick="clearStorage()" class="btn">Clear Stored State</button>
63
- </div>
64
- </k-main>
65
-
66
- <script>
67
- function updateStoredValue() {
68
- const value = localStorage.getItem('side-panel-persistent-id-demo-panel');
69
- document.getElementById('stored-value').textContent = value || 'null (not set)';
70
- }
71
-
72
- function clearStorage() {
73
- localStorage.removeItem('side-panel-persistent-id-demo-panel');
74
- updateStoredValue();
75
- window.location.reload();
76
- }
77
-
78
- // Update on load
79
- updateStoredValue();
80
-
81
- // Update when storage changes
82
- window.addEventListener('storage', updateStoredValue);
83
-
84
- // Update when panel changes
85
- window.addEventListener('side-panel-change', () => {
86
- setTimeout(updateStoredValue, 100);
87
- });
88
- </script>
89
- </body>
90
- </html>
package/docs/components/side-panel-scroll.html DELETED
@@ -1,176 +0,0 @@
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>SidePanel Scroll Example</title>
7
- <link rel="stylesheet" href="../kempo-vars.css" />
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
9
- <script>window.litDisableBundleWarning = true;</script>
10
- <script type="module">
11
- import theme from '../src/utils/theme.js';
12
- theme.init();
13
- </script>
14
- <script type="module" src="../src/components/SidePanel.js"></script>
15
- <script type="module" src="../src/components/Main.js"></script>
16
- <style>
17
- body {
18
- margin: 0;
19
- padding: 0;
20
- }
21
- </style>
22
- </head>
23
- <body>
24
- <k-side-panel>
25
- <h5 slot="logo" class="m0">Application</h5>
26
-
27
- <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
28
- <k-side-panel-item href="#">Analytics</k-side-panel-item>
29
- <k-side-panel-item href="#">Reports</k-side-panel-item>
30
-
31
- <k-side-panel-label>Communication</k-side-panel-label>
32
- <k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
33
- <k-side-panel-item href="#">Messages</k-side-panel-item>
34
- <k-side-panel-item href="#">Notifications</k-side-panel-item>
35
-
36
- <k-side-panel-label>Projects</k-side-panel-label>
37
- <k-side-panel-menu icon="folder" label="Active Projects">
38
- <k-side-panel-item href="#">Website Redesign</k-side-panel-item>
39
- <k-side-panel-item href="#">Mobile App</k-side-panel-item>
40
- <k-side-panel-item href="#">API Integration</k-side-panel-item>
41
- <k-side-panel-item href="#">Documentation</k-side-panel-item>
42
- </k-side-panel-menu>
43
- <k-side-panel-menu icon="folder" label="Archived Projects">
44
- <k-side-panel-item href="#">Old Website</k-side-panel-item>
45
- <k-side-panel-item href="#">Legacy System</k-side-panel-item>
46
- <k-side-panel-item href="#">Beta App</k-side-panel-item>
47
- </k-side-panel-menu>
48
- <k-side-panel-item icon="add" href="#">New Project</k-side-panel-item>
49
-
50
- <k-side-panel-label>Tasks</k-side-panel-label>
51
- <k-side-panel-item icon="check" href="#">My Tasks</k-side-panel-item>
52
- <k-side-panel-item href="#">Assigned to Me</k-side-panel-item>
53
- <k-side-panel-item href="#">Due Today</k-side-panel-item>
54
- <k-side-panel-item href="#">This Week</k-side-panel-item>
55
-
56
- <k-side-panel-label>Team</k-side-panel-label>
57
- <k-side-panel-menu label="Team Members">
58
- <k-side-panel-item href="#">Development</k-side-panel-item>
59
- <k-side-panel-item href="#">Design</k-side-panel-item>
60
- <k-side-panel-item href="#">Marketing</k-side-panel-item>
61
- <k-side-panel-item href="#">Sales</k-side-panel-item>
62
- </k-side-panel-menu>
63
- <k-side-panel-item href="#">All Teams</k-side-panel-item>
64
-
65
- <k-side-panel-label>Examples</k-side-panel-label>
66
- <k-side-panel-item href="#">Item without icon</k-side-panel-item>
67
- <k-side-panel-menu label="Menu without icon">
68
- <k-side-panel-item href="#">Sub-item 1</k-side-panel-item>
69
- <k-side-panel-item href="#">Sub-item 2</k-side-panel-item>
70
- </k-side-panel-menu>
71
-
72
- <k-side-panel-item icon="lock" href="#" no-expand>No Auto-Expand</k-side-panel-item>
73
- <k-side-panel-menu icon="settings" label="Config (no expand)" no-expand>
74
- <k-side-panel-item href="#">Option 1</k-side-panel-item>
75
- <k-side-panel-item href="#">Option 2</k-side-panel-item>
76
- </k-side-panel-menu>
77
-
78
- <k-side-panel-label>Resources</k-side-panel-label>
79
- <k-side-panel-item icon="folder" href="#">Documents</k-side-panel-item>
80
- <k-side-panel-item icon="image" href="#">Media Files</k-side-panel-item>
81
- <k-side-panel-item icon="link" href="#">Links</k-side-panel-item>
82
- <k-side-panel-item href="#">Bookmarks</k-side-panel-item>
83
-
84
- <k-side-panel-label>Tools</k-side-panel-label>
85
- <k-side-panel-item icon="edit" href="#">Editor</k-side-panel-item>
86
- <k-side-panel-item icon="code" href="#">Code Review</k-side-panel-item>
87
- <k-side-panel-item href="#">Bug Tracker</k-side-panel-item>
88
- <k-side-panel-item href="#">Terminal</k-side-panel-item>
89
-
90
- <k-side-panel-spacer></k-side-panel-spacer>
91
-
92
- <k-side-panel-item icon="help" href="#">Help & Support</k-side-panel-item>
93
- <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
94
- <k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
95
- </k-side-panel>
96
-
97
- <k-main>
98
- <h1>Independent Scrolling Demo</h1>
99
- <p>This example demonstrates that the SidePanel and main content area scroll independently. Try scrolling in the sidebar and notice how it doesn't affect the main content area, and vice versa.</p>
100
-
101
- <h2>Section 1: Introduction</h2>
102
- <p>The SidePanel component uses <code>overflow-y: auto</code> on its content area, making it scrollable independently from the page. This is essential for applications with lots of navigation options or when you want the navigation to remain accessible while scrolling through long content.</p>
103
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
104
-
105
- <h2>Section 2: Features</h2>
106
- <p>The sidebar includes many different types of navigation items:</p>
107
- <ul>
108
- <li>Simple navigation items with icons</li>
109
- <li>Labels to organize sections</li>
110
- <li>Expandable menus with sub-items</li>
111
- <li>Spacers to push items to the bottom</li>
112
- <li>Active state indicators</li>
113
- </ul>
114
- <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
115
-
116
- <h2>Section 3: Benefits</h2>
117
- <p>Independent scrolling provides several benefits:</p>
118
- <ol>
119
- <li><strong>Improved Navigation:</strong> Users can always access any navigation item without losing their place in the content</li>
120
- <li><strong>Better UX:</strong> Natural scrolling behavior that users expect from modern applications</li>
121
- <li><strong>Space Efficiency:</strong> You can have extensive navigation without cluttering the viewport</li>
122
- <li><strong>Flexible Layout:</strong> Works with both short and long content areas</li>
123
- </ol>
124
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
125
-
126
- <h2>Section 4: Implementation Details</h2>
127
- <p>The SidePanel uses the following CSS properties to achieve independent scrolling:</p>
128
- <pre><code>#content {
129
- height: calc(100% - 3rem);
130
- overflow-y: auto;
131
- overflow-x: hidden;
132
- display: flex;
133
- flex-direction: column;
134
- }</code></pre>
135
- <p>This ensures that the panel's content area takes up all available height minus the header, and enables vertical scrolling when needed.</p>
136
-
137
- <h2>Section 5: Responsive Behavior</h2>
138
- <p>The SidePanel can be collapsed to save space while keeping all navigation accessible. When collapsed, only icons are shown, and the panel takes up minimal width. Try clicking the toggle button in the header to see this in action.</p>
139
- <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
140
-
141
- <h2>Section 6: Customization</h2>
142
- <p>The SidePanel supports extensive customization through CSS variables:</p>
143
- <ul>
144
- <li><code>--bg</code>: Background color of the panel</li>
145
- <li><code>--width-expanded</code>: Width when expanded (default: 16rem)</li>
146
- <li><code>--width-collapsed</code>: Width when collapsed (default: 3.5rem)</li>
147
- <li><code>--transition-duration</code>: Animation duration for expand/collapse</li>
148
- </ul>
149
- <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
150
-
151
- <h2>Section 7: Accessibility</h2>
152
- <p>The SidePanel includes proper ARIA labels and keyboard navigation support. The toggle button has descriptive aria-labels that change based on the panel's state ("Expand panel" or "Collapse panel").</p>
153
- <p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
154
-
155
- <h2>Section 8: Integration</h2>
156
- <p>The SidePanel works seamlessly with the <code>&lt;k-main&gt;</code> component, which automatically adjusts its margins when the panel expands or collapses. This creates a smooth, coordinated experience.</p>
157
- <p>The components communicate through custom events dispatched on the window object, making them loosely coupled but highly coordinated.</p>
158
- <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus.</p>
159
-
160
- <h2>Section 9: Performance</h2>
161
- <p>The SidePanel is built with Lit and uses Shadow DOM for style encapsulation. This ensures excellent performance even with many navigation items, and prevents style conflicts with the rest of your application.</p>
162
- <p>Transitions are hardware-accelerated using CSS transforms and opacity changes, providing smooth animations even on lower-end devices.</p>
163
- <p>Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
164
-
165
- <h2>Section 10: Conclusion</h2>
166
- <p>The SidePanel component provides a robust, flexible navigation solution with independent scrolling, smooth animations, and excellent accessibility. It's perfect for applications that need persistent navigation with many options.</p>
167
- <p>Try scrolling both the sidebar and this main content area to experience the independent scrolling behavior. Notice how smooth and natural it feels, and how you can always access any navigation item while browsing through the content.</p>
168
- <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
169
-
170
- <div style="margin-top: 4rem; padding: 2rem; background: var(--c_bg__alt); border-radius: var(--radius);">
171
- <h3>End of Content</h3>
172
- <p>You've reached the bottom of the page! Now try scrolling in the sidebar to see all the navigation options.</p>
173
- </div>
174
- </k-main>
175
- </body>
176
- </html>
package/docs/components/side-panel.html DELETED
@@ -1,245 +0,0 @@
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>SidePanel - Components - Kempo Docs - A Web Components Solution</title>
7
- <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
- <link rel="manifest" href="../manifest.json" />
9
- <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
11
- <link rel="stylesheet" href="../kempo-hljs.css" />
12
- <link rel="stylesheet" href="../styles.css" />
13
- <script>window.litDisableBundleWarning = true;</script>
14
- </head>
15
- <body>
16
- <k-import src="../nav-1.inc.html"></k-import>
17
- <h1 class="ta-center">SidePanel</h1>
18
- <main>
19
- <k-accordion persistent-id="toc" class="b r mb">
20
- <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
21
- <k-accordion-panel name="toc-panel">
22
- <div class="m ">
23
- <h6>Examples</h6>
24
- <a href="#basicUsage">Basic Usage</a><br />
25
- <a href="#withMenu">With Menu</a><br />
26
- <a href="#independentScrolling">Independent Scrolling</a><br />
27
- <a href="#collapsedDefault">Collapsed by Default</a><br />
28
- <a href="#persistent">Persistent State</a><br />
29
- <a href="#rightSidePanel">Right Side Panel</a><br />
30
- <a href="#dualPanels">Dual Side Panels</a><br />
31
- <a href="#customStyling">Custom Styling</a><br />
32
-
33
- <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
34
- <a href="#constructor">Constructor</a><br />
35
- <a href="#mainComponent">Main Component</a><br />
36
- <a href="#requirements">Requirements</a><br />
37
- <a href="#properties">Properties</a><br />
38
- <a href="#events">Events</a><br />
39
- <a href="#methods">Methods</a><br />
40
- <a href="#cssVariables">CSS Variables</a><br />
41
- </div>
42
- </k-accordion-panel>
43
- </k-accordion>
44
-
45
- <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
46
- <p>The Side Panel is a persistent navigation panel with sub-components for items, labels, menus, and spacing.</p>
47
- <p>Use the <code>&lt;k-main&gt;</code> component alongside the side panel to automatically adjust content margins when the panel expands or collapses. The Main component wraps a standard <code>&lt;main&gt;</code> element with auto-centering and listens for panel state changes via window events.</p>
48
- <div class="row -mx">
49
- <div class="col m-span-12 px">
50
- <k-card label="HTML">
51
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/SidePanel.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/Main.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"logo"</span>&gt;</span>Kempo<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cards"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">active</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"check"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Tasks<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"label"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-label</span>&gt;</span>Projects<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-label</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"folder"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Figma Design<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"folder"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Static Mania<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-spacer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-spacer</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"settings"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"account-circle"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Profile<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Main Content<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Content automatically adjusts when panel opens/closes.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
52
- </k-card>
53
- </div>
54
- <div class="col m-span-12 px">
55
- <k-card label="Output">
56
- <iframe src="./side-panel-basic.html" style="width: 100%; height: 600px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
57
- </k-card>
58
- </div>
59
- </div>
60
-
61
- <h3 id="withMenu"><a href="#withMenu" class="no-link">With Menu</a></h3>
62
- <p>Use <code>k-side-panel-menu</code> for expandable menu items.</p>
63
- <div class="row -mx">
64
- <div class="col m-span-12 px">
65
- <k-card label="HTML">
66
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cards"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-menu</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"folder"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Projects"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Website Redesign<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Mobile App<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-menu</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span></code></pre>
67
- </k-card>
68
- </div>
69
- <div class="col m-span-12 px">
70
- <k-card label="Output">
71
- <iframe src="./side-panel-menu.html" style="width: 100%; height: 400px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
72
- </k-card>
73
- </div>
74
- </div>
75
-
76
- <h3 id="independentScrolling"><a href="#independentScrolling" class="no-link">Independent Scrolling</a></h3>
77
- <p>The SidePanel scrolls independently from the main content area, allowing users to navigate extensive menus without losing their place in the content.</p>
78
- <div class="row -mx">
79
- <div class="col m-span-12 px">
80
- <k-card label="Output">
81
- <iframe src="./side-panel-scroll.html" style="width: 100%; height: 600px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
82
- </k-card>
83
- </div>
84
- </div>
85
-
86
- <h3 id="persistent"><a href="#persistent" class="no-link">Persistent State</a></h3>
87
- <p>Use the <code>persistent-id</code> attribute to save the panel's collapsed/expanded state to localStorage. When the page is refreshed, the panel will remember its previous state.</p>
88
- <div class="row -mx">
89
- <div class="col m-span-12 px">
90
- <k-card label="HTML">
91
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">"main-nav"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"logo"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0"</span>&gt;</span>My App<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cards"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">active</span>&gt;</span>Dashboard<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"check"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Tasks<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"settings"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span></code></pre>
92
- </k-card>
93
- </div>
94
- <div class="col m-span-12 px">
95
- <k-card label="Output">
96
- <p class="info-box">Try collapsing/expanding the panel, then refresh this page. The panel will remember its state!</p>
97
- <iframe src="./side-panel-persistent.html" style="width: 100%; height: 400px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
98
- </k-card>
99
- </div>
100
- </div>
101
-
102
- <h3 id="rightSidePanel"><a href="#rightSidePanel" class="no-link">Right Side Panel</a></h3>
103
- <p>Set the <code>side</code> attribute to <code>"right"</code> to position the panel on the right side of the page.</p>
104
- <div class="row -mx">
105
- <div class="col m-span-12 px">
106
- <k-card label="HTML">
107
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span> <span class="hljs-attr">side</span>=<span class="hljs-string">"right"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"logo"</span>&gt;</span>Tools<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"notification"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Notifications<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"chat"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Messages<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br /> <span class="hljs-comment">&lt;!-- Content --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
108
- </k-card>
109
- </div>
110
- </div>
111
-
112
- <h3 id="dualPanels"><a href="#dualPanels" class="no-link">Dual Side Panels</a></h3>
113
- <p>You can have two side panels on a page simultaneously - one on the left and one on the right. The <code>&lt;k-main&gt;</code> component will automatically adjust margins for both panels.</p>
114
- <div class="row -mx">
115
- <div class="col m-span-12 px">
116
- <k-card label="HTML">
117
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span>&gt;</span><br /> <span class="hljs-comment">&lt;!-- Left panel content --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span> <span class="hljs-attr">side</span>=<span class="hljs-string">"right"</span>&gt;</span><br /> <span class="hljs-comment">&lt;!-- Right panel content --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br /> <span class="hljs-comment">&lt;!-- Content centered between both panels --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
118
- </k-card>
119
- </div>
120
- </div>
121
- <div class="row -mx">
122
- <div class="col span-12 px">
123
- <k-card label="Output">
124
- <iframe src="./side-panel-dual.html" style="width: 100%; height: 600px; border: 1px solid var(--c_border); border-radius: var(--radius);"></iframe>
125
- </k-card>
126
- </div>
127
- </div>
128
-
129
- <h2 id="jsRef">JavaScript Reference</h2>
130
-
131
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
132
- <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
133
- <h5>
134
- <code>new SidePanel()</code>
135
- </h5>
136
-
137
- <h3 id="mainComponent"><a href="#mainComponent" class="no-link">Main Component</a></h3>
138
- <p>The <code>&lt;k-main&gt;</code> component is designed to work with <code>&lt;k-side-panel&gt;</code>. It automatically adjusts its left or right margin based on the panel's state (expanded/collapsed) and side (left/right).</p>
139
-
140
- <h4>How It Works</h4>
141
- <ul>
142
- <li>Listens for <code>side-panel-change</code> events on <code>window</code></li>
143
- <li>Automatically detects existing panels on mount</li>
144
- <li>Adjusts margin with smooth transitions</li>
145
- <li>Provides standard <code>&lt;main&gt;</code> centering and max-width behavior</li>
146
- <li>Works with both left and right side panels</li>
147
- <li>Supports dual panels (one on each side) simultaneously</li>
148
- </ul>
149
-
150
- <h4>Usage</h4>
151
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-panel</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">k-side-panel</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-main</span>&gt;</span><br /> <span class="hljs-comment">&lt;!-- Your content here --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-main</span>&gt;</span></code></pre>
152
-
153
- <p>No additional JavaScript or event listeners are required. The components communicate automatically via window events.</p>
154
-
155
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
156
- <ul>
157
- <li><a href="./shadow-component.html">ShadowComponent</a></li>
158
- <li><a href="./icon.html">Icon</a></li>
159
- </ul>
160
-
161
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
162
- <h5><code>collapsed<i>: boolean</i></code></h5>
163
- <p>Whether the side panel is collapsed to icon-only view. Defaults to <code>false</code>. Syncs to <code>collapsed</code> attribute.</p>
164
- <h5><code>side<i>: string</i></code></h5>
165
- <p>The side where the panel is positioned. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>. Syncs to <code>side</code> attribute.</p>
166
- <h5><code>persistentId<i>: string</i></code></h5>
167
- <p>A unique identifier for saving the panel's collapsed/expanded state to localStorage. When set, the panel will remember its state across page refreshes. Syncs to <code>persistent-id</code> attribute.</p>
168
-
169
- <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
170
- <h5><code>expand</code></h5>
171
- <p>Dispatched when the side panel is expanded.</p>
172
- <h5><code>collapse</code></h5>
173
- <p>Dispatched when the side panel is collapsed.</p>
174
- <h5><code>change</code></h5>
175
- <p>Dispatched when the side panel state changes. Event detail contains "expand" or "collapse".</p>
176
- <h5><code>toggle</code></h5>
177
- <p>Dispatched when the toggle method is called.</p>
178
-
179
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
180
- <h5><code>expand()<i>: void</i></code></h5>
181
- <p>Expands the side panel to show labels.</p>
182
- <h5><code>collapse()<i>: void</i></code></h5>
183
- <p>Collapses the side panel to icon-only view.</p>
184
- <h5><code>toggle()<i>: void</i></code></h5>
185
- <p>Toggles the side panel between expanded and collapsed states and dispatches a toggle event.</p>
186
-
187
- <h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
188
- <table>
189
- <thead>
190
- <tr>
191
- <th>Variable</th>
192
- <th>Default</th>
193
- <th>Description</th>
194
- </tr>
195
- </thead>
196
- <tbody>
197
- <tr>
198
- <td><code>--bg</code></td>
199
- <td><code>var(--c_bg)</code></td>
200
- <td>Background color of the panel</td>
201
- </tr>
202
- <tr>
203
- <td><code>--width-expanded</code></td>
204
- <td><code>16rem</code></td>
205
- <td>Width when expanded</td>
206
- </tr>
207
- <tr>
208
- <td><code>--width-collapsed</code></td>
209
- <td><code>3.5rem</code></td>
210
- <td>Width when collapsed</td>
211
- </tr>
212
- <tr>
213
- <td><code>--transition-duration</code></td>
214
- <td><code>var(--animation_ms, 256ms)</code></td>
215
- <td>Animation duration for collapse/expand</td>
216
- </tr>
217
- <tr>
218
- <td><code>--panel-padding</code></td>
219
- <td><code>var(--spacer)</code></td>
220
- <td>Padding inside the panel</td>
221
- </tr>
222
- <tr>
223
- <td><code>--toggle-top</code></td>
224
- <td><code>var(--spacer_h)</code></td>
225
- <td>Top position of toggle button</td>
226
- </tr>
227
- <tr>
228
- <td><code>--toggle-right</code></td>
229
- <td><code>calc(var(--spacer_h) * -1 - 1.5rem)</code></td>
230
- <td>Right position of toggle button (left side panel)</td>
231
- </tr>
232
- <tr>
233
- <td><code>--toggle-left</code></td>
234
- <td><code>calc(var(--spacer_h) * -1 - 1.5rem)</code></td>
235
- <td>Left position of toggle button (right side panel)</td>
236
- </tr>
237
- </tbody>
238
- </table>
239
- </main>
240
- <div style="height:33vh"></div>
241
- <script type="module" src="../src/components/Import.js"></script>
242
- <script type="module" src="../src/components/Accordion.js"></script>
243
- <script type="module" src="../src/components/Card.js"></script>
244
- </body>
245
- </html>
package/docs/src/components/SideMenu.js DELETED
@@ -1,97 +0,0 @@
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},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse},side:{type:String,reflect:!0}};constructor(){super(),this.opened=!1,this.overlayClose=!0,this.escClose=!0,this.side="left"}overlayClick=()=>{this.overlayClose&&this.close()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.close()};updated(e){super.updated(e),e.has("opened")&&(this.opened?(document.body.classList.add("no-scroll"),document.addEventListener("keydown",this.handleKeyDown),this.dispatchEvent(new CustomEvent("change",{detail:"open"})),this.dispatchEvent(new CustomEvent("open"))):(document.body.classList.remove("no-scroll"),document.removeEventListener("keydown",this.handleKeyDown),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
- <k-focus-capture>
3
- <div id="container">
4
- <button id="overlay" @click=${this.overlayClick}>
5
- <div id="overlay-x"><k-icon name="close"></k-icon></div>
6
- </button>
7
- <div id="menu">
8
- <slot></slot>
9
- </div>
10
- </div>
11
- </k-focus-capture>
12
- `}static styles=css`
13
- :host {
14
- --bg: var(--c_bg);
15
- --width: 20rem;
16
-
17
- position: fixed;
18
- top: 0;
19
- left: 0;
20
- width: 100vw;
21
- max-width: 100%;
22
- height: 100vh;
23
- z-index: 100;
24
- pointer-events: none;
25
- }
26
- :host([opened]) {
27
- pointer-events: auto;
28
- }
29
- k-focus-capture {
30
- width: 100%;
31
- height: 100%;
32
- }
33
- #container {
34
- position: relative;
35
- width: 100%;
36
- height: 100%;
37
- opacity: 0;
38
- transition: opacity var(--animation_ms, 256ms);
39
- }
40
- :host([opened]) #container {
41
- opacity: 1;
42
- }
43
- #overlay {
44
- position: absolute;
45
- width: 100%;
46
- height: 100%;
47
- left: 0;
48
- top: 0;
49
- background: var(--overlay, rgba(0, 0, 0, 0.5));
50
- border: none;
51
- padding: 0;
52
- cursor: pointer;
53
- z-index: 1;
54
- }
55
- #overlay-x {
56
- position: absolute;
57
- top: var(--spacer_h);
58
- right: var(--spacer_h);
59
- font-size: 1.75rem;
60
- cursor: pointer;
61
- color: var(--tc_light);
62
- }
63
- :host([overlay-close="false"]) #overlay-x {
64
- display: none;
65
- }
66
- :host([overlay-close="false"]) #overlay {
67
- cursor: default;
68
- }
69
- #menu {
70
- position: absolute;
71
- width: var(--width);
72
- max-width: calc(100vw - 6rem);
73
- height: 100vh;
74
- overflow-y: auto;
75
- left: calc(var(--width) * -1);
76
- top: 0;
77
- background: var(--bg);
78
- transition: left var(--animation_ms, 256ms);
79
- padding: var(--menu_padding, var(--spacer));
80
- z-index: 2;
81
- }
82
- :host([opened]) #menu {
83
- left: 0;
84
- }
85
- :host([side="right"]) #menu {
86
- left: auto;
87
- transition: right var(--animation_ms, 256ms);
88
- right: calc(var(--width) * -1);
89
- }
90
- :host([opened][side="right"]) #menu {
91
- right: 0;
92
- }
93
- :host([side="right"]) #overlay-x {
94
- right: auto;
95
- left: var(--spacer_h);
96
- }
97
- `}window.customElements.define("k-side-menu",SideMenu);