npm - kempo-ui - Versions diffs - 0.1.6 → 0.2.2 - Mend

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

package/.github/skills/highlight-code/SKILL.md +22 -6
package/.github/skills/new-component/SKILL.md +68 -4
package/AGENTS.md +11 -0
package/bin/highlight_code.js +7 -15
package/dist/components/Aside.js +326 -0
package/dist/components/Dialog.js +1 -1
package/dist/components/Dropdown.js +1 -1
package/dist/components/Main.js +2 -2
package/dist/components/Nav.js +27 -0
package/dist/components/PhotoViewer.js +1 -1
package/dist/components/ShadowComponent.js +1 -1
package/dist/components/ThemeSwitcher.js +1 -0
package/dist/components/Toast.js +1 -1
package/docs/components/accordion.html +4 -3
package/docs/components/aside-items.html +43 -0
package/docs/components/aside-menu.html +43 -0
package/docs/components/aside-push.html +26 -0
package/docs/components/aside.html +567 -0
package/docs/components/card.html +4 -3
package/docs/components/color-picker.html +4 -3
package/docs/components/content-slider.html +4 -3
package/docs/components/dialog.html +4 -3
package/docs/components/dropdown.html +4 -3
package/docs/components/filter-list.html +4 -3
package/docs/components/focus-capture.html +6 -5
package/docs/components/html-editor.html +5 -4
package/docs/components/hybrid-component.html +5 -4
package/docs/components/icon.html +4 -3
package/docs/components/import.html +5 -4
package/docs/components/light-component.html +4 -3
package/docs/components/nav.html +117 -0
package/docs/components/photo-viewer.html +5 -4
package/docs/components/resize.html +5 -4
package/docs/components/shadow-component.html +4 -3
package/docs/components/show-more.html +5 -4
package/docs/components/sortable.html +4 -3
package/docs/components/spinner.html +4 -3
package/docs/components/split.html +5 -4
package/docs/components/table.html +4 -3
package/docs/components/tableControls.html +4 -3
package/docs/components/tableCustomFields.html +4 -3
package/docs/components/tableFetchRecords.html +5 -4
package/docs/components/tableFieldSortHide.html +5 -4
package/docs/components/tablePagination.html +4 -3
package/docs/components/tableRecordEditing.html +4 -3
package/docs/components/tableRecordFiltering.html +5 -4
package/docs/components/tableRecordHiding.html +4 -3
package/docs/components/tableRecordSearching.html +5 -4
package/docs/components/tableRecordSelection.html +4 -3
package/docs/components/tableRowControls.html +4 -3
package/docs/components/tableServerSync.html +5 -4
package/docs/components/tableSorting.html +5 -4
package/docs/components/tabs.html +4 -3
package/docs/components/tags.html +4 -3
package/docs/components/theme-select.html +4 -3
package/docs/components/theme-switcher.html +5 -4
package/docs/components/timestamp.html +4 -3
package/docs/components/toast.html +4 -3
package/docs/components/toggle.html +5 -4
package/docs/components/tree.html +5 -4
package/docs/index.html +22 -21
package/docs/nav-1.inc.html +18 -12
package/docs/nav.inc.html +20 -13
package/docs/nav.inc.js +1 -1
package/docs/src/components/Aside.js +326 -0
package/docs/src/components/Dialog.js +1 -1
package/docs/src/components/Dropdown.js +1 -1
package/docs/src/components/Main.js +2 -2
package/docs/src/components/Nav.js +27 -0
package/docs/src/components/PhotoViewer.js +1 -1
package/docs/src/components/ShadowComponent.js +1 -1
package/docs/src/components/ThemeSwitcher.js +1 -0
package/docs/src/components/Toast.js +1 -1
package/docs/utils/context.html +4 -3
package/docs/utils/cookie.html +4 -3
package/docs/utils/debounce.html +4 -3
package/docs/utils/drag.html +4 -3
package/docs/utils/elevation.html +156 -0
package/docs/utils/formatTimestamp.html +4 -3
package/docs/utils/object.html +4 -3
package/docs/utils/propConverters.html +4 -3
package/docs/utils/string.html +4 -3
package/docs/utils/theme.html +4 -3
package/docs/utils/toTitleCase.html +4 -3
package/docs/utils/type.html +4 -3
package/docs/utils/wait.html +4 -3
package/llm.txt +247 -0
package/package.json +3 -4
package/src/components/Aside.js +726 -0
package/src/components/Dialog.js +1 -1
package/src/components/Dropdown.js +1 -1
package/src/components/Main.js +34 -30
package/src/components/Nav.js +53 -0
package/src/components/PhotoViewer.js +1 -1
package/src/components/ShadowComponent.js +1 -1
package/src/components/ThemeSwitcher.js +1 -0
package/src/components/Toast.js +1 -1
package/tests/bin/get_icon.node-test.js +26 -0
package/tests/bin/highlight_code.node-test.js +108 -0
package/tests/bin/list_icons.node-test.js +26 -0
package/tests/components/Aside.browser-test.js +778 -0
package/tests/components/Main.browser-test.js +115 -283
package/dist/components/SideMenu.js +0 -97
package/dist/components/SidePanel.js +0 -236
package/docs/components/side-menu.html +0 -189
package/docs/components/side-panel-basic.html +0 -44
package/docs/components/side-panel-dual.html +0 -70
package/docs/components/side-panel-menu.html +0 -50
package/docs/components/side-panel-persistent.html +0 -90
package/docs/components/side-panel-scroll.html +0 -176
package/docs/components/side-panel.html +0 -245
package/docs/src/components/SideMenu.js +0 -97
package/docs/src/components/SidePanel.js +0 -236
package/scripts/update-kempo-css.js +0 -53
package/src/components/SideMenu.js +0 -178
package/src/components/SidePanel.js +0 -513
package/tests/components/SideMenu.browser-test.js +0 -667
package/tests/components/SidePanel.browser-test.js +0 -520
package/tools/highlight.js +0 -51

