kempo-ui 0.3.11 → 0.3.13

package/dist/components/Aside.js

@@ -1,4 +1,4 @@
-import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"../lit-all.min.js";import{boolTrueFalse as i}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class o extends e{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:i},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:i},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0,this.persistentId=null}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);e&&(this.state=e)}if(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,this.persistentId&&window?.localStorage&&window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`,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=t`<aside><slot></slot></aside>`;return"overlay"===this.main?t`
+import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"../lit-all.min.js";import{boolTrueFalse as i}from"../utils/propConverters.js";import"./Dropdown.js";import"./FocusCapture.js";import"./Icon.js";export default class n extends e{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:i},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:i},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0,this.persistentId=null}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);e&&(this.state=e)}if(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,this.persistentId&&window?.localStorage&&window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`,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=t`<aside><slot></slot></aside>`;return"overlay"===this.main?t`
 				<k-focus-capture>
 					<div id="container">
 						<button id="overlay-btn" @click=${this.overlayClick}>
@@ -121,10 +121,10 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 		}
 		:host([main="push"][state="collapsed"]) aside {
 			width: var(--collapsed-width);
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="push"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="overlay"]) aside {
 			width: var(--width);
@@ -133,15 +133,15 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			transform: translateX(-100%);
 		}
 		:host([main="overlay"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="overlay"][side="right"]) aside {
 			transform: translateX(100%);
 		}
 		:host([main="overlay"][side="right"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
-	`}customElements.define("k-aside",o);class n extends e{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 t`
+	`}customElements.define("k-aside",n);class o extends e{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.inMenu=!!this.closest("k-aside-menu"),this.aside&&!this.inMenu&&(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 t`
 			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}" @click=${this.handleClick}>
 				${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?t`<k-icon name="dot"></k-icon>`:a}
 				${this.collapsed?a:t`<span class="label"><slot></slot></span>`}
@@ -183,7 +183,7 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-	`}class d extends e{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?t`<hr>`:t`<div class="label"><slot></slot></div>`}static styles=s`
+	`}class r extends e{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?t`<hr>`:t`<div class="label"><slot></slot></div>`}static styles=s`
 		:host {
 			display: block;
 			margin: var(--spacer_h) 0;
@@ -208,14 +208,21 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 		:host([collapsed]) hr {
 			margin: var(--spacer_h) 0;
 		}
-	`}class r extends e{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 t`
+	`}class d extends e{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},side:{type:String},"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.side="left",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.side=this.aside.side||"left",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),this.side=this.aside?.side||"left"};toggleMenu=()=>{this.collapsed||(this.open=!this.open)};handleCollapsedClick=()=>{this.open=!0,this.aside?.expand()};render(){if(this.collapsed){const e="right"===this.side?"left down":"right down";return t`
+				<k-dropdown open-direction=${e} hover>
+					<button slot="trigger" class="no-btn collapsed-trigger" @click=${this.handleCollapsedClick}>
+						${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:t`<k-icon name="dot"></k-icon>`}
+					</button>
+					<slot></slot>
+				</k-dropdown>
+			`}return t`
 			<div class="menu-container">
 				<button class="no-btn menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
-					${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?t`<k-icon name="dot"></k-icon>`:a}
-					${this.collapsed?a:t`<span class="label">${this.label}</span>`}
-					${this.collapsed?a:t`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
+					${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:a}
+					<span class="label">${this.label}</span>
+					<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>
 				</button>
-				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
+				<div class="menu-content ${this.open?"open":""}">
 					<slot></slot>
 				</div>
 			</div>
@@ -242,12 +249,29 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			white-space: nowrap;
 			transition: background var(--animation_ms);
 		}
-		:host([collapsed]) .menu-header {
-			width: auto;
-		}
 		.menu-header:hover {
 			background: var(--c_bg_hover);
 		}
+		.collapsed-trigger {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: var(--spacer_h);
+			color: var(--tc);
+			background: transparent;
+			border: none;
+			appearance: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			cursor: pointer;
+			transition: background var(--animation_ms);
+		}
+		.collapsed-trigger:hover {
+			background: var(--c_bg_hover);
+		}
+		k-dropdown {
+			display: block;
+		}
 		k-icon {
 			flex-shrink: 0;
 		}
@@ -266,9 +290,6 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			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;
 		}
@@ -313,6 +334,7 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			width: 2rem;
 			height: 2rem;
 			border: none;
+			appearance: none;
 			background: transparent;
 			color: var(--c_text);
 			cursor: pointer;
@@ -325,4 +347,4 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 		#toggle:hover {
 			background: var(--c_bg_hover);
 		}
-	`}customElements.define("k-aside-item",n),customElements.define("k-aside-label",d),customElements.define("k-aside-menu",r),customElements.define("k-aside-spacer",l),customElements.define("k-aside-toggle",c);
+	`}customElements.define("k-aside-item",o),customElements.define("k-aside-label",r),customElements.define("k-aside-menu",d),customElements.define("k-aside-spacer",l),customElements.define("k-aside-toggle",c);

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-import{html as e,css as t}from"../lit-all.min.js";import o from"./ShadowComponent.js";import{boolTrueFalse as n}from"../utils/propConverters.js";const i=new Set;export default class s extends o{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:n},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:n},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),i.delete(this)}updated(e){super.updated(e),e.has("opened")&&(this.submenu||(this.opened?i.add(this):i.delete(this)),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=e=>{const t=e.composedPath(),o=t.find(e=>e.matches?.('[slot="trigger"]'));if(o){const e=o.closest("k-dropdown");if(e===this)return;if(this.contains(e))return;return void(this.opened&&this.close())}if(!this.opened)return;if(!t.includes(this))return void(this.closeOnClickOutside&&this.close());const n=t.find(e=>e.matches?.("a, button"));n&&!n.closest('[slot="trigger"]')&&this.closeOnSelect&&this.close()};handleTriggerClick=e=>{e.stopPropagation(),this.opened||i.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()}):i.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=t`
+import{html as e,css as t}from"../lit-all.min.js";import o from"./ShadowComponent.js";import{boolTrueFalse as n}from"../utils/propConverters.js";const i=new Set;export default class s extends o{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:n},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:n},submenu:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0,this.submenu=!1,this.hover=!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),this.hover&&(this.addEventListener("mouseenter",this.handleHoverEnter),this.addEventListener("mouseleave",this.handleHoverLeave))),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),this.removeEventListener("mouseenter",this.handleHoverEnter),this.removeEventListener("mouseleave",this.handleHoverLeave)),document.removeEventListener("keydown",this.handleKeydown),i.delete(this)}updated(e){super.updated(e),e.has("opened")&&(this.submenu||(this.opened?i.add(this):i.delete(this)),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=e=>{const t=e.composedPath(),o=t.find(e=>e.matches?.('[slot="trigger"]'));if(o){const e=o.closest("k-dropdown");if(e===this)return;if(this.contains(e))return;return void(this.opened&&this.close())}if(!this.opened)return;if(!t.includes(this))return void(this.closeOnClickOutside&&this.close());const n=t.find(e=>e.matches?.("a, button"));n&&!n.closest('[slot="trigger"]')&&this.closeOnSelect&&this.close()};handleTriggerClick=e=>{this.hover||(e.stopPropagation(),this.opened||i.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()}):i.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=t`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -160,7 +160,7 @@ import{html as e,css as t}from"../lit-all.min.js";import o from"./ShadowComponen
 			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 e`
+	`;handleHoverEnter=()=>{clearTimeout(this.closeTimer),this.opened||this.open()};handleHoverLeave=()=>{this.closeTimer=setTimeout(()=>this.close(),150)};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 e`
 			<div id="trigger" @click=${this.handleTriggerClick}>
 				<slot name="trigger"></slot>
 				${this.submenu?e`<k-icon name="chevron"></k-icon>`:""}

package/docs/components/dropdown.html

@@ -263,6 +263,7 @@
           <a href="#disabledItems">Disabled Items</a><br />
           <a href="#links">Using Links</a><br />
           <a href="#events">Events</a><br />
+          <a href="#hover">Hover</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
@@ -473,6 +474,26 @@
       </div>
     </div>
 
+    <h3 id="hover"><a href="#hover" class="no-link">Hover</a></h3>
+    <p>Add the <code>hover</code> attribute to open the menu when the trigger is hovered instead of clicked. The menu closes automatically 150ms after the cursor leaves the component.</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> <span class="hljs-attr">hover</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">&#x27;trigger&#x27;</span>&gt;</span>Hover Me<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">&#x27;edit&#x27;</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">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&#x27;copy&#x27;</span>&gt;</span>Copy<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">&#x27;delete&#x27;</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 hover>
+            <button slot="trigger">Hover Me</button>
+            <button data-value="edit">Edit</button>
+            <button data-value="copy">Copy</button>
+            <button data-value="delete">Delete</button>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -501,6 +522,9 @@
     <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>
 
+    <h5><code>hover<i>: boolean</i></code></h5>
+    <p>When present, the menu opens on <code>mouseenter</code> instead of trigger click. The menu closes 150ms after the cursor leaves the component. Default is <code>false</code>.</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>

package/docs/src/components/Aside.js

@@ -1,4 +1,4 @@
-import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"../lit-all.min.js";import{boolTrueFalse as i}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class o extends e{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:i},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:i},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0,this.persistentId=null}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);e&&(this.state=e)}if(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,this.persistentId&&window?.localStorage&&window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`,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=t`<aside><slot></slot></aside>`;return"overlay"===this.main?t`
+import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"../lit-all.min.js";import{boolTrueFalse as i}from"../utils/propConverters.js";import"./Dropdown.js";import"./FocusCapture.js";import"./Icon.js";export default class n extends e{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:i},escClose:{type:Boolean,reflect:!0,attribute:"esc-close",converter:i},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.state="offscreen",this.side="left",this.main="overlay",this.overlayClose=!0,this.escClose=!0,this.persistentId=null}overlayClick=()=>{this.overlayClose&&this.hide()};handleKeyDown=e=>{this.escClose&&"Escape"===e.key&&this.hide()};updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=window.localStorage.getItem(`aside-persistent-id-${this.persistentId}`);e&&(this.state=e)}if(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,this.persistentId&&window?.localStorage&&window.localStorage.setItem(`aside-persistent-id-${this.persistentId}`,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=t`<aside><slot></slot></aside>`;return"overlay"===this.main?t`
 				<k-focus-capture>
 					<div id="container">
 						<button id="overlay-btn" @click=${this.overlayClick}>
@@ -121,10 +121,10 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 		}
 		:host([main="push"][state="collapsed"]) aside {
 			width: var(--collapsed-width);
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="push"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="overlay"]) aside {
 			width: var(--width);
@@ -133,15 +133,15 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			transform: translateX(-100%);
 		}
 		:host([main="overlay"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="overlay"][side="right"]) aside {
 			transform: translateX(100%);
 		}
 		:host([main="overlay"][side="right"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
-	`}customElements.define("k-aside",o);class n extends e{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 t`
+	`}customElements.define("k-aside",n);class o extends e{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.inMenu=!!this.closest("k-aside-menu"),this.aside&&!this.inMenu&&(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 t`
 			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}" @click=${this.handleClick}>
 				${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?t`<k-icon name="dot"></k-icon>`:a}
 				${this.collapsed?a:t`<span class="label"><slot></slot></span>`}
@@ -183,7 +183,7 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-	`}class d extends e{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?t`<hr>`:t`<div class="label"><slot></slot></div>`}static styles=s`
+	`}class r extends e{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?t`<hr>`:t`<div class="label"><slot></slot></div>`}static styles=s`
 		:host {
 			display: block;
 			margin: var(--spacer_h) 0;
@@ -208,14 +208,21 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 		:host([collapsed]) hr {
 			margin: var(--spacer_h) 0;
 		}
-	`}class r extends e{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 t`
+	`}class d extends e{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},side:{type:String},"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.side="left",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.side=this.aside.side||"left",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),this.side=this.aside?.side||"left"};toggleMenu=()=>{this.collapsed||(this.open=!this.open)};handleCollapsedClick=()=>{this.open=!0,this.aside?.expand()};render(){if(this.collapsed){const e="right"===this.side?"left down":"right down";return t`
+				<k-dropdown open-direction=${e} hover>
+					<button slot="trigger" class="no-btn collapsed-trigger" @click=${this.handleCollapsedClick}>
+						${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:t`<k-icon name="dot"></k-icon>`}
+					</button>
+					<slot></slot>
+				</k-dropdown>
+			`}return t`
 			<div class="menu-container">
 				<button class="no-btn menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
