kempo-ui 0.1.5 → 0.2.1

package/.github/skills/highlight-code/SKILL.md

@@ -11,32 +11,48 @@ Use this skill whenever you need syntax-highlighted HTML to embed in a documenta
 
 ## Usage
 
+Pipe code via stdin (supports multi-line):
 ```powershell
-node bin/highlight_code.js <lang> <code>
+@"
+<div class='container'>
+  <h1>Hello</h1>
+</div>
+"@ | npx kempo-highlightcode <lang>
+```
+
+Or pass minified code as an argument:
+```powershell
+npx kempo-highlightcode <lang> "<div class='container'><h1>Hello</h1></div>"
 ```
 
 **Supported languages:** `html`, `css`, `js` / `javascript`, `ts` / `typescript`, `json`, `md` / `markdown`, `sh` / `bash`, `xml`
 
 ## Output
 
-Prints the inner highlighted content (hljs spans, no `<pre><code>` wrapper) to stdout, with `<br>` tags instead of newlines — a single line suitable for embedding in HTML.
+Prints a complete `<pre><code class="hljs {lang}">…</code></pre>` block to stdout, with `<br>` tags instead of newlines — a single line suitable for embedding directly in HTML.
 
 Input is automatically beautified before highlighting, so you can pass minified code.
 
 ## Workflow for Updating Doc Code Samples
 
-Run the script with minified code as a single argument, capture to `$hl`, then use PowerShell's `.Replace()` to patch the HTML file:
+Pipe the code into the script, capture to `$hl`, then use PowerShell's `.Replace()` to patch the HTML file:
 
 ```powershell
-$hl = node bin/highlight_code.js xml "<k-table id=myExample></k-table><script type=module>doSomething('foo');</script>"
+$hl = @"
+<k-table id=myExample></k-table>
+<script type=module>
+  doSomething('foo');
+</script>
+"@ | npx kempo-highlightcode xml
 $html = [System.IO.File]::ReadAllText((Resolve-Path 'docs/components/my-component.html'))
 $old = [regex]::Match($html, '(?s)<pre><code class="hljs xml">.*?</code></pre>').Value
-[System.IO.File]::WriteAllText((Resolve-Path 'docs/components/my-component.html'), $html.Replace($old, "<pre><code class=`"hljs xml`">$hl</code></pre>"))
+[System.IO.File]::WriteAllText((Resolve-Path 'docs/components/my-component.html'), $html.Replace($old, $hl))
 ```
 
 ## Important Notes
 
-- Use **outer double-quotes** for the PowerShell argument string, and **single-quotes** for JS string literals inside. This preserves all quoting correctly through to node.
+- Use PowerShell **here-strings** (`@"…"@`) for multi-line code input via stdin.
+- Use **single-quotes** for JS string literals inside the code. This preserves all quoting correctly through to node.
 - HTML attribute values should be **unquoted** in the argument (`id=foo` not `id="foo"`) — the beautifier adds consistent formatting anyway.
 - Use `[System.IO.File]::ReadAllText` / `WriteAllText` + `.Replace()` (not `-replace`) to avoid regex interpretation of the replacement string.
 - If a page has multiple `<pre><code>` blocks, adjust the regex to match the specific one (e.g. match by a nearby unique string, or loop with an index).

package/.github/skills/new-component/SKILL.md

@@ -13,13 +13,14 @@ Use this skill any time you are asked to create a new component or add a new cus
 
 ## Overview
 
-Creating a component involves five steps:
+Creating a component involves six steps:
 
 1. **Choose the base component** — pick the right rendering strategy
 2. **Write the source file** in `src/components/`
 3. **Register the custom element** at the bottom of the source file
 4. **Add documentation** in `docs/components/`
 5. **Write and run unit tests** in `tests/components/`
+6. **Update `llm.txt.md`** — add a row to the Components table
 
 ---
 
@@ -152,15 +153,42 @@ customElements.define('k-my-component', MyComponent);
 
 ---
 
-## Step 3: Register in the Nav and Index (if it should appear in docs)
+## Step 3: Register in the Nav, Search, and Index (if it should appear in docs)
 
-Add a link to the component in `docs/nav.inc.html` inside the `<menu>` under the appropriate section, in alphabetical order:
+There are **two** nav include files that must both be updated:
+
+- `docs/nav.inc.html` — used on the homepage (paths start with `./`)
+- `docs/nav-1.inc.html` — used on sub-pages (paths start with `../`)
+
+In **each** file, add the component in **three** places, all in alphabetical order:
+
+### 1. Search dropdown filter item
+
+Inside the `<k-filter-list id="navSearchList">`, add a `<k-filter-item>` in alphabetical order among the other component entries:
 
 ```html
