import {
  SubmenuController
} from "./chunk.KEJFWGZI.js";
import {
  HasSlotController,
  getTextContent
} from "./chunk.IVMQWO2L.js";
import {
  watch
} from "./chunk.X2OQMWGY.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/menu-item/menu-item.ts
import { css, html } from "lit";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var SdMenuItem = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.type = "normal";
    this.checked = false;
    this.disabled = false;
    this.value = "";
    this.chevron = false;
    this.hasSlotController = new HasSlotController(this, "submenu");
    this.submenuController = new SubmenuController(this, this.hasSlotController);
    this.handleHostClick = (event) => {
      if (this.disabled) {
        event.preventDefault();
        event.stopImmediatePropagation();
      }
    };
    this.handleMouseOver = (event) => {
      this.focus();
      event.stopPropagation();
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener("click", this.handleHostClick);
    this.addEventListener("mouseover", this.handleMouseOver);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener("click", this.handleHostClick);
    this.removeEventListener("mouseover", this.handleMouseOver);
  }
  handleDefaultSlotChange() {
    const textLabel = this.getTextLabel();
    if (typeof this.cachedTextLabel === "undefined") {
      this.cachedTextLabel = textLabel;
      return;
    }
    if (textLabel !== this.cachedTextLabel) {
      this.cachedTextLabel = textLabel;
      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
    }
  }
  handleCheckedChange() {
    if (this.checked && this.type !== "checkbox") {
      this.checked = false;
      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
      return;
    }
    if (this.type === "checkbox") {
      this.setAttribute("aria-checked", this.checked ? "true" : "false");
    } else {
      this.removeAttribute("aria-checked");
    }
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
    this.setAttribute("tabindex", this.disabled ? "-1" : "0");
  }
  handleTypeChange() {
    if (this.type === "checkbox") {
      this.setAttribute("role", "menuitemcheckbox");
      this.setAttribute("aria-checked", this.checked ? "true" : "false");
    } else {
      this.setAttribute("role", "menuitem");
      this.removeAttribute("aria-checked");
    }
  }
  /** Returns a text label based on the contents of the menu item's default slot. */
  getTextLabel() {
    return getTextContent(this.defaultSlot);
  }
  isSubmenu() {
    return this.hasSlotController.test("submenu");
  }
  render() {
    const isSubmenuExpanded = this.submenuController.isExpanded();
    const slots = {
      label: this.hasSlotController.test("[default]"),
      iconIndent: this.hasSlotController.test("icon-indent")
    };
    return html`<div id="anchor" part="base" class="${cx(
      "relative flex items-stretch whitespace-nowrap py-3 px-4 no-wrap !navigable-border-radius",
      this.disabled ? "outline-none cursor-not-allowed sd-6-22-0-menu--disabled-color-text hover:bg-transparent" : "cursor-pointer sd-6-22-0-menu-color-text hover:bg-neutral-200",
      this.isSubmenu() && isSubmenuExpanded && "submenu-expanded"
    )}" .disabled="${this.disabled}" ?aria-haspopup="${this.isSubmenu()}" ?aria-expanded="${isSubmenuExpanded ? true : false}">${this.type === "checkbox" ? html`<span part="checked-icon" class="${cx(
      "flex items-center justify-center grow-0 shrink-0 basis-auto",
      this.checked ? "visible" : "invisible"
    )}"><sd-6-22-0-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-6-22-0-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-6-22-0-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-6-22-0-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
  }
};
SdMenuItem.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-6-22-0-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-6-22-0-menu-color-icon variable replacing with sd-6-22-0-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-6-22-0-menu--disabled-color-icon variable replacing with sd-6-22-0-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-6-22-0-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-6-22-0-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-6-22-0-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-6-22-0-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
];
__decorateClass([
  query("slot:not([name])")
], SdMenuItem.prototype, "defaultSlot", 2);
__decorateClass([
  query('part="base"')
], SdMenuItem.prototype, "menuItem", 2);
__decorateClass([
  property()
], SdMenuItem.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdMenuItem.prototype, "checked", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdMenuItem.prototype, "disabled", 2);
__decorateClass([
  property()
], SdMenuItem.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdMenuItem.prototype, "chevron", 2);
__decorateClass([
  watch("checked")
], SdMenuItem.prototype, "handleCheckedChange", 1);
__decorateClass([
  watch("disabled")
], SdMenuItem.prototype, "handleDisabledChange", 1);
__decorateClass([
  watch("type")
], SdMenuItem.prototype, "handleTypeChange", 1);
SdMenuItem = __decorateClass([
  customElement("sd-6-22-0-menu-item")
], SdMenuItem);

export {
  SdMenuItem
};