-					${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?t`<k-icon name="dot"></k-icon>`:a}
-					${this.collapsed?a:t`<span class="label">${this.label}</span>`}
-					${this.collapsed?a:t`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
+					${this.icon?t`<k-icon name="${this.icon}"></k-icon>`:a}
+					<span class="label">${this.label}</span>
+					<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>
 				</button>
-				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
+				<div class="menu-content ${this.open?"open":""}">
 					<slot></slot>
 				</div>
 			</div>
@@ -242,12 +249,29 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			white-space: nowrap;
 			transition: background var(--animation_ms);
 		}
-		:host([collapsed]) .menu-header {
-			width: auto;
-		}
 		.menu-header:hover {
 			background: var(--c_bg_hover);
 		}
+		.collapsed-trigger {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: var(--spacer_h);
+			color: var(--tc);
+			background: transparent;
+			border: none;
+			appearance: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			cursor: pointer;
+			transition: background var(--animation_ms);
+		}
+		.collapsed-trigger:hover {
+			background: var(--c_bg_hover);
+		}
+		k-dropdown {
+			display: block;
+		}
 		k-icon {
 			flex-shrink: 0;
 		}
@@ -266,9 +290,6 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			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;
 		}
@@ -313,6 +334,7 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 			width: 2rem;
 			height: 2rem;
 			border: none;
+			appearance: none;
 			background: transparent;
 			color: var(--c_text);
 			cursor: pointer;
@@ -325,4 +347,4 @@ import e from"./ShadowComponent.js";import{html as t,css as s,nothing as a}from"
 		#toggle:hover {
 			background: var(--c_bg_hover);
 		}
-	`}customElements.define("k-aside-item",n),customElements.define("k-aside-label",d),customElements.define("k-aside-menu",r),customElements.define("k-aside-spacer",l),customElements.define("k-aside-toggle",c);
+	`}customElements.define("k-aside-item",o),customElements.define("k-aside-label",r),customElements.define("k-aside-menu",d),customElements.define("k-aside-spacer",l),customElements.define("k-aside-toggle",c);

package/docs/src/components/Dropdown.js

@@ -1,4 +1,4 @@
-import{html as e,css as t}from"../lit-all.min.js";import o from"./ShadowComponent.js";import{boolTrueFalse as n}from"../utils/propConverters.js";const i=new Set;export default class s extends o{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:n},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:n},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),i.delete(this)}updated(e){super.updated(e),e.has("opened")&&(this.submenu||(this.opened?i.add(this):i.delete(this)),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=e=>{const t=e.composedPath(),o=t.find(e=>e.matches?.('[slot="trigger"]'));if(o){const e=o.closest("k-dropdown");if(e===this)return;if(this.contains(e))return;return void(this.opened&&this.close())}if(!this.opened)return;if(!t.includes(this))return void(this.closeOnClickOutside&&this.close());const n=t.find(e=>e.matches?.("a, button"));n&&!n.closest('[slot="trigger"]')&&this.closeOnSelect&&this.close()};handleTriggerClick=e=>{e.stopPropagation(),this.opened||i.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()}):i.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=t`
+import{html as e,css as t}from"../lit-all.min.js";import o from"./ShadowComponent.js";import{boolTrueFalse as n}from"../utils/propConverters.js";const i=new Set;export default class s extends o{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:n},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:n},submenu:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0,this.submenu=!1,this.hover=!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),this.hover&&(this.addEventListener("mouseenter",this.handleHoverEnter),this.addEventListener("mouseleave",this.handleHoverLeave))),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),this.removeEventListener("mouseenter",this.handleHoverEnter),this.removeEventListener("mouseleave",this.handleHoverLeave)),document.removeEventListener("keydown",this.handleKeydown),i.delete(this)}updated(e){super.updated(e),e.has("opened")&&(this.submenu||(this.opened?i.add(this):i.delete(this)),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=e=>{const t=e.composedPath(),o=t.find(e=>e.matches?.('[slot="trigger"]'));if(o){const e=o.closest("k-dropdown");if(e===this)return;if(this.contains(e))return;return void(this.opened&&this.close())}if(!this.opened)return;if(!t.includes(this))return void(this.closeOnClickOutside&&this.close());const n=t.find(e=>e.matches?.("a, button"));n&&!n.closest('[slot="trigger"]')&&this.closeOnSelect&&this.close()};handleTriggerClick=e=>{this.hover||(e.stopPropagation(),this.opened||i.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()}):i.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=t`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -160,7 +160,7 @@ import{html as e,css as t}from"../lit-all.min.js";import o from"./ShadowComponen
 			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 e`
+	`;handleHoverEnter=()=>{clearTimeout(this.closeTimer),this.opened||this.open()};handleHoverLeave=()=>{this.closeTimer=setTimeout(()=>this.close(),150)};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 e`
 			<div id="trigger" @click=${this.handleTriggerClick}>
 				<slot name="trigger"></slot>
 				${this.submenu?e`<k-icon name="chevron"></k-icon>`:""}

package/docs-src/.config.js

@@ -12,5 +12,15 @@ export default {
   templating: {
     ssr: true,
     ssrPriority: true
+  },
+  "middleware": {
+    "security": {
+      "enabled": true,
+      "headers": {
+        "X-Content-Type-Options": "nosniff",
+        "X-Frame-Options": "SAMEORIGIN",
+        "X-XSS-Protection": "1; mode=block"
+      }
+    }
   }
 };

package/docs-src/components/dropdown.page.html

@@ -15,6 +15,7 @@
           <a href="#disabledItems">Disabled Items</a><br />
           <a href="#links">Using Links</a><br />
           <a href="#events">Events</a><br />
+          <a href="#hover">Hover</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
@@ -225,6 +226,26 @@
       </div>
     </div>
 
+    <h3 id="hover"><a href="#hover" class="no-link">Hover</a></h3>
+    <p>Add the <code>hover</code> attribute to open the menu when the trigger is hovered instead of clicked. The menu closes automatically 150ms after the cursor leaves the component.</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> <span class="hljs-attr">hover</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">&#x27;trigger&#x27;</span>&gt;</span>Hover Me<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">&#x27;edit&#x27;</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">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&#x27;copy&#x27;</span>&gt;</span>Copy<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">&#x27;delete&#x27;</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 hover>
+            <button slot="trigger">Hover Me</button>
+            <button data-value="edit">Edit</button>
+            <button data-value="copy">Copy</button>
+            <button data-value="delete">Delete</button>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -253,6 +274,9 @@
     <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>
 
+    <h5><code>hover<i>: boolean</i></code></h5>
+    <p>When present, the menu opens on <code>mouseenter</code> instead of trigger click. The menu closes 150ms after the cursor leaves the component. Default is <code>false</code>.</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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -42,6 +42,6 @@
   },
   "dependencies": {
     "@inquirer/prompts": "^8.3.0",
-    "kempo-css": "^2.1.9"
+    "kempo-css": "^2.2.0"
   }
 }