package/docs/components/color-picker.html CHANGED Viewed

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ColorPicker Component - Kempo UI</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css">
   <link rel="stylesheet" href="../kempo-hljs.css">
   <link rel="icon" href="../manifest.json">
   <script type="module" src="../init-1.js"></script>
@@ -13,7 +13,7 @@
   <k-import src="../nav-1.inc.html"></k-import>
   <nav-component></nav-component>
-  <main>
+  <k-main>
     <h1>ColorPicker Component</h1>
     <p>The ColorPicker component provides a comprehensive color selection interface that supports all modern CSS color
       formats including hex, RGB, HSL, named colors, HWB, Lab, LCH, OKLab, and OKLCH. It features bidirectional color
@@ -564,9 +564,10 @@
       <code>parse()</code>, and <code>toString()</code> methods.
     </p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/ColorPicker.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>

package/docs/components/content-slider.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Content Slider</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -274,9 +274,10 @@
     <h5><code>next</code></h5>
     <p>Custom content for the next button. Defaults to a right chevron icon if not provided.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/ContentSlider.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>

package/docs/components/dialog.html CHANGED Viewed

@@ -7,14 +7,14 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
-  <main>
+  <k-main>
     <h1 class="ta-center">Dialog</h1>
     <k-accordion persistent-id="toc" class="b r mb">
@@ -343,10 +343,11 @@
       <li><code>cancelText</code>: <i>string</i> - Text for the OK button. Default is <code>'Ok'</code>.</li>
     </ul>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Dialog.js"></script>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
   <script>

package/docs/components/dropdown.html CHANGED Viewed

@@ -7,14 +7,14 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
-  <main>
+  <k-main>
     <h1 class="ta-center">Dropdown</h1>
     <k-accordion persistent-id="toc" class="b r mb">
@@ -305,10 +305,11 @@
     <h5><code>--radius</code></h5>
     <p>Controls the border radius of the dropdown menu. Defaults to the global <code>--radius</code> value.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Dropdown.js"></script>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
   <script type="module" src="../src/components/Icon.js"></script>

package/docs/components/filter-list.html CHANGED Viewed

@@ -7,14 +7,14 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
-  <main>
+  <k-main>
     <h1 class="ta-center">Filter List</h1>
     <k-accordion persistent-id="toc" class="b r mb">
@@ -122,10 +122,11 @@
     <h5><code>filter(term<i>: string</i>)<i>: void</i></code></h5>
     <p>Shows or hides each child <code>k-filter-item</code> based on whether its <code>filter-keywords</code> attribute includes <code>term</code> (case-insensitive). Passing an empty string reveals all items.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/FilterList.js"></script>
   <script type="module" src="../src/components/FilterItem.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>

