kempo-ui 0.1.0 → 0.1.2

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(t){super.updated(t),t.has("opened")&&(this.opened?openDropdowns.add(this):openDropdowns.delete(this),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=t=>{const e=t.target.closest("k-dropdown"),o=t.target.closest('[slot="trigger"]');if(e&&e!==this&&o)return void(this.opened&&this.close());if(!this.opened)return;if(e!==this)return void(this.closeOnClickOutside&&this.close());if(o)return;t.target.closest("a, button")&&this.closeOnSelect&&this.close()};handleTriggerClick=t=>{t.stopPropagation(),this.opened||openDropdowns.forEach(t=>{t!==this&&t.close()}),this.toggle()};handleMenuClick=t=>{const e=t.target.closest("a, button");if(e&&!e.hasAttribute("disabled")){const t=e.dataset?.value||e.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:t,item:e},bubbles:!0}))}};handleKeydown=t=>{if(this.opened)if("Escape"===t.key)t.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===t.key)t.preventDefault(),this.focusNextItem();else if("ArrowUp"===t.key)t.preventDefault(),this.focusPreviousItem();else if("Enter"===t.key||" "===t.key){const e=this.querySelector("a:focus, button:focus");e&&(t.preventDefault(),e.click())}};open(){return openDropdowns.forEach(t=>{t!==this&&t.close()}),this.opened=!0,requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const t=this.querySelector('[slot="trigger"]');t&&t.focus()}getMenuItems(){return[...this.querySelectorAll("a, button")].filter(t=>!t.hasAttribute("disabled")&&!t.closest('[slot="trigger"]'))}focusFirstItem(){const t=this.getMenuItems();t.length>0&&t[0].focus()}focusNextItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o+1]||t[0];n&&n.focus()}focusPreviousItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o-1]||t[t.length-1];n&&n.focus()}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse},submenu:{type:Boolean,reflect:!0}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0,this.submenu=!1}connectedCallback(){super.connectedCallback(),"K-DROPDOWN"!==this.parentElement?.tagName||this.hasAttribute("slot")||(this.submenu=!0,this.hasAttribute("open-direction")||(this.openDirection="right down")),this.submenu?(this.addEventListener("mouseenter",this.handleSubmenuEnter),this.addEventListener("mouseleave",this.handleSubmenuLeave)):document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.submenu?(this.removeEventListener("mouseenter",this.handleSubmenuEnter),this.removeEventListener("mouseleave",this.handleSubmenuLeave)):document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(e){super.updated(e),e.has("opened")&&(this.submenu||(this.opened?openDropdowns.add(this):openDropdowns.delete(this)),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=e=>{const t=e.target.closest('[slot="trigger"]');if(t){const e=t.closest("k-dropdown");if(e===this)return;if(this.contains(e))return;return void(this.opened&&this.close())}if(!this.opened)return;if(!this.contains(e.target))return void(this.closeOnClickOutside&&this.close());const o=e.target.closest("a, button");o&&!o.closest('[slot="trigger"]')&&this.closeOnSelect&&this.close()};handleTriggerClick=e=>{e.stopPropagation(),this.opened||openDropdowns.forEach(e=>{e!==this&&e.close()}),this.toggle()};handleMenuClick=e=>{const t=e.target.closest("a, button");if(!t||t.hasAttribute("disabled"))return;if(t.closest("k-dropdown")!==this)return;const o=t.dataset?.value||t.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:o,item:t},bubbles:!0}))};handleKeydown=e=>{if(!this.opened)return;const t=document.activeElement;if(!this.contains(t))return;const o=this.querySelector(":scope > k-dropdown[opened]");if(!o?.contains(t))if("Escape"===e.key||this.submenu&&"ArrowLeft"===e.key)e.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===e.key)e.preventDefault(),this.focusNextItem();else if("ArrowUp"===e.key)e.preventDefault(),this.focusPreviousItem();else if("ArrowRight"===e.key){const o=t?.closest("k-dropdown[submenu]");o?.parentElement===this&&(e.preventDefault(),o.open(),o.focusFirstItem())}else if("Enter"===e.key||" "===e.key){const o=t?.closest("k-dropdown[submenu]");o?.parentElement===this?(e.preventDefault(),o.open(),o.focusFirstItem()):t&&!t.closest('[slot="trigger"]')&&(e.preventDefault(),t.click())}};open(){return this.submenu?[...this.parentElement.querySelectorAll(":scope > k-dropdown[opened]")].forEach(e=>{e!==this&&e.close()}):openDropdowns.forEach(e=>{e!==this&&e.close()}),this.opened=!0,this.submenu||requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.querySelectorAll(":scope > k-dropdown[opened]").forEach(e=>e.close()),this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const e=this.querySelector('[slot="trigger"]');e&&e.focus()}getMenuItems(){return[...this.children].reduce((e,t)=>{if(t.matches('[slot="trigger"]')||t.hasAttribute("disabled"))return e;if("K-DROPDOWN"===t.tagName){const o=t.querySelector('[slot="trigger"]');o&&e.push(o)}else t.matches("a, button")&&e.push(t);return e},[])}focusFirstItem(){const e=this.getMenuItems();e.length>0&&e[0].focus()}focusNextItem(){const e=this.getMenuItems(),t=document.activeElement,o=e.indexOf(t),n=e[o+1]||e[0];n&&n.focus()}focusPreviousItem(){const e=this.getMenuItems(),t=document.activeElement,o=e.indexOf(t),n=e[o-1]||e[e.length-1];n&&n.focus()}static styles=css`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -23,6 +23,9 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		:host([opened]) #menu {
 			display: block;
 		}
+		:host([submenu]) #menu {
+			margin: 0;
+		}
 		/* Default: down left */
 		#menu {
 			position-area: bottom span-right;
@@ -115,9 +118,49 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		::slotted(hr) {
 			display: none !important;
 		}
-	`;handleSlotChange=t=>{t.target.assignedElements().filter(t=>t.matches("a, button")).forEach((t,e)=>t.classList.toggle("k-dropdown-first",0===e))};render(){return html`
+		/* Slotted submenu dropdowns */
+		::slotted(k-dropdown) {
+			display: block !important;
+			width: 100% !important;
+			border-top: 1px solid var(--c_border) !important;
+		}
+		::slotted(k-dropdown.k-dropdown-first) {
+			border-top: none !important;
+		}
+		/* Submenu host styles */
+		:host([submenu]) {
+			display: block;
+			position: relative;
+		}
+		:host([submenu]) #trigger {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 1rem;
+			padding: var(--spacer_h) var(--spacer);
+			cursor: pointer;
+			white-space: nowrap;
+			transition: background var(--animation_ms);
+		}
+		:host([submenu]) #trigger:hover,
+		:host([submenu]) #trigger:focus-within {
+			background: var(--c_bg__alt);
+		}
+		:host([submenu]) #trigger ::slotted(button),
+		:host([submenu]) #trigger ::slotted(a) {
+			all: unset !important;
+			cursor: pointer !important;
+			font: inherit !important;
+			color: var(--tc) !important;
+		}
+		:host([submenu]) #trigger k-icon {
+			font-size: 0.75em;
+			opacity: 0.6;
+		}
+	`;handleSubmenuEnter=()=>{clearTimeout(this.closeTimer),this.opened||this.open()};handleSubmenuLeave=()=>{this.closeTimer=setTimeout(()=>this.close(),150)};handleSlotChange=e=>{e.target.assignedElements().filter(e=>e.matches("a, button, k-dropdown")).forEach((e,t)=>e.classList.toggle("k-dropdown-first",0===t))};render(){return html`
 			<div id="trigger" @click=${this.handleTriggerClick}>
 				<slot name="trigger"></slot>
+				${this.submenu?html`<k-icon name="chevron"></k-icon>`:""}
 			</div>
 			<div id="menu" role="menu" @click=${this.handleMenuClick}>
 				<slot @slotchange=${this.handleSlotChange}></slot>

package/docs/components/dropdown.html

@@ -24,6 +24,7 @@
           <h6>Examples</h6>
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#withIcons">With Icons</a><br />
+          <a href="#subMenus">Sub Menus</a><br />
           <a href="#openDirection">Open Direction</a><br />
           <a href="#disabledItems">Disabled Items</a><br />
           <a href="#links">Using Links</a><br />
@@ -88,6 +89,30 @@
       </div>
     </div>
 
+    <h3 id="subMenus"><a href="#subMenus" class="no-link">Sub Menus</a></h3>
+    <p>Nest a <code>k-dropdown</code> inside another <code>k-dropdown</code> to create sub menus. The nested dropdown is automatically detected as a submenu: it opens on hover or focus, displays a chevron icon, and opens to the right by default. Keyboard navigation supports <code>ArrowRight</code> to open and <code>ArrowLeft</code> to close sub menus.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;trigger&quot;</span>&gt;</span>Actions<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;edit&quot;</span>&gt;</span>Edit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;trigger&quot;</span>&gt;</span>Share<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;email&quot;</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;link&quot;</span>&gt;</span>Copy Link<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;delete&quot;</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-dropdown>
+            <button slot="trigger">Actions</button>
+            <button data-value="edit">Edit</button>
+            <k-dropdown>
+              <button slot="trigger">Share</button>
+              <button data-value="email">Email</button>
+              <button data-value="link">Copy Link</button>
+            </k-dropdown>
+            <button data-value="delete">Delete</button>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
     <h3 id="openDirection"><a href="#openDirection" class="no-link">Open Direction</a></h3>
     <p>Control where the menu appears using the <code>open-direction</code> attribute. Specify a direction like <code>down left</code>, <code>up right</code>, <code>left up</code>, etc. The browser automatically handles fallback positioning if the menu would overflow the viewport using CSS Anchor Positioning.</p>
     <div class="row -mx">
@@ -223,7 +248,7 @@
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
       <li><a href="./shadow-component.html">ShadowComponent</a></li>
-      <li><a href="./icon.html">Icon</a> (optional, for icons in items)</li>
+      <li><a href="./icon.html">Icon</a> (required for sub menus)</li>
     </ul>
 
     <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
@@ -239,6 +264,9 @@
     <h5><code>close-on-click-outside<i>: boolean</i></code></h5>
     <p>Whether the dropdown closes when clicking outside of it. Default is <code>true</code>.</p>
 
+    <h5><code>submenu<i>: boolean</i></code></h5>
+    <p>Automatically set to <code>true</code> when a <code>k-dropdown</code> is nested inside another <code>k-dropdown</code>. Sub menus open on hover/focus, display a chevron icon, and default to <code>open-direction="right down"</code>. Supports <code>ArrowRight</code> to open and <code>ArrowLeft</code> to close via keyboard.</p>
+
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>open()<i>: this</i></code></h5>
     <p>Opens the dropdown menu and focuses the first item.</p>
@@ -265,10 +293,12 @@
 
     <h4>Keyboard Navigation</h4>
     <ul>
-      <li><code>Enter</code> / <code>Space</code> - Select the focused item</li>
+      <li><code>Enter</code> / <code>Space</code> - Select the focused item (or open sub menu)</li>
       <li><code>Arrow Down</code> - Move focus to the next item</li>
       <li><code>Arrow Up</code> - Move focus to the previous item</li>
-      <li><code>Escape</code> - Close the dropdown</li>
+      <li><code>Arrow Right</code> - Open focused sub menu</li>
+      <li><code>Arrow Left</code> - Close current sub menu</li>
+      <li><code>Escape</code> - Close the dropdown (or sub menu)</li>
     </ul>
 
     <h3 id="cssVars"><a href="#cssVars" class="no-link">CSS Custom Properties</a></h3>

package/docs/src/components/Dropdown.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(t){super.updated(t),t.has("opened")&&(this.opened?openDropdowns.add(this):openDropdowns.delete(this),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=t=>{const e=t.target.closest("k-dropdown"),o=t.target.closest('[slot="trigger"]');if(e&&e!==this&&o)return void(this.opened&&this.close());if(!this.opened)return;if(e!==this)return void(this.closeOnClickOutside&&this.close());if(o)return;t.target.closest("a, button")&&this.closeOnSelect&&this.close()};handleTriggerClick=t=>{t.stopPropagation(),this.opened||openDropdowns.forEach(t=>{t!==this&&t.close()}),this.toggle()};handleMenuClick=t=>{const e=t.target.closest("a, button");if(e&&!e.hasAttribute("disabled")){const t=e.dataset?.value||e.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:t,item:e},bubbles:!0}))}};handleKeydown=t=>{if(this.opened)if("Escape"===t.key)t.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===t.key)t.preventDefault(),this.focusNextItem();else if("ArrowUp"===t.key)t.preventDefault(),this.focusPreviousItem();else if("Enter"===t.key||" "===t.key){const e=this.querySelector("a:focus, button:focus");e&&(t.preventDefault(),e.click())}};open(){return openDropdowns.forEach(t=>{t!==this&&t.close()}),this.opened=!0,requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const t=this.querySelector('[slot="trigger"]');t&&t.focus()}getMenuItems(){return[...this.querySelectorAll("a, button")].filter(t=>!t.hasAttribute("disabled")&&!t.closest('[slot="trigger"]'))}focusFirstItem(){const t=this.getMenuItems();t.length>0&&t[0].focus()}focusNextItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o+1]||t[0];n&&n.focus()}focusPreviousItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o-1]||t[t.length-1];n&&n.focus()}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse},submenu:{type:Boolean,reflect:!0}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0,this.submenu=!1}connectedCallback(){super.connectedCallback(),"K-DROPDOWN"!==this.parentElement?.tagName||this.hasAttribute("slot")||(this.submenu=!0,this.hasAttribute("open-direction")||(this.openDirection="right down")),this.submenu?(this.addEventListener("mouseenter",this.handleSubmenuEnter),this.addEventListener("mouseleave",this.handleSubmenuLeave)):document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.submenu?(this.removeEventListener("mouseenter",this.handleSubmenuEnter),this.removeEventListener("mouseleave",this.handleSubmenuLeave)):document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(e){super.updated(e),e.has("opened")&&(this.submenu||(this.opened?openDropdowns.add(this):openDropdowns.delete(this)),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=e=>{const t=e.target.closest('[slot="trigger"]');if(t){const e=t.closest("k-dropdown");if(e===this)return;if(this.contains(e))return;return void(this.opened&&this.close())}if(!this.opened)return;if(!this.contains(e.target))return void(this.closeOnClickOutside&&this.close());const o=e.target.closest("a, button");o&&!o.closest('[slot="trigger"]')&&this.closeOnSelect&&this.close()};handleTriggerClick=e=>{e.stopPropagation(),this.opened||openDropdowns.forEach(e=>{e!==this&&e.close()}),this.toggle()};handleMenuClick=e=>{const t=e.target.closest("a, button");if(!t||t.hasAttribute("disabled"))return;if(t.closest("k-dropdown")!==this)return;const o=t.dataset?.value||t.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:o,item:t},bubbles:!0}))};handleKeydown=e=>{if(!this.opened)return;const t=document.activeElement;if(!this.contains(t))return;const o=this.querySelector(":scope > k-dropdown[opened]");if(!o?.contains(t))if("Escape"===e.key||this.submenu&&"ArrowLeft"===e.key)e.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===e.key)e.preventDefault(),this.focusNextItem();else if("ArrowUp"===e.key)e.preventDefault(),this.focusPreviousItem();else if("ArrowRight"===e.key){const o=t?.closest("k-dropdown[submenu]");o?.parentElement===this&&(e.preventDefault(),o.open(),o.focusFirstItem())}else if("Enter"===e.key||" "===e.key){const o=t?.closest("k-dropdown[submenu]");o?.parentElement===this?(e.preventDefault(),o.open(),o.focusFirstItem()):t&&!t.closest('[slot="trigger"]')&&(e.preventDefault(),t.click())}};open(){return this.submenu?[...this.parentElement.querySelectorAll(":scope > k-dropdown[opened]")].forEach(e=>{e!==this&&e.close()}):openDropdowns.forEach(e=>{e!==this&&e.close()}),this.opened=!0,this.submenu||requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.querySelectorAll(":scope > k-dropdown[opened]").forEach(e=>e.close()),this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const e=this.querySelector('[slot="trigger"]');e&&e.focus()}getMenuItems(){return[...this.children].reduce((e,t)=>{if(t.matches('[slot="trigger"]')||t.hasAttribute("disabled"))return e;if("K-DROPDOWN"===t.tagName){const o=t.querySelector('[slot="trigger"]');o&&e.push(o)}else t.matches("a, button")&&e.push(t);return e},[])}focusFirstItem(){const e=this.getMenuItems();e.length>0&&e[0].focus()}focusNextItem(){const e=this.getMenuItems(),t=document.activeElement,o=e.indexOf(t),n=e[o+1]||e[0];n&&n.focus()}focusPreviousItem(){const e=this.getMenuItems(),t=document.activeElement,o=e.indexOf(t),n=e[o-1]||e[e.length-1];n&&n.focus()}static styles=css`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -23,6 +23,9 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		:host([opened]) #menu {
 			display: block;
 		}
+		:host([submenu]) #menu {
+			margin: 0;
+		}
 		/* Default: down left */
 		#menu {
 			position-area: bottom span-right;