package/src/components/Aside.js

@@ -1,6 +1,7 @@
 import ShadowComponent from './ShadowComponent.js';
 import { html, css, nothing } from '../lit-all.min.js';
 import { boolTrueFalse } from '../utils/propConverters.js';
+import './Dropdown.js';
 import './FocusCapture.js';
 import './Icon.js';
 
@@ -240,10 +241,10 @@ export default class Aside extends ShadowComponent {
 		}
 		:host([main="push"][state="collapsed"]) aside {
 			width: var(--collapsed-width);
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="push"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="overlay"]) aside {
 			width: var(--width);
@@ -252,13 +253,13 @@ export default class Aside extends ShadowComponent {
 			transform: translateX(-100%);
 		}
 		:host([main="overlay"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
 		:host([main="overlay"][side="right"]) aside {
 			transform: translateX(100%);
 		}
 		:host([main="overlay"][side="right"][state="expanded"]) aside {
-			transform: translateX(0);
+			transform: none;
 		}
 	`;
 }
@@ -294,7 +295,8 @@ class AsideItem extends ShadowComponent {
 	connectedCallback() {
 		super.connectedCallback();
 		this.aside = this.closest('k-aside');
-		if(this.aside) {
+		this.inMenu = !!this.closest('k-aside-menu');
+		if(this.aside && !this.inMenu) {
 			this.collapsed = this.aside.state === 'collapsed';
 			this.aside.addEventListener('aside_state_change', this.handleStateChange);
 		}
@@ -466,6 +468,7 @@ class AsideMenu extends ShadowComponent {
 		label: { type: String },
 		open: { type: Boolean, reflect: true },
 		collapsed: { type: Boolean, reflect: true },
+		side: { type: String },
 		'no-expand': { type: Boolean, attribute: 'no-expand' },
 		'hide-when-collapsed': { type: Boolean, attribute: 'hide-when-collapsed' }
 	};
@@ -476,6 +479,7 @@ class AsideMenu extends ShadowComponent {
 		this.label = '';
 		this.open = false;
 		this.collapsed = false;
+		this.side = 'left';
 		this['no-expand'] = false;
 		this['hide-when-collapsed'] = false;
 	}
@@ -488,6 +492,7 @@ class AsideMenu extends ShadowComponent {
 		this.aside = this.closest('k-aside');
 		if(this.aside) {
 			this.collapsed = this.aside.state === 'collapsed';
+			this.side = this.aside.side || 'left';
 			this.aside.addEventListener('aside_state_change', this.handleStateChange);
 		}
 	}
@@ -510,28 +515,41 @@ class AsideMenu extends ShadowComponent {
 		} else if(state === 'expanded') {
 			this.collapsed = false;
 		}
+		this.side = this.aside?.side || 'left';
 	};
 
 	toggleMenu = () => {
-		if(this.collapsed && !this['no-expand'] && this.aside) {
-			this.aside.expand();
-		} else if(!this.collapsed) {
-			this.open = !this.open;
-		}
+		if(!this.collapsed) this.open = !this.open;
+	};
+
+	handleCollapsedClick = () => {
+		this.open = true;
+		this.aside?.expand();
 	};
 
 	/*
 		Rendering
 	*/
 	render() {
+		if(this.collapsed) {
+			const openDirection = this.side === 'right' ? 'left down' : 'right down';
+			return html`
+				<k-dropdown open-direction=${openDirection} hover>
+					<button slot="trigger" class="no-btn collapsed-trigger" @click=${this.handleCollapsedClick}>
+						${this.icon ? html`<k-icon name="${this.icon}"></k-icon>` : html`<k-icon name="dot"></k-icon>`}
+					</button>
+					<slot></slot>
+				</k-dropdown>
+			`;
+		}
 		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 ? html`<k-icon class="chevron" name="chevron" direction="${this.open ? 'down' : 'right'}"></k-icon>` : nothing}
+					${this.icon ? html`<k-icon name="${this.icon}"></k-icon>` : nothing}
+					<span class="label">${this.label}</span>
+					<k-icon class="chevron" name="chevron" direction="${this.open ? 'down' : 'right'}"></k-icon>
 				</button>
-				<div class="menu-content ${this.open && !this.collapsed ? 'open' : ''}">
+				<div class="menu-content ${this.open ? 'open' : ''}">
 					<slot></slot>
 				</div>
 			</div>
@@ -564,12 +582,29 @@ class AsideMenu extends ShadowComponent {
 			white-space: nowrap;
 			transition: background var(--animation_ms);
 		}
-		:host([collapsed]) .menu-header {
-			width: auto;
-		}
 		.menu-header:hover {
 			background: var(--c_bg_hover);
 		}
+		.collapsed-trigger {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: var(--spacer_h);
+			color: var(--tc);
+			background: transparent;
+			border: none;
+			appearance: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			cursor: pointer;
+			transition: background var(--animation_ms);
+		}
+		.collapsed-trigger:hover {
+			background: var(--c_bg_hover);
+		}
+		k-dropdown {
+			display: block;
+		}
 		k-icon {
 			flex-shrink: 0;
 		}
@@ -588,9 +623,6 @@ class AsideMenu extends ShadowComponent {
 			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;
 		}
@@ -717,6 +749,7 @@ class AsideToggle extends ShadowComponent {
 			width: 2rem;
 			height: 2rem;
 			border: none;
+			appearance: none;
 			background: transparent;
 			color: var(--c_text);
 			cursor: pointer;

package/src/components/Dropdown.js

@@ -11,7 +11,8 @@ export default class Dropdown extends ShadowComponent {
 		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 },
-		submenu: { type: Boolean, reflect: true }
+		submenu: { type: Boolean, reflect: true },
+		hover: { type: Boolean, reflect: true }
 	};
 
 	constructor() {
@@ -21,6 +22,7 @@ export default class Dropdown extends ShadowComponent {
 		this.closeOnSelect = true;
 		this.closeOnClickOutside = true;
 		this.submenu = false;
+		this.hover = false;
 	}
 
 	/*
@@ -37,6 +39,10 @@ export default class Dropdown extends ShadowComponent {
 			this.addEventListener('mouseleave', this.handleSubmenuLeave);
 		} else {
 			document.addEventListener('click', this.handleDocumentClick);
+			if(this.hover) {
+				this.addEventListener('mouseenter', this.handleHoverEnter);
+				this.addEventListener('mouseleave', this.handleHoverLeave);
+			}
 		}
 		document.addEventListener('keydown', this.handleKeydown);
 	}
@@ -48,6 +54,8 @@ export default class Dropdown extends ShadowComponent {
 			this.removeEventListener('mouseleave', this.handleSubmenuLeave);
 		} else {
 			document.removeEventListener('click', this.handleDocumentClick);
+			this.removeEventListener('mouseenter', this.handleHoverEnter);
+			this.removeEventListener('mouseleave', this.handleHoverLeave);
 		}
 		document.removeEventListener('keydown', this.handleKeydown);
 		openDropdowns.delete(this);
@@ -99,6 +107,7 @@ export default class Dropdown extends ShadowComponent {
 	};
 
 	handleTriggerClick = e => {
+		if(this.hover) return;
 		e.stopPropagation();
 		// Close all other dropdowns before opening this one
 		if(!this.opened) {
@@ -396,6 +405,15 @@ export default class Dropdown extends ShadowComponent {
 		}
 	`;
 
+	handleHoverEnter = () => {
+		clearTimeout(this.closeTimer);
+		if(!this.opened) this.open();
+	};
+
+	handleHoverLeave = () => {
+		this.closeTimer = setTimeout(() => this.close(), 150);
+	};
+
 	/*
 		Slot Change Handler
 	*/

package/tests/components/Aside.browser-test.js

@@ -814,6 +814,147 @@ export default {
 		pass('Clicking collapsed menu expands aside');
 	},
 
+	'AsideMenu: clicking collapsed menu should also set open to true': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'collapsed' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		menu.label = 'Projects';
+		aside.appendChild(menu);
+		await menu.updateComplete;
+		const btn = menu.shadowRoot.querySelector('button');
+		btn.click();
+		await menu.updateComplete;
+		if(!menu.open) {
+			cleanup(aside);
+			return fail('Menu open should be true after clicking collapsed trigger');
+		}
+		cleanup(aside);
+		pass('Clicking collapsed trigger sets menu open to true');
+	},
+
+	'AsideMenu: collapsed state should render k-dropdown': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'collapsed' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		menu.label = 'Projects';
+		aside.appendChild(menu);
+		await menu.updateComplete;
+		const dropdown = menu.shadowRoot.querySelector('k-dropdown');
+		if(!dropdown) {
+			cleanup(aside);
+			return fail('Collapsed menu should render k-dropdown');
+		}
+		cleanup(aside);
+		pass('Collapsed menu renders k-dropdown');
+	},
+
+	'AsideMenu: collapsed k-dropdown should have hover attribute': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'collapsed' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		menu.label = 'Projects';
+		aside.appendChild(menu);
+		await menu.updateComplete;
+		const dropdown = menu.shadowRoot.querySelector('k-dropdown');
+		if(!dropdown || !dropdown.hasAttribute('hover')) {
+			cleanup(aside);
+			return fail('Collapsed k-dropdown should have hover attribute');
+		}
+		cleanup(aside);
+		pass('Collapsed k-dropdown has hover attribute');
+	},
+
+	'AsideMenu: collapsed k-dropdown open-direction should be right down for left aside': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'collapsed', side: 'left' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		aside.appendChild(menu);
+		await menu.updateComplete;
+		const dropdown = menu.shadowRoot.querySelector('k-dropdown');
+		if(!dropdown || dropdown.getAttribute('open-direction') !== 'right down') {
+			cleanup(aside);
+			return fail(`Expected open-direction "right down", got "${dropdown?.getAttribute('open-direction')}"`);
+		}
+		cleanup(aside);
+		pass('Left aside collapsed menu opens right down');
+	},
+
+	'AsideMenu: collapsed k-dropdown open-direction should be left down for right aside': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'collapsed', side: 'right' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		aside.appendChild(menu);
+		await menu.updateComplete;
+		const dropdown = menu.shadowRoot.querySelector('k-dropdown');
+		if(!dropdown || dropdown.getAttribute('open-direction') !== 'left down') {
+			cleanup(aside);
+			return fail(`Expected open-direction "left down", got "${dropdown?.getAttribute('open-direction')}"`);
+		}
+		cleanup(aside);
+		pass('Right aside collapsed menu opens left down');
+	},
+
+	'AsideMenu: should not render k-dropdown when expanded': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'expanded' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		menu.label = 'Projects';
+		aside.appendChild(menu);
+		await menu.updateComplete;
+		const dropdown = menu.shadowRoot.querySelector('k-dropdown');
+		if(dropdown) {
+			cleanup(aside);
+			return fail('Expanded menu should not render k-dropdown');
+		}
+		cleanup(aside);
+		pass('Expanded menu does not render k-dropdown');
+	},
+
+	'AsideItem: inside AsideMenu should not sync collapsed state from aside': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'expanded' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		menu.label = 'Projects';
+		const item = document.createElement('k-aside-item');
+		item.icon = 'cards';
+		item.textContent = 'Dashboard';
+		menu.appendChild(item);
+		aside.appendChild(menu);
+		await item.updateComplete;
+		aside.collapse();
+		await aside.updateComplete;
+		await item.updateComplete;
+		if(item.collapsed) {
+			cleanup(aside);
+			return fail('AsideItem inside AsideMenu should not become collapsed');
+		}
+		cleanup(aside);
+		pass('AsideItem inside AsideMenu ignores aside collapsed state');
+	},
+
+	'AsideItem: inside AsideMenu should render label (not dot) when aside is collapsed': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'expanded' });
+		const menu = document.createElement('k-aside-menu');
+		menu.icon = 'folder';
+		menu.label = 'Projects';
+		const item = document.createElement('k-aside-item');
+		item.icon = 'cards';
+		item.textContent = 'Dashboard';
+		menu.appendChild(item);
+		aside.appendChild(menu);
+		await item.updateComplete;
+		aside.collapse();
+		await aside.updateComplete;
+		await item.updateComplete;
+		const label = item.shadowRoot.querySelector('.label');
+		if(!label) {
+			cleanup(aside);
+			return fail('AsideItem inside AsideMenu should still render label when aside is collapsed');
+		}
+		cleanup(aside);
+		pass('AsideItem inside AsideMenu renders label regardless of aside state');
+	},
+
 	/*
 		AsideSpacer
 	*/