package/docs/components/focus-capture.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">FocusCapture</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -57,7 +57,7 @@
     </div>
     <h3 id="dialogExample"><a href="#dialogExample" class="no-link">Dialog Example</a></h3>
-    <p>FocusCapture is used internally by the <a href="dialog.html">Dialog</a> and <a href="side-menu.html">SideMenu</a> components. You do not need to add it yourself. Open the dialog below and tab through the elements to see how focus is trapped within the dialog.</p>
+    <p>FocusCapture is used internally by the <a href="dialog.html">Dialog</a> and <a href="aside.html">Aside</a> components. You do not need to add it yourself. Open the dialog below and tab through the elements to see how focus is trapped within the dialog.</p>
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
@@ -104,9 +104,10 @@
     <h5><code>render()<i>: TemplateResult</i></code></h5>
     <p>Renders the component with a slot for children and an invisible div with <code>tabindex="0"</code> that captures focus and cycles it back to the beginning.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/FocusCapture.js"></script>
   <script type="module" src="../src/components/Dialog.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>

package/docs/components/html-editor.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">HtmlEditor</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -405,9 +405,10 @@
     <h5><code>mode-changed</code></h5>
     <p>Dispatched when the editing mode changes between 'visual' and 'code'. Event detail: <code>{ mode: String }</code></p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/HtmlEditor.js"></script>
   <script type="module" src="../src/components/Dropdown.js"></script>
   <script type="module" src="../src/components/htmlEditorControls/Bold.js"></script>

package/docs/components/hybrid-component.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">HybridComponent</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -63,7 +63,7 @@
     <ul>
       <li><strong>Dialog:</strong> Shadow DOM for styled dialog chrome (header, footer, overlay), light DOM for user content</li>
       <li><strong>Collapsible:</strong> Shadow DOM for toggle button, light DOM for collapsible content</li>
-      <li><strong>SideMenu:</strong> Shadow DOM for menu structure and styling, light DOM for menu items</li>
+      <li><strong>Aside:</strong> Shadow DOM for menu structure and styling, light DOM for menu items</li>
     </ul>
     <p>Use <a href="./components/shadow-component.html">ShadowComponent</a> instead when you only need shadow DOM.</p>
@@ -105,9 +105,10 @@
     <h5><code>render()<i>: TemplateResult</i></code></h5>
     <p>Override this method to define what should be rendered to the shadow DOM. The default implementation returns <code>html`&lt;slot name="lightRoot"&gt;&lt;/slot&gt;`</code> which displays the light DOM content. When overriding, make sure to include this slot where you want the light DOM content to appear.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
 </body>

package/docs/components/icon.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -16,7 +16,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Icon</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -217,9 +217,10 @@ npx kempo-geticon chevron_left -y</code></pre>
     <h5><code>pathsToIcons<i>: Array</i></code></h5>
     <p>An array of paths to directories containing icons. This is configured via the global <code>window.kempo.pathsToIcons</code> config object. Directories are checked in order — the first match wins.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Icon.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>

package/docs/components/import.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Import</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -71,9 +71,10 @@
     <h5><code>load()<i>: Promise</i></code></h5>
     <p>Loads the HTML snippet from the specified source URL.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>

package/docs/components/light-component.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">LightComponent</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -108,9 +108,10 @@
     <p>Override this method to define what should be rendered to the light DOM. Returns an empty template by default.
       Use Lit's <code>html</code> tagged template literal to return your content.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
 </body>