@@ -115,9 +118,49 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		::slotted(hr) {
 			display: none !important;
 		}
-	`;handleSlotChange=t=>{t.target.assignedElements().filter(t=>t.matches("a, button")).forEach((t,e)=>t.classList.toggle("k-dropdown-first",0===e))};render(){return html`
+		/* Slotted submenu dropdowns */
+		::slotted(k-dropdown) {
+			display: block !important;
+			width: 100% !important;
+			border-top: 1px solid var(--c_border) !important;
+		}
+		::slotted(k-dropdown.k-dropdown-first) {
+			border-top: none !important;
+		}
+		/* Submenu host styles */
+		:host([submenu]) {
+			display: block;
+			position: relative;
+		}
+		:host([submenu]) #trigger {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 1rem;
+			padding: var(--spacer_h) var(--spacer);
+			cursor: pointer;
+			white-space: nowrap;
+			transition: background var(--animation_ms);
+		}
+		:host([submenu]) #trigger:hover,
+		:host([submenu]) #trigger:focus-within {
+			background: var(--c_bg__alt);
+		}
+		:host([submenu]) #trigger ::slotted(button),
+		:host([submenu]) #trigger ::slotted(a) {
+			all: unset !important;
+			cursor: pointer !important;
+			font: inherit !important;
+			color: var(--tc) !important;
+		}
+		:host([submenu]) #trigger k-icon {
+			font-size: 0.75em;
+			opacity: 0.6;
+		}
+	`;handleSubmenuEnter=()=>{clearTimeout(this.closeTimer),this.opened||this.open()};handleSubmenuLeave=()=>{this.closeTimer=setTimeout(()=>this.close(),150)};handleSlotChange=e=>{e.target.assignedElements().filter(e=>e.matches("a, button, k-dropdown")).forEach((e,t)=>e.classList.toggle("k-dropdown-first",0===t))};render(){return html`
 			<div id="trigger" @click=${this.handleTriggerClick}>
 				<slot name="trigger"></slot>