+<!-- nav.inc.html (homepage) -->
+<k-filter-item filter-keywords="my component mycomponent components"><a href="./components/my-component.html">My Component<br><small>Component</small></a></k-filter-item>
+
+<!-- nav-1.inc.html (sub-pages) -->
+<k-filter-item filter-keywords="my component mycomponent components"><a href="../components/my-component.html">My Component<br><small>Component</small></a></k-filter-item>
+```
+
+### 2. Sidebar menu link
+
+Inside the `<menu>` under the `Components` `<div>`, add an `<a>` tag in alphabetical order:
+
+```html
+<!-- nav.inc.html -->
 <a href="./components/my-component.html">My Component</a>
+
+<!-- nav-1.inc.html -->
+<a href="../components/my-component.html">My Component</a>
 ```
 
-Also add a card in `docs/index.html` inside the `<div class="row -mx">` under the `<h2>Components</h2>` section, in alphabetical order:
+### 3. Homepage card
+
+Add a card in `docs/index.html` inside the `<div class="row -mx">` under the `<h2>Components</h2>` section, in alphabetical order:
 
 ```html
 <div class="span-12 t-span-6 d-span-4 px">
@@ -266,3 +294,39 @@ The partial string `MyComponent` will match any test file whose path contains th
   - Prefer `el.closest('k-parent')?.doSomething()` over dispatching an event and listening for it.
 - Child components should locate their parent via `closest('k-parent-element')` and call its methods directly.
 - Avoid `window` globals and global custom events for coordination. Scope events to the relevant element; reserve `window` events for global, non-visual concerns (e.g. settings changes).
+
+---
+
+## Elevation (Z-Index)
+
+Any component using `position: fixed` must follow the kempo-css elevation system where `z-index = level × 10`.
+
+| Level | z-index | Kempo UI Components | Notes |
+|-------|---------|---------------------|-------|
+| 2 | 20 | (page default) | No z-index needed for flow-position components |
+| 3 | 30 | Aside (push) | Fixed panels that sit **below** a fixed navbar |
+| 5 | 50 | *(navbar — user-defined)* | Reserved buffer for user-defined navbars |
+| 6 | 60 | Aside (overlay) | Overlay drawers that sit **above** a fixed navbar |
+| 7 | 70 | Dropdown | Floating menus; above navbar and overlay|
+| 8 | 80 | Dialog, PhotoViewer | Full-screen modals and lightboxes |
+| 9 | 90 | Toast | Notification toasts; always topmost |
+
+Levels 1, 4 are intentional buffer zones for user customization.
+
+When deciding a new component's elevation:
+- If it is a panel or drawer in `push` mode (shifts page content), use level 3.
+- If it is a panel or drawer in `overlay` mode (floats over content), use level 6.
+- If it covers the entire viewport (modal/dialog), use level 8.
+- If it is a temporary notification, use level 9.
+
+---
+
+## Step 6: Update `llm.txt.md`
+
+Add a row for the new component to the **Components** table in `llm.txt.md` at the root of the repository. Keep the table in alphabetical order by element name.
+
+```markdown
+| `<k-my-component>` | `MyComponent.js` | One-sentence description | [my-component.html](https://dustinpoissant.github.io/kempo-ui/components/my-component.html) |
+```
+
+If the component registers multiple elements (e.g. a parent + child pair), list all element names in the first column separated by spaces.

