@iyulab/components 0.1.10 → 0.2.0

package/dist/components/divider/UDivider.styles.js

@@ -2,53 +2,21 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    --divider-size: 2px;
-    --handler-size: 4px;
-    --handler-color: var(--u-blue-500, #3b82f6);
+    --divider-size: 1px;
+    --divider-color: var(--u-neutral-200, #e5e7eb);
+    --divider-spacing: 8px;
   }
 
   :host {
-    position: relative;
-    background-color: var(--u-neutral-200, #e5e7eb);
-  }
-  :host([orientation="horizontal"]) {
-    width: var(--divider-size, 2px);
-    min-height: 0px;
-  }
-  :host([orientation="vertical"]) {
-    min-width: 0px;
-    height: var(--divider-size, 2px);
-  }
-
-  .handler {
-    position: absolute;
-    z-index: 100;
     display: block;
-    background-color: var(--handler-color, #3b82f6);
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-  .handler[orientation="horizontal"] {
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: var(--handler-size, 4px);
-    height: 100%;
-    cursor: col-resize;
-  }
-  .handler[orientation="vertical"] {
-    left: 0;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100%;
-    height: var(--handler-size, 4px);
-    cursor: row-resize;
-  }
-  .handler[moving],
-  .handler:hover {
-    opacity: 1;
+    background-color: var(--divider-color);
+    height: var(--divider-size);
+    margin: var(--divider-spacing) 0;
+  }
+  :host([vertical]) {
+    width: var(--divider-size);
+    height: auto;
+    margin: 0 var(--divider-spacing);
   }
 `;
 

package/dist/components/drawer/UDrawer.component.d.ts

@@ -10,6 +10,8 @@ export declare class UDrawer extends ModalElement {
     static dependencies: Record<string, typeof BaseElement>;
     /** 드로어가 나타나는 위치 */
     placement: DrawerPlacement;
+    /** 헤드리스 모드 여부 */
+    headless: boolean;
     /** 타이틀 텍스트 */
     heading: string;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/drawer/UDrawer.component.js

@@ -1,7 +1,8 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ModalElement } from '../ModalElement.js';
-import { UIconButton } from '../icon-button/UIconButton.component.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { UButton } from '../button/UButton.component.js';
 import { styles } from './UDrawer.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -17,6 +18,7 @@ class UDrawer extends ModalElement {
   constructor() {
     super(...arguments);
     this.placement = "left";
+    this.headless = false;
     this.heading = "";
   }
   static {
@@ -24,22 +26,22 @@ class UDrawer extends ModalElement {
   }
   static {
     this.dependencies = {
-      "u-icon-button": UIconButton
+      "u-icon": UIcon,
+      "u-button": UButton
     };
   }
   render() {
     return html`
       <div class="drawer" part="base" ?open=${this.open} placement=${this.placement}>
-        <div class="header" part="header" ?hidden=${!this.heading}>
+        <div class="header" part="header" ?hidden=${this.headless}>
           <span class="title" part="title">
             ${this.heading}
           </span>
-          <u-icon-button class="close-btn" part="close-btn"
-            borderless  
-            lib="internal" 
-            name="x-lg"
-            @click=${() => this.hide()}
-          ></u-icon-button>
+          <u-button class="close-btn" part="close-btn"
+            variant="link"
+            @click=${() => this.hide()}>
+            <u-icon lib="internal" name="x-lg"></u-icon>
+          </u-button>
         </div>
 
         <div class="content" part="content" scrollable>
@@ -52,6 +54,9 @@ class UDrawer extends ModalElement {
 __decorateClass([
   property({ type: String, reflect: true })
 ], UDrawer.prototype, "placement");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UDrawer.prototype, "headless");
 __decorateClass([
   property({ type: String })
 ], UDrawer.prototype, "heading");

package/dist/components/form/UForm.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
+import { arrayAttrConverter } from '../../utilities/converters.js';
 import { BaseElement } from '../BaseElement.js';
 import { UInput } from '../input/UInput.component.js';
 import { styles } from './UForm.styles.js';
@@ -64,10 +64,10 @@ class UForm extends BaseElement {
   }
 }
 __decorateClass([
-  property({ type: Array, converter: arrayAttributeConverter((v) => v) })
+  property({ type: Array, converter: arrayAttrConverter((v) => v) })
 ], UForm.prototype, "includes");
 __decorateClass([
-  property({ type: Array, converter: arrayAttributeConverter((v) => v) })
+  property({ type: Array, converter: arrayAttrConverter((v) => v) })
 ], UForm.prototype, "excludes");
 __decorateClass([
   property({ type: Object, attribute: false })

package/dist/components/icon/UIcon.component.d.ts

@@ -1,3 +1,4 @@
+import { nothing } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 export type IconLibrary = "internal" | "default" | (string & {});
 /**
@@ -18,7 +19,9 @@ export declare class UIcon extends BaseElement {
      * 사용할 아이콘의 이름을 지정합니다.
      */
     name?: string;
-    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/until.js').UntilDirective>;
+    render(): import('lit-html/directive.js').DirectiveResult<{
+        new (_partInfo: import('lit-html/directive.js').PartInfo): import('lit-html/directives/until.js').UntilDirective<typeof nothing | Promise<import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>>>;
+    }>;
     /**
      * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
      */

package/dist/components/icon/UIcon.component.js

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { until } from 'lit/directives/until.js';
 import { BaseElement } from '../BaseElement.js';
-import { icons } from '../../utilities/icons.js';
+import { IconRegistry } from '../../utilities/IconRegistry.js';
 import { styles } from './UIcon.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -28,7 +28,7 @@ class UIcon extends BaseElement {
   }
   render() {
     if (!this.lib || !this.name) return nothing;
-    return until(icons.resolve(this.lib, this.name).then((html) => {
+    return until(IconRegistry.resolve(this.lib, this.name).then((html) => {
       return this.validate(html) ? unsafeHTML(html) : nothing;
     }), nothing);
   }

package/dist/components/menu/UMenu.component.d.ts

@@ -17,7 +17,6 @@ export declare class UMenu extends FloatingElement {
      * - default: 일반 메뉴 (수동 제어)
      * - dropdown: 드롭다운 메뉴 (앵커 클릭 시 토글)
      * - contextmenu: 컨텍스트 메뉴 (앵커 우클릭 시 표시)
-     * - submenu: 서브메뉴 (앵커 호버/포커스 시 표시)
      */
     type: MenuType;
     /**
@@ -57,14 +56,12 @@ export declare class UMenu extends FloatingElement {
     private handleWindowFocusOut;
     private handleWindowKeydown;
     private handleWindowPointerDown;
-    private handleAnchorPointerEnter;
-    private handleAnchorPointerLeave;
-    private handleAnchorFocusIn;
-    private handleAnchorFocusOut;
     private handleAnchorPointerDown;
     private handleAnchorKeydown;
     private handleAnchorContextMenu;
-    /** 이벤트로부터 활성화된 (비활성화되지 않은) 메뉴 아이템을 반환 */
-    private getEnabledItemFrom;
+    private handleSubmenuAnchorPointerEnter;
+    private handleSubmenuAnchorPointerLeave;
+    private handleSubmenuAnchorFocusIn;
+    private handleSubmenuAnchorFocusOut;
 }
 export {};

package/dist/components/menu/UMenu.component.js

@@ -24,7 +24,7 @@ class UMenu extends FloatingElement {
      */
     this.focusAt = async (index = 0) => {
       await this.updateComplete;
-      const items = this.items || [];
+      const items = this.getItems("enabled");
       const length = items.length;
       if (length === 0) return;
       index = index < 0 ? Math.max(0, length + index) : Math.min(index, length - 1);
@@ -34,8 +34,10 @@ class UMenu extends FloatingElement {
     };
     //#region 기본 이벤트 핸들러
     this.handleClick = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item || item.isNested) return;
+      const item = e.target;
+      if (!(item instanceof UMenuItem)) return;
+      if (item.disabled) return;
+      if (item.submenu) return;
       const items = this.getItems("enabled");
       if (!items.includes(item)) return;
       const value = item.value || "";
@@ -56,8 +58,9 @@ class UMenu extends FloatingElement {
       this.emit("u-select", { value });
     };
     this.handleKeydown = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
+      const item = e.target;
+      if (!(item instanceof UMenuItem)) return;
+      if (item.disabled) return;
       const items = this.getItems("enabled");
       if (!items.includes(item)) return;
       const currentIndex = items.findIndex((i) => i === item);
@@ -87,18 +90,21 @@ class UMenu extends FloatingElement {
           await this.focusAt(nextIndex);
           break;
         case "ArrowLeft":
-          e.preventDefault();
-          e.stopPropagation();
           if (this.type === "submenu") {
-            this.anchor?.focus();
+            e.preventDefault();
+            e.stopPropagation();
+            await this.hide();
+            if (this.target instanceof HTMLElement) {
+              this.target.focus();
+            }
           }
           break;
         case "ArrowRight":
-          e.preventDefault();
-          e.stopPropagation();
-          const menu = item.querySelector("u-menu");
-          if (menu?.type === "submenu") {
-            await menu?.focusAt(0);
+          if (item.submenu) {
+            e.preventDefault();
+            e.stopPropagation();
+            await item.submenu.show(item);
+            await item.submenu.focusAt(0);
           }
           break;
       }
@@ -121,51 +127,31 @@ class UMenu extends FloatingElement {
         }
         await this.hide();
       } else if (this.type === "dropdown") {
-        const anchor = this.anchor;
-        if (!anchor) return;
+        const currentTarget = this.target;
+        if (!currentTarget || !(currentTarget instanceof HTMLElement)) return;
         const targets = e.composedPath().filter((v) => v instanceof HTMLElement);
         for (const target of targets) {
-          if (this.contains(target) || anchor.contains(target)) return;
+          if (this.contains(target) || currentTarget.contains(target)) return;
         }
         await this.hide();
       }
     };
     //#endregion
-    //#region 'submenu' 이벤트 핸들러
-    this.handleAnchorPointerEnter = (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.show();
-    };
-    this.handleAnchorPointerLeave = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.hide();
-    };
-    this.handleAnchorFocusIn = (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.show();
-    };
-    this.handleAnchorFocusOut = async (e) => {
-      const item = this.getEnabledItemFrom(e);
-      if (!item) return;
-      this.hide();
-    };
-    //#endregion
     //#region 'dropdown' 이벤트 핸들러
     this.handleAnchorPointerDown = async (e) => {
       if (e.button !== 0) return;
-      if (this.visible)
+      const target = e.currentTarget;
+      if (this.visible && this.target === target)
         await this.hide();
       else
-        await this.show();
+        await this.show(target);
     };
     this.handleAnchorKeydown = async (e) => {
       if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
         e.preventDefault();
+        const target = e.currentTarget;
         if (this.visible) return;
-        await this.show();
+        await this.show(target);
       }
     };
     //#endregion
@@ -187,14 +173,40 @@ class UMenu extends FloatingElement {
       };
       await this.show(virtual, false);
     };
+    //#endregion
+    //#region 'submenu' 이벤트 핸들러
+    this.handleSubmenuAnchorPointerEnter = (e) => {
+      const target = e.currentTarget;
+      if (target?.disabled) return;
+      this.show(target);
+    };
+    this.handleSubmenuAnchorPointerLeave = (e) => {
+      const related = e.relatedTarget;
+      if (related) {
+        const target = this.target;
+        if (target?.contains(related) || this.contains(related)) return;
+      }
+      this.hide();
+    };
+    this.handleSubmenuAnchorFocusIn = (e) => {
+      const target = e.currentTarget;
+      if (target?.disabled) return;
+      this.show(target);
+    };
+    this.handleSubmenuAnchorFocusOut = (e) => {
+      const related = e.relatedTarget;
+      if (related) {
+        const target = this.target;
+        if (target?.contains(related) || this.contains(related)) return;
+      }
+      this.hide();
+    };
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {
-      "u-menu-item": UMenuItem
-    };
+    this.dependencies = {};
   }
   connectedCallback() {
     super.connectedCallback();
@@ -208,13 +220,13 @@ class UMenu extends FloatingElement {
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
-    if (changedProperties.has("anchor") || changedProperties.has("type")) {
+    if (changedProperties.has("anchors") || changedProperties.has("type")) {
       const oldType = changedProperties.get("type") || "default";
       const newType = this.type || "default";
-      const oldAnchor = changedProperties.get("anchor");
-      const newAnchor = this.anchor;
-      if (oldAnchor) this.unbind(oldType, oldAnchor);
-      if (newAnchor) this.bind(newType, newAnchor);
+      const oldAnchors = changedProperties.get("anchors");
+      const newAnchors = this.anchors;
+      if (oldAnchors) this.unbind(oldType, oldAnchors);
+      if (newAnchors) this.bind(newType, newAnchors);
     }
     if (changedProperties.has("mode")) {
       this.clearAll();
@@ -228,13 +240,12 @@ class UMenu extends FloatingElement {
    * 재귀적으로 서브메뉴의 아이템들도 해제됩니다.
    */
   clearAll() {
-    const items = this.items || [];
+    const items = this.getItems("all");
     for (const item of items) {
       item.selected = false;
       item.checked = false;
-      if (item.isNested) {
-        const submenu = item.querySelector("u-menu");
-        submenu?.clearAll();
+      if (item.submenu) {
+        item.submenu.clearAll();
       }
     }
   }
@@ -245,7 +256,7 @@ class UMenu extends FloatingElement {
    * @return 조건에 맞는 아이템들의 배열입니다
    */
   getItems(filter = "all") {
-    const items = this.items || [];
+    const items = this.items?.filter((item) => item instanceof UMenuItem) || [];
     switch (filter) {
       case "all":
         return items;
@@ -266,24 +277,29 @@ class UMenu extends FloatingElement {
     }
   }
   /** 앵커에 이벤트 바인딩 */
-  bind(type, target) {
-    if (type === "submenu") {
-      this.visible = false;
-      this.placement ||= "right-start";
-      this.offset = -8;
-      target.addEventListener("pointerenter", this.handleAnchorPointerEnter);
-      target.addEventListener("pointerleave", this.handleAnchorPointerLeave);
-      target.addEventListener("focusin", this.handleAnchorFocusIn);
-      target.addEventListener("focusout", this.handleAnchorFocusOut);
-    } else if (type === "dropdown") {
+  bind(type, anchors) {
+    if (type === "dropdown") {
       this.visible = false;
       this.placement ||= "bottom-start";
-      target.addEventListener("pointerdown", this.handleAnchorPointerDown);
-      target.addEventListener("keydown", this.handleAnchorKeydown);
+      for (const anchor of anchors) {
+        anchor.addEventListener("pointerdown", this.handleAnchorPointerDown);
+        anchor.addEventListener("keydown", this.handleAnchorKeydown);
+      }
     } else if (type === "contextmenu") {
       this.visible = false;
       this.placement ||= "bottom-start";
-      target.addEventListener("contextmenu", this.handleAnchorContextMenu);
+      for (const anchor of anchors) {
+        anchor.addEventListener("contextmenu", this.handleAnchorContextMenu);
+      }
+    } else if (type === "submenu") {
+      this.visible = false;
+      this.placement ||= "right-start";
+      for (const anchor of anchors) {
+        anchor.addEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
+        anchor.addEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
+        anchor.addEventListener("focusin", this.handleSubmenuAnchorFocusIn);
+        anchor.addEventListener("focusout", this.handleSubmenuAnchorFocusOut);
+      }
     } else {
       this.visible = true;
       return;
@@ -293,29 +309,24 @@ class UMenu extends FloatingElement {
     window.addEventListener("pointerdown", this.handleWindowPointerDown);
   }
   /** 앵커에서 이벤트 바인딩 해제 */
-  unbind(_, target) {
+  unbind(_, anchors) {
     window.removeEventListener("focusout", this.handleWindowFocusOut);
     window.removeEventListener("keydown", this.handleWindowKeydown);
     window.removeEventListener("pointerdown", this.handleWindowPointerDown);
-    target.removeEventListener("pointerenter", this.handleAnchorPointerEnter);
-    target.removeEventListener("pointerleave", this.handleAnchorPointerLeave);
-    target.removeEventListener("focusin", this.handleAnchorFocusIn);
-    target.removeEventListener("focusout", this.handleAnchorFocusOut);
-    target.removeEventListener("pointerdown", this.handleAnchorPointerDown);
-    target.removeEventListener("keydown", this.handleAnchorKeydown);
-    target.removeEventListener("contextmenu", this.handleAnchorContextMenu);
+    for (const anchor of anchors) {
+      anchor.removeEventListener("pointerdown", this.handleAnchorPointerDown);
+      anchor.removeEventListener("keydown", this.handleAnchorKeydown);
+      anchor.removeEventListener("contextmenu", this.handleAnchorContextMenu);
+      anchor.removeEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
+      anchor.removeEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
+      anchor.removeEventListener("focusin", this.handleSubmenuAnchorFocusIn);
+      anchor.removeEventListener("focusout", this.handleSubmenuAnchorFocusOut);
+    }
   }
   //#endregion
-  /** 이벤트로부터 활성화된 (비활성화되지 않은) 메뉴 아이템을 반환 */
-  getEnabledItemFrom(event) {
-    const target = event.target;
-    const item = target.closest("u-menu-item");
-    if (!item || item.disabled) return null;
-    return item;
-  }
 }
 __decorateClass([
-  queryAssignedElements({ flatten: false, selector: "u-menu-item" })
+  queryAssignedElements({ flatten: false })
 ], UMenu.prototype, "items");
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/components/menu/UMenu.styles.js

@@ -22,7 +22,7 @@ const styles = css`
     opacity: 1;
   }
 
-  /* dropdown/contextmenu/submenu 타입: 플로팅 메뉴 */
+  /* dropdown/contextmenu 타입: 플로팅 메뉴 */
   :host([type="dropdown"]),
   :host([type="contextmenu"]),
   :host([type="submenu"]) {

package/dist/components/menu-item/UMenuItem.component.d.ts

@@ -1,19 +1,25 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
+import { UMenu } from '../menu/UMenu.component.js';
 export declare class UMenuItem extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 중첩된 메뉴 아이템인지 여부 */
-    isNested: boolean;
+    /** 서브메뉴 요소 */
+    submenu: UMenu | null;
     /** 비활성화 여부 @default false */
     disabled: boolean;
+    /** 로딩 상태 @default false */
+    loading: boolean;
     /** 선택 여부(multiple mode) @default false */
     checked: boolean;
     /** 선택 여부(single mode) @default false */
     selected: boolean;
-    /** 값 */
-    value: string;
+    /** 메뉴 아이템 값 */
+    value?: string;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
+    /** 기본 슬롯 변경 감지 */
+    private handleSlotChange;
+    /** submenu 슬롯 변경 감지 */
     private handleSubmenuSlotChange;
 }

package/dist/components/menu-item/UMenuItem.component.js

@@ -1,6 +1,9 @@
 import { html } from 'lit';
 import { state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { UMenu } from '../menu/UMenu.component.js';
+import { USpinner } from '../spinner/USpinner.component.js';
 import { styles } from './UMenuItem.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -15,27 +18,29 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UMenuItem extends BaseElement {
   constructor() {
     super(...arguments);
-    this.isNested = false;
+    this.submenu = null;
     this.disabled = false;
+    this.loading = false;
     this.checked = false;
     this.selected = false;
-    this.value = "";
+    /** 기본 슬롯 변경 감지 */
+    this.handleSlotChange = (e) => {
+      const slot = e.target;
+      const elements = slot.assignedElements({ flatten: true });
+      const menu = elements.find((el) => el instanceof UMenu);
+      menu?.setAttribute("slot", "submenu");
+    };
+    /** submenu 슬롯 변경 감지 */
     this.handleSubmenuSlotChange = (e) => {
       const slot = e.target;
       const elements = slot.assignedElements({ flatten: true });
-      if (elements.length !== 1) {
-        console.warn(`when using submenu, there must be exactly one UMenu component in the 'submenu' slot.`);
-        this.isNested = false;
+      const menu = elements.find((el) => el instanceof UMenu);
+      if (menu) {
+        menu.type = "submenu";
+        menu.anchors = [this];
+        this.submenu = menu;
       } else {
-        const submenu = elements[0];
-        if ("anchor" in submenu && "type" in submenu) {
-          submenu.anchor = this;
-          submenu.type = "submenu";
-          this.isNested = true;
-        } else {
-          console.warn(`the element assigned to the 'submenu' slot is not a valid UMenu component.`);
-          this.isNested = false;
-        }
+        this.submenu = null;
       }
     };
   }
@@ -43,13 +48,15 @@ class UMenuItem extends BaseElement {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {};
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-spinner": USpinner
+    };
   }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("disabled")) {
-      const tabIndex = this.disabled ? "-1" : "0";
-      this.setAttribute("tabindex", tabIndex);
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
     }
   }
   render() {
@@ -57,36 +64,40 @@ class UMenuItem extends BaseElement {
       <u-icon class="prefix icon"
         ?hidden=${!this.checked}
         lib="internal"
-        name="check-lg"
+        name="check"
       ></u-icon>
 
+      <u-spinner class="prefix icon" 
+        ?hidden=${!this.loading}
+      ></u-spinner>
+
       <slot name="prefix"></slot>
 
-      <span class="content">
-        <slot></slot>
+      <span class="label">
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </span>
 
       <slot name="suffix"></slot>
 
       <u-icon class="suffix icon"
-        ?hidden=${!this.isNested}
+        ?hidden=${this.submenu === null}
         lib="internal"
         name="chevron-right"
       ></u-icon>
 
-      <slot name="submenu"
-        ?hidden=${!this.isNested}
-        @slotchange=${this.handleSubmenuSlotChange}
-      ></slot>
+      <slot name="submenu" @slotchange=${this.handleSubmenuSlotChange}></slot>
     `;
   }
 }
 __decorateClass([
   state()
-], UMenuItem.prototype, "isNested");
+], UMenuItem.prototype, "submenu");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UMenuItem.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UMenuItem.prototype, "loading");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UMenuItem.prototype, "checked");