+				${this.submenu?html`<k-icon name="chevron"></k-icon>`:""}
 			</div>
 			<div id="menu" role="menu" @click=${this.handleMenuClick}>
 				<slot @slotchange=${this.handleSlotChange}></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "highlight.js": "^11.11.1",
     "js-beautify": "^1.15.4",
-    "kempo-server": "^1.8.2",
+    "kempo-server": "^1.10.5",
     "kempo-testing-framework": "^1.4.4",
     "terser": "^5.43.1"
   },

package/src/components/Dropdown.js

@@ -10,7 +10,8 @@ export default class Dropdown extends ShadowComponent {
 		opened: { type: Boolean, reflect: true },
 		openDirection: { type: String, reflect: true, attribute: 'open-direction' },
 		closeOnSelect: { type: Boolean, reflect: true, attribute: 'close-on-select', converter: boolTrueFalse },
-		closeOnClickOutside: { type: Boolean, reflect: true, attribute: 'close-on-click-outside', converter: boolTrueFalse }
+		closeOnClickOutside: { type: Boolean, reflect: true, attribute: 'close-on-click-outside', converter: boolTrueFalse },
+		submenu: { type: Boolean, reflect: true }
 	};
 
 	constructor() {
@@ -19,6 +20,7 @@ export default class Dropdown extends ShadowComponent {
 		this.openDirection = 'down left';
 		this.closeOnSelect = true;
 		this.closeOnClickOutside = true;
+		this.submenu = false;
 	}
 
 	/*
@@ -26,13 +28,27 @@ export default class Dropdown extends ShadowComponent {
 	*/
 	connectedCallback() {
 		super.connectedCallback();
-		document.addEventListener('click', this.handleDocumentClick);
+		if(this.parentElement?.tagName === 'K-DROPDOWN' && !this.hasAttribute('slot')) {
+			this.submenu = true;
+			if(!this.hasAttribute('open-direction')) this.openDirection = 'right down';
+		}
+		if(this.submenu) {
+			this.addEventListener('mouseenter', this.handleSubmenuEnter);
+			this.addEventListener('mouseleave', this.handleSubmenuLeave);
+		} else {
+			document.addEventListener('click', this.handleDocumentClick);
+		}
 		document.addEventListener('keydown', this.handleKeydown);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.removeEventListener('click', this.handleDocumentClick);
+		if(this.submenu) {
+			this.removeEventListener('mouseenter', this.handleSubmenuEnter);
+			this.removeEventListener('mouseleave', this.handleSubmenuLeave);
+		} else {
+			document.removeEventListener('click', this.handleDocumentClick);
+		}
 		document.removeEventListener('keydown', this.handleKeydown);
 		openDropdowns.delete(this);
 	}
@@ -40,10 +56,12 @@ export default class Dropdown extends ShadowComponent {
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if(changedProperties.has('opened')) {
-			if(this.opened) {
-				openDropdowns.add(this);
-			} else {
-				openDropdowns.delete(this);
+			if(!this.submenu) {
+				if(this.opened) {
+					openDropdowns.add(this);
+				} else {
+					openDropdowns.delete(this);
+				}
 			}
 			this.dispatchEvent(new CustomEvent(this.opened ? 'opened' : 'closed', {
 				bubbles: true
@@ -55,11 +73,13 @@ export default class Dropdown extends ShadowComponent {
 		Event Handlers
 	*/
 	handleDocumentClick = e => {
-		const clickedDropdown = e.target.closest('k-dropdown');
 		const isTrigger = e.target.closest('[slot="trigger"]');
 
-		// If clicking another dropdown's trigger, close this one
-		if(clickedDropdown && clickedDropdown !== this && isTrigger) {
+		if(isTrigger) {
+			const triggerDropdown = isTrigger.closest('k-dropdown');
+			if(triggerDropdown === this) return;
+			// Child submenu trigger — don't close
+			if(this.contains(triggerDropdown)) return;
 			if(this.opened) this.close();
 			return;
 		}
@@ -67,17 +87,14 @@ export default class Dropdown extends ShadowComponent {
 		if(!this.opened) return;
 
 		// Click is outside this dropdown entirely
-		if(clickedDropdown !== this) {
+		if(!this.contains(e.target)) {
 			if(this.closeOnClickOutside) this.close();
 			return;
 		}
 
-		// Click is on this dropdown's trigger - let handleTriggerClick handle it
-		if(isTrigger) return;
-
-		// Click is inside the menu on an interactive element
+		// Click is inside the menu on an interactive element (including submenu items)
 		const isInteractive = e.target.closest('a, button');
-		if(isInteractive && this.closeOnSelect) this.close();
+		if(isInteractive && !isInteractive.closest('[slot="trigger"]') && this.closeOnSelect) this.close();
 	};
 
 	handleTriggerClick = e => {
@@ -93,18 +110,25 @@ export default class Dropdown extends ShadowComponent {
 
 	handleMenuClick = e => {
 		const item = e.target.closest('a, button');
-		if(item && !item.hasAttribute('disabled')) {
-			const value = item.dataset?.value || item.textContent.trim();
-			this.dispatchEvent(new CustomEvent('select', {
-				detail: { value, item },
-				bubbles: true
-			}));
-		}
+		if(!item || item.hasAttribute('disabled')) return;
+		// Don't fire select for items inside child submenus
+		if(item.closest('k-dropdown') !== this) return;
+		const value = item.dataset?.value || item.textContent.trim();
+		this.dispatchEvent(new CustomEvent('select', {
+			detail: { value, item },
+			bubbles: true
+		}));
 	};
 
 	handleKeydown = e => {
 		if(!this.opened) return;
-		if(e.key === 'Escape') {
+		const focused = document.activeElement;
+		// Only handle if focus is within our direct scope
+		if(!this.contains(focused)) return;
+		const openChild = this.querySelector(':scope > k-dropdown[opened]');
+		if(openChild?.contains(focused)) return;
+
+		if(e.key === 'Escape' || (this.submenu && e.key === 'ArrowLeft')) {
 			e.preventDefault();
 			this.close();
 			this.focusTrigger();
@@ -114,9 +138,20 @@ export default class Dropdown extends ShadowComponent {
 		} else if(e.key === 'ArrowUp') {
 			e.preventDefault();
 			this.focusPreviousItem();
+		} else if(e.key === 'ArrowRight') {
+			const submenu = focused?.closest('k-dropdown[submenu]');
+			if(submenu?.parentElement === this) {
+				e.preventDefault();
+				submenu.open();
+				submenu.focusFirstItem();
+			}
 		} else if(e.key === 'Enter' || e.key === ' ') {
-			const focused = this.querySelector('a:focus, button:focus');
-			if(focused) {
+			const submenu = focused?.closest('k-dropdown[submenu]');
+			if(submenu?.parentElement === this) {
+				e.preventDefault();
+				submenu.open();
+				submenu.focusFirstItem();
+			} else if(focused && !focused.closest('[slot="trigger"]')) {
 				e.preventDefault();
 				focused.click();
 			}
@@ -127,16 +162,22 @@ export default class Dropdown extends ShadowComponent {
 		Public Methods
 	*/
 	open() {
-		// Close all other dropdowns first
-		openDropdowns.forEach(dropdown => {
-			if(dropdown !== this) dropdown.close();
-		});
+		if(this.submenu) {
+			[...this.parentElement.querySelectorAll(':scope > k-dropdown[opened]')].forEach(sub => {
+				if(sub !== this) sub.close();
+			});
+		} else {
+			openDropdowns.forEach(dropdown => {
+				if(dropdown !== this) dropdown.close();
+			});
+		}
 		this.opened = true;
-		requestAnimationFrame(() => this.focusFirstItem());
+		if(!this.submenu) requestAnimationFrame(() => this.focusFirstItem());
 		return this;
 	}
 
 	close() {
+		this.querySelectorAll(':scope > k-dropdown[opened]').forEach(sub => sub.close());
 		this.opened = false;
 		return this;
 	}
@@ -154,9 +195,16 @@ export default class Dropdown extends ShadowComponent {
 	}
 
 	getMenuItems() {
-		return [...this.querySelectorAll('a, button')].filter(
-			el => !el.hasAttribute('disabled') && !el.closest('[slot="trigger"]')
-		);
+		return [...this.children].reduce((items, child) => {
+			if(child.matches('[slot="trigger"]') || child.hasAttribute('disabled')) return items;
+			if(child.tagName === 'K-DROPDOWN') {
+				const trigger = child.querySelector('[slot="trigger"]');
+				if(trigger) items.push(trigger);
+			} else if(child.matches('a, button')) {
+				items.push(child);
+			}
+			return items;
+		}, []);
 	}
 
 	focusFirstItem() {
@@ -208,6 +256,9 @@ export default class Dropdown extends ShadowComponent {
 		:host([opened]) #menu {
 			display: block;
 		}
+		:host([submenu]) #menu {
+			margin: 0;
+		}
 		/* Default: down left */
 		#menu {
 			position-area: bottom span-right;
@@ -300,14 +351,62 @@ export default class Dropdown extends ShadowComponent {
 		::slotted(hr) {
 			display: none !important;
 		}
+		/* Slotted submenu dropdowns */
+		::slotted(k-dropdown) {
+			display: block !important;
+			width: 100% !important;
+			border-top: 1px solid var(--c_border) !important;
+		}
+		::slotted(k-dropdown.k-dropdown-first) {
+			border-top: none !important;
+		}
+		/* Submenu host styles */
+		:host([submenu]) {
+			display: block;
+			position: relative;
+		}
+		:host([submenu]) #trigger {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 1rem;
+			padding: var(--spacer_h) var(--spacer);
+			cursor: pointer;
+			white-space: nowrap;
+			transition: background var(--animation_ms);
+		}
+		:host([submenu]) #trigger:hover,
+		:host([submenu]) #trigger:focus-within {
+			background: var(--c_bg__alt);
+		}
+		:host([submenu]) #trigger ::slotted(button),
+		:host([submenu]) #trigger ::slotted(a) {
+			all: unset !important;
+			cursor: pointer !important;
+			font: inherit !important;
+			color: var(--tc) !important;
+		}
+		:host([submenu]) #trigger k-icon {
+			font-size: 0.75em;
+			opacity: 0.6;
+		}
 	`;
 
 	/*
 		Slot Change Handler
 	*/
+	handleSubmenuEnter = () => {
+		clearTimeout(this.closeTimer);
+		if(!this.opened) this.open();
+	};
+
+	handleSubmenuLeave = () => {
+		this.closeTimer = setTimeout(() => this.close(), 150);
+	};
+
 	handleSlotChange = e => {
 		const slot = e.target;
-		const items = slot.assignedElements().filter(el => el.matches('a, button'));
+		const items = slot.assignedElements().filter(el => el.matches('a, button, k-dropdown'));
 		items.forEach((item, i) => item.classList.toggle('k-dropdown-first', i === 0));
 	};
 
@@ -318,6 +417,7 @@ export default class Dropdown extends ShadowComponent {
 		return html`
 			<div id="trigger" @click=${this.handleTriggerClick}>
 				<slot name="trigger"></slot>
+				${this.submenu ? html`<k-icon name="chevron"></k-icon>` : ''}
 			</div>
 			<div id="menu" role="menu" @click=${this.handleMenuClick}>
 				<slot @slotchange=${this.handleSlotChange}></slot>