package/tests/components/Dropdown.browser-test.js

@@ -8,6 +8,7 @@ const createDropdown = async (options = {}) => {
 			${options.opened ? 'opened' : ''}
 			${options.closeOnSelect === false ? 'close-on-select="false"' : ''}
 			${options.closeOnClickOutside === false ? 'close-on-click-outside="false"' : ''}
+			${options.hover ? 'hover' : ''}
 		>
 			<button slot="trigger">Trigger</button>
 			<button data-value="item1">Item 1</button>
@@ -661,5 +662,65 @@ export default {
 		}
 		cleanup(container);
 		pass('Dropdown does not inflate in pre-wrap context');
+	},
+
+	/*
+		Hover Mode
+	*/
+	'hover should be false by default': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(dropdown.hover !== false) {
+			cleanup(container);
+			return fail(`Expected hover to be false, got ${dropdown.hover}`);
+		}
+		cleanup(container);
+		pass('hover is false by default');
+	},
+
+	'hover attribute should reflect': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ hover: true });
+		if(!dropdown.hasAttribute('hover')) {
+			cleanup(container);
+			return fail('hover attribute should be reflected');
+		}
+		cleanup(container);
+		pass('hover attribute reflects correctly');
+	},
+
+	'should open on mouseenter when hover is true': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ hover: true });
+		dropdown.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+		await dropdown.updateComplete;
+		if(!dropdown.opened) {
+			cleanup(container);
+			return fail('Dropdown should open on mouseenter in hover mode');
+		}
+		cleanup(container);
+		pass('Dropdown opens on mouseenter in hover mode');
+	},
+
+	'should close on mouseleave when hover is true': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ hover: true, opened: true });
+		dropdown.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+		await new Promise(r => setTimeout(r, 200));
+		if(dropdown.opened) {
+			cleanup(container);
+			return fail('Dropdown should close after mouseleave in hover mode');
+		}
+		cleanup(container);
+		pass('Dropdown closes on mouseleave in hover mode');
+	},
+
+	'trigger click should not toggle in hover mode': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ hover: true });
+		const trigger = dropdown.querySelector('[slot="trigger"]');
+		trigger.click();
+		await dropdown.updateComplete;
+		if(dropdown.opened) {
+			cleanup(container);
+			return fail('Trigger click should not open dropdown in hover mode');
+		}
+		cleanup(container);
+		pass('Trigger click does not toggle in hover mode');
 	}
 };