package/AGENTS.md

@@ -6,6 +6,13 @@
  - All components should be in the `src/components/` directory.
  - All utility function module files should be in the `src/utils/` directory.
  - All documnentation should be in the `docs/` directory. This directory is used by GitHub as the "GitHub Pages", so all links need to be relative, and there will be a build script which copies all code to the `docs/` directory.
+ - `llm.txt.md` in the root is the consumer-facing LLM reference for this library. **Keep it up to date**: when adding a new component or utility, add a row to the relevant table in `llm.txt.md`.
+ 
+## Dependencies
+
+ - [Kempo-CSS](https://raw.githubusercontent.com/dustinpoissant/kempo-css/refs/heads/main/llms.txt) - Injected into the shadow root of all components extending ShadowCompoentn or Hybrid Component. Do not assume bootstrap styles, some may be similar, but these are not compatible with bootstrap, read the docs.
+ - [Kempo-TestingFramework](https://raw.githubusercontent.com/dustinpoissant/kempo-testing-framework/refs/heads/main/llm.txt) - Used to create and run tests inside the `tests` directory. Do not assume you know the syntax, read the docs.
+ - [Kempo-Server](https://raw.githubusercontent.com/dustinpoissant/kempo-server/refs/heads/main/llm.txt) - A node server with file-based routing and robust configution options, this is used to run the docs servers.
 
 ## Coding Style Guidelines
 
@@ -103,3 +110,7 @@ Do not prefix identifiers with underscores.
 - **DO NOT** create one-off test files or framework-less tests
 - Test components in their natural documentation environment
 - Validate both functionality and visual appearance
+- **ALL tests must pass — ZERO failures are acceptable.** If a test fails after a change, fix it immediately. There are no "pre-existing failures" in this project.
+
+### Building
+The docs should be running using `npm run dev` which serves the html files in the docs, but reroutes all requests to `docs/src` to use `src` so we do not need to build or "watch" files to build, if you save a file, just refresh the docs page. Same for icons, the server reroutes `docs/icons` to `icons` so we dont need to watch or build after adding an icon.

package/bin/highlight_code.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { highlight } from '../tools/highlight.js';
+import hljs from 'highlight.js';
 import beautify from 'js-beautify';
 
 const LANG_ALIASES = {
@@ -28,6 +28,7 @@ const args = process.argv.slice(2);
 
 if(args.length < 1){
   console.error('Usage: node bin/highlight_code.js <lang> <code>');
+  console.error('       echo "<code>" | node bin/highlight_code.js <lang>');
   process.exit(1);
 }
 
@@ -40,21 +41,12 @@ if(!lang){
   process.exit(1);
 }
 
-const beautifyCode = (code) => {
-  const fns = { javascript: beautify.js, css: beautify.css, html: beautify.html, xml: beautify.html };
-  const fn = fns[lang] || beautify.js;
-  return fn(code, BEAUTIFY_OPTIONS);
-};
+const beautifyFns = { javascript: beautify.js, css: beautify.css, html: beautify.html, xml: beautify.html };
 
-const run = (code) => {
-  const formatted = beautifyCode(code);
-  const full = highlight(formatted, lang);
-  process.stdout.write(
-    full
-      .replace(/^<pre><code class="hljs [^"]*">/, '')
-      .replace(/<\/code><\/pre>\n?$/, '')
-      .replace(/\n/g, '<br>') + '\n'
-  );
+const run = code => {
+  const formatted = (beautifyFns[lang] || beautify.js)(code, BEAUTIFY_OPTIONS);
+  const highlighted = hljs.highlight(formatted, { language: lang }).value;
+  process.stdout.write(`<pre><code class="hljs ${lang}">${highlighted.replace(/\n/g, '<br>')}</code></pre>\n`);
 };
 
 if(rest.length > 0){

package/dist/components/Aside.js

@@ -0,0 +1,326 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class Aside extends ShadowComponent{static properties={state:{type:String,reflect:!0},side:{type:String,reflect:!0},main:{type:String,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:boolTrueFalse}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("state")){const t=e.get("state");"offscreen"===this.state||"offscreen"!==t&&void 0!==t?"offscreen"===this.state&&void 0!==t&&"offscreen"!==t&&document.removeEventListener("keydown",this.handleKeyDown):document.addEventListener("keydown",this.handleKeyDown),"overlay"===this.main&&("expanded"===this.state?document.body.classList.add("no-scroll"):document.body.classList.remove("no-scroll"));const s="offscreen"===this.state?0:this.getTargetWidth(this.state),a={aside:this,state:this.state,main:this.main,width:s};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:a})),this.inert="offscreen"===this.state}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.body.classList.remove("no-scroll");const e={aside:this,state:"offscreen",main:this.main,width:0};this.dispatchEvent(new CustomEvent("aside_state_change",{detail:e})),window.dispatchEvent(new CustomEvent("aside_state_change",{detail:e}))}expand=()=>this.state="expanded";collapse=()=>this.state="collapsed";hide=()=>this.state="offscreen";toggle=()=>{this.state="expanded"===this.state?"offscreen":"expanded"};getTargetWidth(e){const t=parseFloat(getComputedStyle(document.documentElement).fontSize),s="collapsed"===e?"--collapsed-width":"--width",a=getComputedStyle(this).getPropertyValue(s).trim();return(a?parseFloat(a):"collapsed"===e?3.5:20)*t}render(){const e=html`<aside><slot></slot></aside>`;return"overlay"===this.main?html`
+				<k-focus-capture>
+					<div id="container">
+						<button id="overlay-btn" @click=${this.overlayClick}>
+							<div id="overlay-x"><k-icon name="close"></k-icon></div>
+						</button>
+						${e}
+					</div>
+				</k-focus-capture>
+			`:e}static styles=css`
+		:host {
+			--bg: var(--c_bg);
+			--border: var(--c_border);
+			--width: 20rem;
+			--collapsed-width: 3.5rem;
+			position: fixed;
+			top: 0;
+			height: 100vh;
+			pointer-events: none;
+		}
+		:host([main="push"]) {
+			left: 0;
+			z-index: 30;
+			transition: width var(--animation_ms, 256ms);
+		}
+		:host([main="push"][side="right"]) {
+			left: auto;
+			right: 0;
+		}
+		:host([main="push"][state="collapsed"]) {
+			width: var(--collapsed-width);
+			pointer-events: auto;
+		}
+		:host([main="push"][state="expanded"]) {
+			width: var(--width);
+			pointer-events: auto;
+		}
+		:host([main="overlay"]) {
+			left: 0;
+			width: 100vw;
+			max-width: 100%;
+			z-index: 60;
+			overflow: hidden;
+		}
+		:host([main="overlay"][state="expanded"]) {
+			pointer-events: auto;
+		}
+		k-focus-capture {
+			width: 100%;
+			height: 100%;
+		}
+		#container {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+		#overlay-btn {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			background: var(--overlay, rgba(0, 0, 0, 0.5));
+			border: none;
+			padding: 0;
+			cursor: pointer;
+			z-index: 1;
+			opacity: 0;
+			transition: opacity var(--animation_ms, 256ms);
+		}
+		:host([state="expanded"]) #overlay-btn {
+			opacity: 1;
+		}
+		#overlay-x {
+			position: absolute;
+			top: var(--spacer_h);
+			right: var(--spacer_h);
+			font-size: 1.75rem;
+			cursor: pointer;
+			color: var(--tc_light);
+		}
+		:host([overlay-close="false"]) #overlay-x {
+			display: none;
+		}
+		:host([overlay-close="false"]) #overlay-btn {
+			cursor: default;
+		}
+		:host([side="right"]) #overlay-x {
+			right: auto;
+			left: var(--spacer_h);
+		}
+		aside {
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100vh;
+			overflow-y: auto;
+			overflow-x: hidden;
+			background: var(--bg);
+			padding: var(--aside_padding, var(--spacer));
+			z-index: 2;
+			box-sizing: border-box;
+			border-right: 1px solid var(--border);
+			transition: width var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);
+		}
+		:host([side="right"]) aside {
+			left: auto;
+			right: 0;
+			border-right: none;
+			border-left: 1px solid var(--border);
+		}
+		:host([main="push"]) aside {
+			position: absolute;
+			width: var(--width);
+			transform: translateX(-100%);
+		}
+		:host([main="push"][side="right"]) aside {
+			transform: translateX(100%);
+		}
+		:host([main="push"][state="collapsed"]) aside {
+			width: var(--collapsed-width);
+			transform: translateX(0);
+		}
+		:host([main="push"][state="expanded"]) aside {
+			transform: translateX(0);
+		}
+		:host([main="overlay"]) aside {
+			width: var(--width);
+			max-width: calc(100vw - 6rem);
+			border: none;
+			transform: translateX(-100%);
+		}
+		:host([main="overlay"][state="expanded"]) aside {
+			transform: translateX(0);
+		}
+		:host([main="overlay"][side="right"]) aside {
+			transform: translateX(100%);
+		}
+		:host([main="overlay"][side="right"][state="expanded"]) aside {
+			transform: translateX(0);
+		}
+	`}customElements.define("k-aside",Aside);class AsideItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?this.collapsed=!0:"expanded"===t&&(this.collapsed=!1)};handleClick=e=>{this.collapsed&&!this["no-expand"]&&this.aside&&(e.preventDefault(),this.aside.expand())};render(){return html`
+			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}" @click=${this.handleClick}>
+				${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
+				${this.collapsed?nothing:html`<span class="label"><slot></slot></span>`}
+			</a>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		:host([collapsed][hide-when-collapsed]) {
+			display: none;
+		}
+		.item {
+			display: flex;
+			align-items: center;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h);
+			color: var(--tc);
+			text-decoration: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			transition: background var(--animation_ms), color var(--animation_ms);
+			white-space: nowrap;
+		}
+		.item:hover {
+			background: var(--c_bg_hover);
+		}
+		.item.active {
+			color: var(--tc_on_primary);
+		}
+		.item.active:hover {
+			background: var(--c_primary);
+			filter: brightness(1.1);
+		}
+		k-icon {
+			flex-shrink: 0;
+		}
+		.label {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	`}class AsideLabel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0}};constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?this.collapsed=!0:"expanded"===t&&(this.collapsed=!1)};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
+		:host {
+			display: block;
+			margin: var(--spacer_h) 0;
+		}
+		:host([collapsed]) {
+			margin: 0 var(--spacer_h);
+			align-self: stretch;
+		}
+		.label {
+			padding: 0 var(--spacer);
+			font-size: 0.75rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			color: var(--c_text_muted);
+			letter-spacing: 0.05em;
+		}
+		hr {
+			border: none;
+			border-top: 1px solid var(--c_border);
+			margin: var(--spacer_h) var(--spacer);
+		}
+		:host([collapsed]) hr {
+			margin: var(--spacer_h) 0;
+		}
+	`}class AsideMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?(this.collapsed=!0,this.open=!1):"expanded"===t&&(this.collapsed=!1)};toggleMenu=()=>{this.collapsed&&!this["no-expand"]&&this.aside?this.aside.expand():this.collapsed||(this.open=!this.open)};render(){return html`
+			<div class="menu-container">
+				<button class="no-btn menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
+					${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
+					${this.collapsed?nothing:html`<span class="label">${this.label}</span>`}
+					${this.collapsed?nothing:html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
+				</button>
+				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
+					<slot></slot>
+				</div>
+			</div>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		:host([collapsed][hide-when-collapsed]) {
+			display: none;
+		}
+		.menu-header {
+			display: flex !important;
+			align-items: center;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h) !important;
+			color: var(--tc);
+			background: transparent;
+			border: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			width: calc(100% - var(--spacer));
+			cursor: pointer;
+			text-align: left;
+			white-space: nowrap;
+			transition: background var(--animation_ms);
+		}
+		:host([collapsed]) .menu-header {
+			width: auto;
+		}
+		.menu-header:hover {
+			background: var(--c_bg_hover);
+		}
+		k-icon {
+			flex-shrink: 0;
+		}
+		.label {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.chevron {
+			transition: transform var(--animation_ms);
+		}
+		.menu-content {
+			max-height: 0;
+			overflow: hidden;
+			transition: max-height var(--animation_ms);
+			padding-left: calc(var(--spacer_h) * 2);
+		}
+		:host([collapsed]) .menu-content {
+			padding-left: 0;
+		}
+		.menu-content.open {
+			max-height: 500px;
+		}
+		::slotted(*) {
+			margin: 0.25rem 0;
+		}
+	`}class AsideSpacer extends ShadowComponent{render(){return html`<div></div>`}static styles=css`
+		:host {
+			display: block;
+			flex: 1;
+		}
+	`}class AsideToggle extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},direction:{type:String}};constructor(){super(),this.collapsed=!1,this.direction="left"}connectedCallback(){super.connectedCallback(),this.aside=this.closest("k-aside"),this.aside&&(this.collapsed="collapsed"===this.aside.state,this.updateDirection(),this.aside.addEventListener("aside_state_change",this.handleStateChange))}disconnectedCallback(){super.disconnectedCallback(),this.aside&&this.aside.removeEventListener("aside_state_change",this.handleStateChange)}handleStateChange=e=>{const{state:t}=e.detail;"collapsed"===t?this.collapsed=!0:"expanded"===t&&(this.collapsed=!1),this.updateDirection()};handleClick=()=>{this.aside&&(this.aside.state="collapsed"===this.aside.state?"expanded":"collapsed")};updateDirection=()=>{const e="right"===this.aside?.side;this.direction=this.collapsed!==e?"right":"left"};render(){return html`
+			<div id="header">
+				<slot></slot>
+				<button id="toggle" @click=${this.handleClick}>
+					<k-icon name="arrow-line" direction=${this.direction}></k-icon>
+				</button>
+			</div>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		#header {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h);
+			border-bottom: 1px solid var(--c_border);
+			flex-shrink: 0;
+		}
+		::slotted(*) {
+			margin-right: auto;
+			flex: 1;
+			min-width: 0;
+		}
+		:host([collapsed]) ::slotted(*) {
+			display: none;
+		}
+		#toggle {
+			flex-shrink: 0;
+			width: 2rem;
+			height: 2rem;
+			border: none;
+			background: transparent;
+			color: var(--c_text);
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: var(--radius);
+			padding: 0;
+		}
+		#toggle:hover {
+			background: var(--c_bg_hover);
+		}
+	`}customElements.define("k-aside-item",AsideItem),customElements.define("k-aside-label",AsideLabel),customElements.define("k-aside-menu",AsideMenu),customElements.define("k-aside-spacer",AsideSpacer),customElements.define("k-aside-toggle",AsideToggle);

package/dist/components/Dialog.js

@@ -5,7 +5,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			left: 0;
 			width: 100vw;
 			height: 100vh;
-			z-index: 100;
+			z-index: 80;
 			display: none;
 			justify-content: center;
 			align-items: center;

package/dist/components/Dropdown.js

@@ -11,7 +11,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			display: none;
 			position: fixed;
 			position-anchor: --dropdown-trigger;
-			z-index: 1000;
+			z-index: 70;
 			min-width: anchor-size(width);
 			background: var(--c_bg);
 			border: 1px solid var(--c_border);

package/dist/components/Main.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={leftPanelWidth:{type:String,state:!0},rightPanelWidth:{type:String,state:!0}};constructor(){super(),this.leftPanelWidth="0px",this.rightPanelWidth="0px",this.handlePanelChange=this.handlePanelChange.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("side-panel-change",this.handlePanelChange);const t=document.querySelector('k-side-panel:not([side="right"])');t&&(this.leftPanelWidth=t.collapsed?"3.5rem":"16rem");const e=document.querySelector('k-side-panel[side="right"]');e&&(this.rightPanelWidth=e.collapsed?"3.5rem":"16rem")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("side-panel-change",this.handlePanelChange)}handlePanelChange(t){"right"===t.detail.side?this.rightPanelWidth=t.detail.width:this.leftPanelWidth=t.detail.width}render(){return html`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{constructor(){super(),this.widthMap=new Map}connectedCallback(){super.connectedCallback(),window.addEventListener("aside_state_change",this.handleAsideChange),document.querySelectorAll('k-aside[main="push"]').forEach(t=>{if("offscreen"!==t.state){const e=t.getTargetWidth(t.state);e>0&&this.widthMap.set(t,{side:t.side||"left",width:e})}}),this.recalculate()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("aside_state_change",this.handleAsideChange)}handleAsideChange=t=>{const{aside:e,state:a,main:i,width:s}=t.detail;"overlay"===i||"offscreen"===a?this.widthMap.delete(e):this.widthMap.set(e,{side:e.side||"left",width:s}),this.recalculate()};recalculate=()=>{let t=0,e=0;for(const[,{side:a,width:i}]of this.widthMap)"right"===a?e=Math.max(e,i):t=Math.max(t,i);this.style.setProperty("--left-panel-width",`${t}px`),this.style.setProperty("--right-panel-width",`${e}px`)};render(){return html`
 			<main>
 				<slot></slot>
 			</main>
@@ -17,4 +17,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			padding-left: var(--spacer);
 			padding-right: var(--spacer);
 		}
-	`;updated(){super.updated(),this.style.setProperty("--left-panel-width",this.leftPanelWidth),this.style.setProperty("--right-panel-width",this.rightPanelWidth)}}window.customElements.define("k-main",Main);
+	`}window.customElements.define("k-main",Main);

package/dist/components/Nav.js

@@ -0,0 +1,27 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Nav extends ShadowComponent{static properties={fixed:{type:Boolean,reflect:!0}};constructor(){super(),this.fixed=!1}render(){return html`<nav><slot></slot></nav>`}static styles=css`
+    :host {
+      display: block;
+    }
+    :host([fixed]) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 50;
+    }
+    nav {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+    ::slotted(a) {
+      display: inline-block;
+      padding: var(--spacer);
+      text-decoration: none !important;
+    }
+    ::slotted(.link) {
+      display: inline-block;
+      padding: var(--spacer) !important;
+      text-decoration: none !important;
+    }
+  `}customElements.define("k-nav",Nav);

package/dist/components/PhotoViewer.js

@@ -23,7 +23,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			left: 0;
 			right: 0;
 			bottom: 0;
-			z-index: 9999;
+			z-index: 80;
 			background: rgba(0,0,0,0.9);
 			padding: 2rem;
 			display: none;

package/dist/components/ShadowComponent.js

@@ -1 +1 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}
+import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}

package/dist/components/ThemeSelect.js

@@ -5,4 +5,8 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 				<option value="dark">Dark</option>
 				<option value="auto">System Default</option>
 			</select>
-		`}static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-select",ThemeSelect);
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-select",ThemeSelect);

package/dist/components/ThemeSwitcher.js

@@ -19,5 +19,6 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		}
 		button.no-btn {
 			padding: var(--padding);
+			border-radius: var(--radius);
 		}
 	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-switcher",ThemeSwitcher);