package/docs/components/nav.html ADDED Viewed

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Nav - Kempo UI</title>
+  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
+  <link rel="manifest" href="../manifest.json" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-hljs.css" />
+  <link rel="stylesheet" href="../styles.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <k-main>
+    <h1>Nav</h1>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <h6>Examples</h6>
+          <a href="#fixedNav">Fixed Navbar</a><br />
+          <a href="#inlineNav">Inline Navbar</a><br />
+          <h6>Reference</h6>
+          <a href="#attributes">Attributes &amp; Properties</a><br />
+          <a href="#slots">Slots</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+    <p>
+      A semantic navigation bar component. When <code>fixed</code> is set, it automatically positions itself at the
+      top of the viewport and applies elevation level 5 (<code>z-index: 50</code>), keeping it above push-mode
+      drawers and below overlay-mode drawers — no manual <code>z-index</code> needed.
+    </p>
+    <p>
+      Content is placed via a default slot. Apply background and other visual styles with kempo-css utility classes
+      directly on the element.
+    </p>
+    <h2 id="fixedNav"><a href="#fixedNav" class="no-link">Fixed Navbar</a></h2>
+    <p>
+      Add the <code>fixed</code> attribute to pin the nav to the top of the viewport. Add a spacer element after it
+      so page content is not hidden beneath it.
+    </p>
+    <k-card class="mb">
+      <k-nav fixed class="bg-primary" style="position:relative;z-index:auto;">
+        <button class="link"><k-icon name="menu"></k-icon></button>
+        <a href="#fixedNav" class="d-if ph" style="align-items:center;">My App</a>
+        <div class="flex"></div>
+        <a href="#fixedNav" class="ph">Account</a>
+      </k-nav>
+    </k-card>
+    <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-nav</span> <span class="hljs-attr">fixed</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bg-primary&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Menu<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>My App<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;flex: 1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;/account&quot;</span>&gt;</span>Account<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 4rem;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+    <h2 id="inlineNav"><a href="#inlineNav" class="no-link">Inline Navbar</a></h2>
+    <p>Without <code>fixed</code>, the nav sits in normal document flow.</p>
+    <k-card class="mb">
+      <k-nav class="bg-primary">
+        <button class="link"><k-icon name="menu"></k-icon></button>
+        <a href="#inlineNav" class="d-if ph" style="align-items:center;">My App</a>
+        <div class="flex"></div>
+        <a href="#inlineNav" class="ph">Account</a>
+      </k-nav>
+    </k-card>
+    <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bg-primary&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Menu<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;/&quot;</span>&gt;</span>My App<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;flex: 1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;/account&quot;</span>&gt;</span>Account<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-nav</span>&gt;</span></code></pre>
+    <h2 id="attributes"><a href="#attributes" class="no-link">Attributes &amp; Properties</a></h2>
+    <table class="mb">
+      <thead>
+        <tr>
+          <th>Attribute / Property</th>
+          <th>Type</th>
+          <th>Default</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>fixed</code></td>
+          <td>Boolean</td>
+          <td><code>false</code></td>
+          <td>
+            Pins the nav to the top of the viewport (<code>position: fixed</code>) and applies
+            <a href="../utils/elevation.html">elevation</a> level 5 (<code>z-index: 50</code>).
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h2 id="slots"><a href="#slots" class="no-link">Slots</a></h2>
+    <table class="mb">
+      <thead>
+        <tr>
+          <th>Slot</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><em>default</em></td>
+          <td>All nav content — buttons, links, dropdowns, etc.</td>
+        </tr>
+      </tbody>
+    </table>
+  </k-main>
+  <script src="../src/components/Nav.js" type="module"></script>
+  <script src="../src/components/Import.js" type="module"></script>
+  <script src="../src/components/Main.js" type="module"></script>
+  <script src="../src/components/Accordion.js" type="module"></script>
+  <script src="../src/components/Card.js" type="module"></script>
+  <script src="../src/components/Icon.js" type="module"></script>
+</body>
+</html>

package/docs/components/photo-viewer.html CHANGED Viewed

@@ -7,14 +7,14 @@
   <link rel="icon" type="image/png" sizes="48x48" href=".../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
-  <main>
+  <k-main>
     <h1 class="ta-center">PhotoViewer</h1>
     <k-accordion persistent-id="toc" class="b r mb">
@@ -259,9 +259,10 @@
       <li><strong>Auto-hide</strong>: Navigation buttons are hidden when only one photo is available</li>
     </ul>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/PhotoViewer.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>

package/docs/components/resize.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Resize</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -169,9 +169,10 @@
       <li>Content automatically scrolls when it exceeds the container dimensions</li>
     </ul>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Resize.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>

package/docs/components/shadow-component.html CHANGED Viewed

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">ShadowComponent</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -93,9 +93,10 @@
     <p>Override this method to react to child changes:</p>
     <pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br />  <span class="hljs-title function_">childrenUpdated</span>() {<br />    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Children changed!'</span>);<br />    <span class="hljs-variable language_">this</span>.validateChildren();<br />  }<br />}</code></pre>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
 </body>

package/docs/components/show-more.html CHANGED Viewed

@@ -7,14 +7,14 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
-  <main>
+  <k-main>
     <h1 class="ta-center">Show More</h1>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
@@ -119,10 +119,11 @@
     <h5><code>toggle()<i>: void</i></code></h5>
     <p>Toggles the content between expanded and collapsed states.</p>
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/ShowMore.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>