@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/menu-item/UUIMenuItemEvent.js

@@ -1,11 +1,17 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIMenuItemEvent = class _UUIMenuItemEvent extends UUIEvent {
+//#region src/components/menu-item/UUIMenuItemEvent.ts
+var UUIMenuItemEvent = class extends UUIEvent {
+	static {
+		this.SHOW_CHILDREN = "show-children";
+	}
+	static {
+		this.HIDE_CHILDREN = "hide-children";
+	}
+	static {
+		this.CLICK_LABEL = "click-label";
+	}
 };
-_UUIMenuItemEvent.SHOW_CHILDREN = "show-children";
-_UUIMenuItemEvent.HIDE_CHILDREN = "hide-children";
-_UUIMenuItemEvent.CLICK_LABEL = "click-label";
-let UUIMenuItemEvent = _UUIMenuItemEvent;
-export {
-  UUIMenuItemEvent
-};
-//# sourceMappingURL=UUIMenuItemEvent.js.map
+//#endregion
+export { UUIMenuItemEvent };
+
+//# sourceMappingURL=UUIMenuItemEvent.js.map

package/dist/components/menu-item/UUIMenuItemEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIMenuItemEvent.js","sources":["../../../src/components/menu-item/UUIMenuItemEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIMenuItemElement } from './menu-item.element.js';\n\nexport class UUIMenuItemEvent extends UUIEvent<{}, UUIMenuItemElement> {\n  public static readonly SHOW_CHILDREN = 'show-children';\n  public static readonly HIDE_CHILDREN = 'hide-children';\n\n  public static readonly CLICK_LABEL = 'click-label';\n}\n"],"names":[],"mappings":";AAGO,MAAM,oBAAN,MAAM,0BAAyB,SAAiC;AAKvE;AAJE,kBAAuB,gBAAgB;AACvC,kBAAuB,gBAAgB;AAEvC,kBAAuB,cAAc;AAJhC,IAAM,mBAAN;"}
+{"version":3,"file":"UUIMenuItemEvent.js","names":[],"sources":["../../../src/components/menu-item/UUIMenuItemEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIMenuItemElement } from './menu-item.element.js';\n\nexport class UUIMenuItemEvent extends UUIEvent<{}, UUIMenuItemElement> {\n  public static readonly SHOW_CHILDREN = 'show-children';\n  public static readonly HIDE_CHILDREN = 'hide-children';\n\n  public static readonly CLICK_LABEL = 'click-label';\n}\n"],"mappings":";;AAGA,IAAa,mBAAb,cAAsC,SAAiC;;uBAC9B;;;uBACA;;;qBAEF;;AACvC"}

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

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './menu-item.element.js';
 export * from './UUIMenuItemEvent.js';
-export { UUIMenuItemElement as default } from './menu-item.element.js';

package/dist/components/menu-item/menu-item.element.js

@@ -1,112 +1,118 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIMenuItemElement_instances, onLabelClicked_fn, renderExpandSymbol_fn;
-import { LitElement, html, css } from "lit";
-import { property, state } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { UUIMenuItemEvent } from "./UUIMenuItemEvent.js";
-import "../loader-bar/loader-bar.js";
-import "../symbol-expand/symbol-expand.js";
-import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
-import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUIMenuItemElement = class _UUIMenuItemElement extends SelectOnlyMixin(
-  SelectableMixin(ActiveMixin(LabelMixin("label", LitElement)))
-) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUIMenuItemElement_instances);
-    this.disabled = false;
-    this.showChildren = false;
-    this.hasChildren = false;
-    this.loading = false;
-    this.caretLabel = "Reveal the underlying items";
-    this.iconSlotHasContent = false;
-    this._labelButtonChanged = (label) => {
-      this.selectableTarget = label || this;
-    };
-    this._iconSlotChanged = (e) => {
-      this.iconSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
-    };
-    this._onCaretClicked = () => {
-      const eventName = this.showChildren ? UUIMenuItemEvent.HIDE_CHILDREN : UUIMenuItemEvent.SHOW_CHILDREN;
-      const event = new UUIMenuItemEvent(eventName, { cancelable: true });
-      this.dispatchEvent(event);
-      if (event.defaultPrevented) return;
-      this.showChildren = !this.showChildren;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute("role")) this.setAttribute("role", "menu");
-  }
-  async focus() {
-    await this.updateComplete;
-    this.shadowRoot?.querySelector("#label-button")?.focus?.();
-  }
-  _renderLabelInside() {
-    return html` <slot
+import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
+import "../loader-bar/loader-bar.js";
+import "../symbol-expand/symbol-expand.js";
+import { UUIMenuItemEvent } from "./UUIMenuItemEvent.js";
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { ref } from "lit/directives/ref.js";
+//#region src/components/menu-item/menu-item.element.ts
+/**
+*  @element uui-menu-item
+*  @cssprop --uui-menu-item-indent - set indentation of the menu items
+*  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure
+*  @cssprop --uui-menu-item-background-color-hover - background color when hovering
+*  @cssprop --uui-menu-item-color-hover - text color when hovering
+*  @cssprop --uui-menu-item-background-color-active - background color when active
+*  @cssprop --uui-menu-item-color-active - text color when active
+*  @cssprop --uui-menu-item-background-color-disabled - background color when disabled
+*  @cssprop --uui-menu-item-color-disabled - text color when disabled
+*  @cssprop --uui-menu-item-background-color-selected - background color when selected
+*  @cssprop --uui-menu-item-color-selected - text color when selected
+*  @cssprop --uui-menu-item-color-background-selected-hover - text color when selected
+*  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
+*  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
+*  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked
+*  @fires {UUISelectableEvent} selected - fires when the media card is selected
+*  @fires {UUISelectableEvent} deselected - fires when the media card is deselected
+*  @slot - nested menu items go here
+*  @slot icon - icon area
+*  @slot actions - actions area
+*  @slot label - area to place the label
+*/
+var UUIMenuItemElement = class extends SelectOnlyMixin(SelectableMixin(ActiveMixin(LabelMixin("label", LitElement)))) {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.showChildren = false;
+		this.hasChildren = false;
+		this.loading = false;
+		this.caretLabel = "Reveal the underlying items";
+		this.iconSlotHasContent = false;
+		this._labelButtonChanged = (label) => {
+			this.selectableTarget = label || this;
+		};
+		this._iconSlotChanged = (e) => {
+			this.iconSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+		};
+		this._onCaretClicked = () => {
+			const event = new UUIMenuItemEvent(this.showChildren ? UUIMenuItemEvent.HIDE_CHILDREN : UUIMenuItemEvent.SHOW_CHILDREN, { cancelable: true });
+			this.dispatchEvent(event);
+			if (event.defaultPrevented) return;
+			this.showChildren = !this.showChildren;
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute("role")) this.setAttribute("role", "menu");
+	}
+	async focus() {
+		await this.updateComplete;
+		this.shadowRoot?.querySelector("#label-button")?.focus?.();
+	}
+	#onLabelClicked() {
+		if (this.selectOnly) return;
+		const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);
+		this.dispatchEvent(event);
+	}
+	_renderLabelInside() {
+		return html` <slot
         name="icon"
         id="icon"
         style=${this.iconSlotHasContent ? "" : "display: none;"}
         @slotchange=${this._iconSlotChanged}></slot>
       ${this.renderLabel()}
       <slot name="badge" id="badge"> </slot>`;
-  }
-  _renderLabelAsAnchor() {
-    if (this.disabled) {
-      return html` <span id="label-button" ${ref(this._labelButtonChanged)}>
+	}
+	_renderLabelAsAnchor() {
+		if (this.disabled) return html` <span id="label-button" ${ref(this._labelButtonChanged)}>
         ${this._renderLabelInside()}
       </span>`;
-    }
-    return html` <a
+		return html` <a
       id="label-button"
       ${ref(this._labelButtonChanged)}
       href=${ifDefined(this.href)}
       target=${ifDefined(this.target || void 0)}
-      rel=${ifDefined(
-      this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0)
-    )}
-      @click=${__privateMethod(this, _UUIMenuItemElement_instances, onLabelClicked_fn)}
+      rel=${ifDefined(this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0))}
+      @click=${this.#onLabelClicked}
       ?disabled=${this.disabled}
       aria-label="${this.label}">
       ${this._renderLabelInside()}
     </a>`;
-  }
-  _renderLabelAsButton() {
-    return html` <button
+	}
+	_renderLabelAsButton() {
+		return html` <button
       id="label-button"
       ${ref(this._labelButtonChanged)}
-      @click=${__privateMethod(this, _UUIMenuItemElement_instances, onLabelClicked_fn)}
+      @click=${this.#onLabelClicked}
       ?disabled=${this.disabled}
       aria-label="${this.label}">
       ${this._renderLabelInside()}
     </button>`;
-  }
-  render() {
-    return html`
+	}
+	render() {
+		return html`
       <div id="menu-item" aria-label="menuitem" role="menuitem">
         <div id="label-button-background"></div>
         ${this.hasChildren ? html`<button
               id="caret-button"
               aria-label=${this.caretLabel}
               @click=${this._onCaretClicked}>
-              ${__privateMethod(this, _UUIMenuItemElement_instances, renderExpandSymbol_fn).call(this)}
+              ${this.#renderExpandSymbol()}
             </button>` : ""}
         ${this.href && this.selectOnly !== true && this.selectable !== true ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}
 
@@ -115,27 +121,18 @@ const _UUIMenuItemElement = class _UUIMenuItemElement extends SelectOnlyMixin(
       </div>
       ${this.showChildren ? html`<slot></slot>` : ""}
     `;
-  }
-};
-_UUIMenuItemElement_instances = new WeakSet();
-onLabelClicked_fn = function() {
-  if (this.selectOnly) return;
-  const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);
-  this.dispatchEvent(event);
-};
-renderExpandSymbol_fn = function() {
-  if (this.renderExpandSymbol) {
-    const result = this.renderExpandSymbol();
-    if (result) {
-      return result;
-    }
-  }
-  return html`<uui-symbol-expand
+	}
+	#renderExpandSymbol() {
+		if (this.renderExpandSymbol) {
+			const result = this.renderExpandSymbol();
+			if (result) return result;
+		}
+		return html`<uui-symbol-expand
       aria-hidden="true"
       ?open=${this.showChildren}></uui-symbol-expand>`;
-};
-_UUIMenuItemElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         box-sizing: border-box;
         display: block;
@@ -472,7 +469,8 @@ _UUIMenuItemElement.styles = [
         border-radius: calc(var(--uui-border-radius) - 1px);
         position: absolute;
         inset: 3px 3px 3px -5px;
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       :host([select-mode='highlight']) #caret-button:focus-visible {
@@ -485,7 +483,8 @@ _UUIMenuItemElement.styles = [
         position: absolute;
         inset: 3px;
         border-radius: calc(var(--uui-border-radius) - 1px);
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       /** Slots */
@@ -516,43 +515,41 @@ _UUIMenuItemElement.styles = [
         opacity: 0;
         animation: fadeIn 120ms ease-in 60ms forwards;
       }
-    `
-];
-let UUIMenuItemElement = _UUIMenuItemElement;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIMenuItemElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "show-children" })
-], UUIMenuItemElement.prototype, "showChildren");
-__decorateClass([
-  property({ type: Boolean, attribute: "has-children" })
-], UUIMenuItemElement.prototype, "hasChildren");
-__decorateClass([
-  property({ type: Boolean, attribute: "loading" })
-], UUIMenuItemElement.prototype, "loading");
-__decorateClass([
-  property({ type: String })
-], UUIMenuItemElement.prototype, "href");
-__decorateClass([
-  property({ type: String })
-], UUIMenuItemElement.prototype, "target");
-__decorateClass([
-  property({ type: String })
-], UUIMenuItemElement.prototype, "rel");
-__decorateClass([
-  property({ type: String, attribute: "select-mode", reflect: true })
-], UUIMenuItemElement.prototype, "selectMode");
-__decorateClass([
-  property({ type: String, attribute: "caret-label" })
-], UUIMenuItemElement.prototype, "caretLabel");
-__decorateClass([
-  property({ attribute: false })
-], UUIMenuItemElement.prototype, "renderExpandSymbol");
-__decorateClass([
-  state()
-], UUIMenuItemElement.prototype, "iconSlotHasContent");
-export {
-  UUIMenuItemElement
+    `];
+	}
 };
-//# sourceMappingURL=menu-item.element.js.map
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIMenuItemElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-children"
+})], UUIMenuItemElement.prototype, "showChildren", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "has-children"
+})], UUIMenuItemElement.prototype, "hasChildren", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "loading"
+})], UUIMenuItemElement.prototype, "loading", void 0);
+__decorate([property({ type: String })], UUIMenuItemElement.prototype, "href", void 0);
+__decorate([property({ type: String })], UUIMenuItemElement.prototype, "target", void 0);
+__decorate([property({ type: String })], UUIMenuItemElement.prototype, "rel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "select-mode",
+	reflect: true
+})], UUIMenuItemElement.prototype, "selectMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: "caret-label"
+})], UUIMenuItemElement.prototype, "caretLabel", void 0);
+__decorate([property({ attribute: false })], UUIMenuItemElement.prototype, "renderExpandSymbol", void 0);
+__decorate([state()], UUIMenuItemElement.prototype, "iconSlotHasContent", void 0);
+//#endregion
+export { UUIMenuItemElement };
+
+//# sourceMappingURL=menu-item.element.js.map

package/dist/components/menu-item/menu-item.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.element.js","sources":["../../../src/components/menu-item/menu-item.element.ts"],"sourcesContent":["import {\n  ActiveMixin,\n  LabelMixin,\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ref } from 'lit/directives/ref.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { UUIMenuItemEvent } from './UUIMenuItemEvent.js';\n\nimport '../loader-bar/loader-bar.js';\nimport '../symbol-expand/symbol-expand.js';\n\n/**\n *  @element uui-menu-item\n *  @cssprop --uui-menu-item-indent - set indentation of the menu items\n *  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure\n *  @cssprop --uui-menu-item-background-color-hover - background color when hovering\n *  @cssprop --uui-menu-item-color-hover - text color when hovering\n *  @cssprop --uui-menu-item-background-color-active - background color when active\n *  @cssprop --uui-menu-item-color-active - text color when active\n *  @cssprop --uui-menu-item-background-color-disabled - background color when disabled\n *  @cssprop --uui-menu-item-color-disabled - text color when disabled\n *  @cssprop --uui-menu-item-background-color-selected - background color when selected\n *  @cssprop --uui-menu-item-color-selected - text color when selected\n *  @cssprop --uui-menu-item-color-background-selected-hover - text color when selected\n *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items\n *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items\n *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked\n *  @fires {UUISelectableEvent} selected - fires when the media card is selected\n *  @fires {UUISelectableEvent} deselected - fires when the media card is deselected\n *  @slot - nested menu items go here\n *  @slot icon - icon area\n *  @slot actions - actions area\n *  @slot label - area to place the label\n */\nexport class UUIMenuItemElement extends SelectOnlyMixin(\n  SelectableMixin(ActiveMixin(LabelMixin('label', LitElement))),\n) {\n  /**\n   * Disables the menu item, changes the looks of it and prevents it from emitting the click event\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Controls if nested items should be shown.\n   * @type {boolean}\n   * @attr show-children\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-children' })\n  public showChildren = false;\n\n  /**\n   * Shows/hides the caret.\n   * @type {boolean}\n   * @attr has-children\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'has-children' })\n  public hasChildren = false;\n\n  /**\n   * Shows/hides the loading indicator\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'loading' })\n  public loading = false;\n\n  /**\n   * Set an href, this will turns the label into a anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  /**\n   * Sets the selection mode.\n   * @type {string}\n   * @attr select-mode\n   * @default undefined\n   */\n  @property({ type: String, attribute: 'select-mode', reflect: true })\n  public selectMode?: 'highlight' | 'persisting';\n\n  /**\n   * Sets the aria-label for the caret button.\n   * @remark Only used when the menu item has children.\n   * @attr caret-label\n   * @default 'Reveal the underlying items'\n   */\n  @property({ type: String, attribute: 'caret-label' })\n  public caretLabel = 'Reveal the underlying items';\n\n  /**\n   * Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.\n   */\n  @property({ attribute: false })\n  public renderExpandSymbol?: () => Element | TemplateResult<1> | undefined;\n\n  @state()\n  private iconSlotHasContent = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'menu');\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this.shadowRoot\n      ?.querySelector<\n        HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement\n      >('#label-button')\n      ?.focus?.();\n  }\n\n  private readonly _labelButtonChanged = (label?: Element | undefined) => {\n    this.selectableTarget = label || this;\n  };\n\n  private readonly _iconSlotChanged = (e: any): void => {\n    this.iconSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private readonly _onCaretClicked = () => {\n    const eventName = this.showChildren\n      ? UUIMenuItemEvent.HIDE_CHILDREN\n      : UUIMenuItemEvent.SHOW_CHILDREN;\n    const event = new UUIMenuItemEvent(eventName, { cancelable: true });\n    this.dispatchEvent(event);\n\n    if (event.defaultPrevented) return;\n\n    this.showChildren = !this.showChildren;\n  };\n\n  #onLabelClicked() {\n    if (this.selectOnly) return;\n    const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);\n    this.dispatchEvent(event);\n  }\n\n  private _renderLabelInside() {\n    return html` <slot\n        name=\"icon\"\n        id=\"icon\"\n        style=${this.iconSlotHasContent ? '' : 'display: none;'}\n        @slotchange=${this._iconSlotChanged}></slot>\n      ${this.renderLabel()}\n      <slot name=\"badge\" id=\"badge\"> </slot>`;\n  }\n\n  private _renderLabelAsAnchor() {\n    if (this.disabled) {\n      return html` <span id=\"label-button\" ${ref(this._labelButtonChanged)}>\n        ${this._renderLabelInside()}\n      </span>`;\n    }\n    return html` <a\n      id=\"label-button\"\n      ${ref(this._labelButtonChanged)}\n      href=${ifDefined(this.href)}\n      target=${ifDefined(this.target || undefined)}\n      rel=${ifDefined(\n        this.rel ||\n          (this.target === '_blank' ? 'noopener noreferrer' : undefined),\n      )}\n      @click=${this.#onLabelClicked}\n      ?disabled=${this.disabled}\n      aria-label=\"${this.label}\">\n      ${this._renderLabelInside()}\n    </a>`;\n  }\n\n  private _renderLabelAsButton() {\n    return html` <button\n      id=\"label-button\"\n      ${ref(this._labelButtonChanged)}\n      @click=${this.#onLabelClicked}\n      ?disabled=${this.disabled}\n      aria-label=\"${this.label}\">\n      ${this._renderLabelInside()}\n    </button>`;\n  }\n\n  render() {\n    return html`\n      <div id=\"menu-item\" aria-label=\"menuitem\" role=\"menuitem\">\n        <div id=\"label-button-background\"></div>\n        ${this.hasChildren\n          ? html`<button\n              id=\"caret-button\"\n              aria-label=${this.caretLabel}\n              @click=${this._onCaretClicked}>\n              ${this.#renderExpandSymbol()}\n            </button>`\n          : ''}\n        ${this.href && this.selectOnly !== true && this.selectable !== true\n          ? this._renderLabelAsAnchor()\n          : this._renderLabelAsButton()}\n\n        <slot id=\"actions-container\" name=\"actions\"></slot>\n        ${this.loading\n          ? html`<uui-loader-bar id=\"loader\"></uui-loader-bar>`\n          : ''}\n      </div>\n      ${this.showChildren ? html`<slot></slot>` : ''}\n    `;\n  }\n\n  #renderExpandSymbol() {\n    if (this.renderExpandSymbol) {\n      const result = this.renderExpandSymbol();\n      if (result) {\n        return result;\n      }\n    }\n\n    return html`<uui-symbol-expand\n      aria-hidden=\"true\"\n      ?open=${this.showChildren}></uui-symbol-expand>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        box-sizing: border-box;\n        display: block;\n        --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);\n        user-select: none;\n        --flat-structure-reversed: calc(\n          1 - var(--uui-menu-item-flat-structure, 0)\n        );\n      }\n\n      #menu-item {\n        position: relative;\n        padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));\n        display: grid;\n        grid-template-columns:\n          calc(var(--flat-structure-reversed) * var(--uui-size-8))\n          1fr;\n        grid-template-rows: 1fr;\n        white-space: nowrap;\n      }\n\n      /** Not active, not selected, not disabled: */\n      :host(:not([active], [selected], [disabled], [select-mode='highlight']))\n        #menu-item:has(#label-button:hover)\n        #label-button-background {\n        background-color: var(\n          --uui-menu-item-background-color-hover,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n      :host(:not([active], [selected], [disabled]))\n        #menu-item\n        #label-button:hover,\n      :host(:not([active], [selected])) #menu-item #caret-button:hover {\n        color: var(\n          --uui-menu-item-color-hover,\n          var(--uui-color-interactive-emphasis)\n        );\n      }\n\n      /** Active */\n      :host([active]) #label-button,\n      :host([active]) #actions-container,\n      :host([active]) #caret-button {\n        color: var(\n          --uui-menu-item-color-active,\n          var(--uui-color-current-contrast)\n        );\n      }\n      :host([active]) #label-button-background {\n        background-color: var(\n          --uui-menu-item-background-color-active,\n          var(--uui-color-current)\n        );\n      }\n      :host([active])\n        #menu-item:has(#label-button:hover)\n        #label-button-background,\n      :host([active]) #caret-button:hover {\n        background-color: var(\n          --uui-menu-item-background-color-active-hover,\n          var(--uui-color-current-emphasis)\n        );\n      }\n\n      /** Disabled */\n      :host([disabled]) #menu-item {\n        background-color: var(\n          --uui-menu-item-background-color-disabled,\n          var(--uui-color-disabled)\n        );\n      }\n\n      /** Selected */\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #label-button,\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #actions-container,\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #caret-button {\n        color: var(\n          --uui-menu-item-color-selected,\n          var(--uui-color-selected-contrast)\n        );\n      }\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #label-button-background {\n        background-color: var(\n          --uui-menu-item-background-color-selected,\n          var(--uui-color-selected)\n        );\n      }\n      /** Selected, not highlight mode */\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background,\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #caret-button:hover {\n        background-color: var(\n          --uui-menu-item-background-color-selected-hover,\n          var(--uui-color-selected-emphasis)\n        );\n      }\n\n      /** highlight mode, default */\n      :host([select-mode='highlight']:not([disabled], [active], [selectable]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background {\n        border-radius: var(--uui-border-radius);\n        background-color: var(\n          --uui-menu-item-background-color-highlight,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n\n      /** highlight mode, active */\n      :host([select-mode='highlight'][active]:not([disabled]))\n        #menu-item\n        #label-button-background {\n        border-radius: var(--uui-border-radius);\n      }\n\n      /** highlight mode, active & selected */\n      :host([select-mode='highlight'][active][selected]:not([disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background {\n        border-radius: var(--uui-border-radius);\n        background-color: var(\n          --uui-menu-item-background-color-highlight-active-selected,\n          var(--uui-color-current-emphasis)\n        );\n      }\n\n      /** highlight mode, selected */\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #label-button,\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #actions-container,\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #caret-button {\n        color: var(\n          --uui-menu-item-color-highlight-selected,\n          var(--uui-color-interactive)\n        );\n      }\n      :host([select-mode='highlight'][selectable][selected]:not([disabled]))\n        #menu-item\n        #label-button:hover {\n        color: var(\n          --uui-menu-item-background-color-highlight-selectable-selected,\n          var(--uui-color-interactive-emphasis)\n        );\n      }\n\n      /** highlight mode, selected, selectable caret hover */\n      :host([selected][selectable][select-mode='highlight']:not([active]))\n        #menu-item\n        #caret-button:hover {\n        border-radius: var(--uui-border-radius);\n        background-color: var(\n          --uui-menu-item-background-color-highlight-selectable-selected,\n          var(--uui-color-surface-emphasis)\n        );\n        color: var(\n          --uui-menu-item-color-highlight-selectable-selected,\n          var(--uui-color-interactive-emphasis)\n        );\n      }\n\n      /** Highlight borders */\n\n      :host([select-mode='highlight']:not([disabled]))\n        #menu-item\n        #label-button-background::after {\n        border-radius: var(--uui-border-radius);\n        position: absolute;\n        content: '';\n        inset: 1px;\n        border: 2px solid\n          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));\n        opacity: 0;\n      }\n\n      :host([select-mode='highlight'][selectable][selected]:not([disabled]))\n        #menu-item\n        #caret-button:hover::after {\n        border-top-left-radius: var(--uui-border-radius);\n        border-bottom-left-radius: var(--uui-border-radius);\n        position: absolute;\n        content: '';\n        inset: 1px 0 1px 1px;\n        border: 2px solid\n          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));\n        border-right: none;\n      }\n\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #label-button-background::after {\n        opacity: 1;\n      }\n\n      :host([select-mode='highlight'][selectable]:not([disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background::after {\n        opacity: 0.33;\n      }\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background::after {\n        opacity: 0.66;\n      }\n\n      /** Buttons */\n\n      :host([disabled]) #label-button {\n        cursor: default;\n        opacity: 0.5;\n      }\n\n      button {\n        display: inline-flex;\n        align-items: center;\n\n        font-family: inherit;\n        font-size: inherit;\n\n        padding: 0;\n        text-align: left;\n        border: none;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n        min-height: var(--uui-size-12);\n      }\n\n      #label-button {\n        position: relative;\n        flex-grow: 1;\n        grid-column-start: 2;\n        white-space: nowrap;\n        overflow: hidden;\n        padding-right: var(--uui-size-space-3);\n        padding-left: calc(\n          var(--uui-menu-item-flat-structure) * var(--uui-size-space-3)\n        );\n        display: inline-flex;\n        align-items: center;\n        text-decoration: none;\n        color: currentColor;\n        min-height: var(--uui-size-12);\n        font-weight: inherit;\n      }\n\n      #label-button .label {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      span#label-button {\n        pointer-events: none; /* avoid hovering state on this. */\n      }\n\n      #caret-button {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: end;\n        padding-inline-end: 3px;\n        color: var(--uui-color-interactive);\n      }\n\n      #label-button-background {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        border-radius: var(\n          --uui-menu-item-border-radius,\n          var(--uui-border-radius)\n        );\n      }\n\n      #actions-container {\n        opacity: 0;\n        width: 0;\n        grid-column-start: 3;\n        overflow: hidden;\n      }\n      :host(:not([disabled])) #menu-item:hover #actions-container,\n      :host(:not([disabled])) #menu-item:focus #actions-container,\n      :host(:not([disabled])) #menu-item:focus-within #actions-container {\n        opacity: 1;\n        width: auto;\n      }\n\n      #loader {\n        position: absolute;\n        width: 100%;\n        bottom: 0;\n      }\n\n      #icon {\n        display: inline-flex;\n        margin-right: var(--uui-size-2);\n      }\n      :host([selected]:not([select-mode='highlight'], [disabled])) #icon {\n        --uui-icon-color-overwrite: currentColor;\n      }\n\n      #badge {\n        font-size: 12px;\n        --uui-badge-position: relative;\n        --uui-badge-position: auto;\n        display: block;\n        margin-left: 6px;\n      }\n\n      /** Focus styling */\n\n      :host([select-mode='highlight']) #label-button:focus-visible {\n        outline: none;\n        overflow: initial;\n      }\n\n      :host([select-mode='highlight']) #label-button:focus-visible::after {\n        content: '';\n        border-radius: calc(var(--uui-border-radius) - 1px);\n        position: absolute;\n        inset: 3px 3px 3px -5px;\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host([select-mode='highlight']) #caret-button:focus-visible {\n        outline: none;\n        overflow: initial;\n      }\n\n      :host([select-mode='highlight']) #caret-button:focus-visible::after {\n        content: '';\n        position: absolute;\n        inset: 3px;\n        border-radius: calc(var(--uui-border-radius) - 1px);\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      /** Slots */\n\n      slot:not([name]) {\n        position: relative;\n        display: block;\n        width: 100%;\n      }\n      slot:not([name]) {\n        --uui-menu-item-indent: var(--uui-menu-item-child-indent);\n      }\n\n      slot[name='actions'] {\n        display: flex;\n        align-items: center;\n        --uui-button-height: calc(var(--uui-size-base-unit) * 4);\n        margin-right: var(--uui-size-base-unit);\n      }\n\n      @keyframes fadeIn {\n        100% {\n          opacity: 1;\n        }\n      }\n\n      uui-loader-bar {\n        opacity: 0;\n        animation: fadeIn 120ms ease-in 60ms forwards;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAM,sBAAN,MAAM,4BAA2B;AAAA,EACtC,gBAAgB,YAAY,WAAW,SAAS,UAAU,CAAC,CAAC;AAC9D,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAUL,SAAO,WAAW;AASlB,SAAO,eAAe;AAStB,SAAO,cAAc;AASrB,SAAO,UAAU;AA6CjB,SAAO,aAAa;AASpB,SAAQ,qBAAqB;AAgB7B,SAAiB,sBAAsB,CAAC,UAAgC;AACtE,WAAK,mBAAmB,SAAS;AAAA,IACnC;AAEA,SAAiB,mBAAmB,CAAC,MAAiB;AACpD,WAAK,qBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS;AAAA,IAC5E;AAEA,SAAiB,kBAAkB,MAAM;AACvC,YAAM,YAAY,KAAK,eACnB,iBAAiB,gBACjB,iBAAiB;AACrB,YAAM,QAAQ,IAAI,iBAAiB,WAAW,EAAE,YAAY,MAAM;AAClE,WAAK,cAAc,KAAK;AAExB,UAAI,MAAM,iBAAkB;AAE5B,WAAK,eAAe,CAAC,KAAK;AAAA,IAC5B;AAAA,EAAA;AAAA,EAjCA,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,aAAa,MAAM,EAAG,MAAK,aAAa,QAAQ,MAAM;AAAA,EAClE;AAAA,EAEA,MAAM,QAAQ;AACZ,UAAM,KAAK;AACX,SAAK,YACD,cAEA,eAAe,GACf,QAAA;AAAA,EACN;AAAA,EA6BQ,qBAAqB;AAC3B,WAAO;AAAA;AAAA;AAAA,gBAGK,KAAK,qBAAqB,KAAK,gBAAgB;AAAA,sBACzC,KAAK,gBAAgB;AAAA,QACnC,KAAK,aAAa;AAAA;AAAA,EAExB;AAAA,EAEQ,uBAAuB;AAC7B,QAAI,KAAK,UAAU;AACjB,aAAO,gCAAgC,IAAI,KAAK,mBAAmB,CAAC;AAAA,UAChE,KAAK,oBAAoB;AAAA;AAAA,IAE/B;AACA,WAAO;AAAA;AAAA,QAEH,IAAI,KAAK,mBAAmB,CAAC;AAAA,aACxB,UAAU,KAAK,IAAI,CAAC;AAAA,eAClB,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,YACtC;AAAA,MACJ,KAAK,QACF,KAAK,WAAW,WAAW,wBAAwB;AAAA,IAAA,CACvD;AAAA,eACQ,sBAAK,iDAAe;AAAA,kBACjB,KAAK,QAAQ;AAAA,oBACX,KAAK,KAAK;AAAA,QACtB,KAAK,oBAAoB;AAAA;AAAA,EAE/B;AAAA,EAEQ,uBAAuB;AAC7B,WAAO;AAAA;AAAA,QAEH,IAAI,KAAK,mBAAmB,CAAC;AAAA,eACtB,sBAAK,iDAAe;AAAA,kBACjB,KAAK,QAAQ;AAAA,oBACX,KAAK,KAAK;AAAA,QACtB,KAAK,oBAAoB;AAAA;AAAA,EAE/B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,UAGD,KAAK,cACH;AAAA;AAAA,2BAEe,KAAK,UAAU;AAAA,uBACnB,KAAK,eAAe;AAAA,gBAC3B,sBAAK,sDAAL,UAA0B;AAAA,yBAE9B,EAAE;AAAA,UACJ,KAAK,QAAQ,KAAK,eAAe,QAAQ,KAAK,eAAe,OAC3D,KAAK,qBAAA,IACL,KAAK,sBAAsB;AAAA;AAAA;AAAA,UAG7B,KAAK,UACH,sDACA,EAAE;AAAA;AAAA,QAEN,KAAK,eAAe,sBAAsB,EAAE;AAAA;AAAA,EAElD;AA+YF;AAvlBO;AAgIL,oBAAA,WAAkB;AAChB,MAAI,KAAK,WAAY;AACrB,QAAM,QAAQ,IAAI,iBAAiB,iBAAiB,WAAW;AAC/D,OAAK,cAAc,KAAK;AAC1B;AAsEA,wBAAA,WAAsB;AACpB,MAAI,KAAK,oBAAoB;AAC3B,UAAM,SAAS,KAAK,mBAAA;AACpB,QAAI,QAAQ;AACV,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AAAA;AAAA,cAEG,KAAK,YAAY;AAC7B;AAEA,oBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxNG,IAAM,qBAAN;AAUE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAT/B,mBAUJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB;AAAA,GAlB3D,mBAmBJ,WAAA,cAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAAA,GA3B3C,mBA4BJ,WAAA,aAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GApCtC,mBAqCJ,WAAA,SAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Cf,mBA8CJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtDf,mBAuDJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Df,mBAgEJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,SAAS,MAAM;AAAA,GAxExD,mBAyEJ,WAAA,YAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GAjFzC,mBAkFJ,WAAA,YAAA;AAMA,gBAAA;AAAA,EADN,SAAS,EAAE,WAAW,MAAA,CAAO;AAAA,GAvFnB,mBAwFJ,WAAA,oBAAA;AAGC,gBAAA;AAAA,EADP,MAAA;AAAM,GA1FI,mBA2FH,WAAA,oBAAA;"}
+{"version":3,"file":"menu-item.element.js","names":["#onLabelClicked","#renderExpandSymbol"],"sources":["../../../src/components/menu-item/menu-item.element.ts"],"sourcesContent":["import {\n  ActiveMixin,\n  LabelMixin,\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ref } from 'lit/directives/ref.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { UUIMenuItemEvent } from './UUIMenuItemEvent.js';\n\nimport '../loader-bar/loader-bar.js';\nimport '../symbol-expand/symbol-expand.js';\n\n/**\n *  @element uui-menu-item\n *  @cssprop --uui-menu-item-indent - set indentation of the menu items\n *  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure\n *  @cssprop --uui-menu-item-background-color-hover - background color when hovering\n *  @cssprop --uui-menu-item-color-hover - text color when hovering\n *  @cssprop --uui-menu-item-background-color-active - background color when active\n *  @cssprop --uui-menu-item-color-active - text color when active\n *  @cssprop --uui-menu-item-background-color-disabled - background color when disabled\n *  @cssprop --uui-menu-item-color-disabled - text color when disabled\n *  @cssprop --uui-menu-item-background-color-selected - background color when selected\n *  @cssprop --uui-menu-item-color-selected - text color when selected\n *  @cssprop --uui-menu-item-color-background-selected-hover - text color when selected\n *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items\n *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items\n *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked\n *  @fires {UUISelectableEvent} selected - fires when the media card is selected\n *  @fires {UUISelectableEvent} deselected - fires when the media card is deselected\n *  @slot - nested menu items go here\n *  @slot icon - icon area\n *  @slot actions - actions area\n *  @slot label - area to place the label\n */\nexport class UUIMenuItemElement extends SelectOnlyMixin(\n  SelectableMixin(ActiveMixin(LabelMixin('label', LitElement))),\n) {\n  /**\n   * Disables the menu item, changes the looks of it and prevents it from emitting the click event\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Controls if nested items should be shown.\n   * @type {boolean}\n   * @attr show-children\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-children' })\n  public showChildren = false;\n\n  /**\n   * Shows/hides the caret.\n   * @type {boolean}\n   * @attr has-children\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'has-children' })\n  public hasChildren = false;\n\n  /**\n   * Shows/hides the loading indicator\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'loading' })\n  public loading = false;\n\n  /**\n   * Set an href, this will turns the label into a anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  /**\n   * Sets the selection mode.\n   * @type {string}\n   * @attr select-mode\n   * @default undefined\n   */\n  @property({ type: String, attribute: 'select-mode', reflect: true })\n  public selectMode?: 'highlight' | 'persisting';\n\n  /**\n   * Sets the aria-label for the caret button.\n   * @remark Only used when the menu item has children.\n   * @attr caret-label\n   * @default 'Reveal the underlying items'\n   */\n  @property({ type: String, attribute: 'caret-label' })\n  public caretLabel = 'Reveal the underlying items';\n\n  /**\n   * Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.\n   */\n  @property({ attribute: false })\n  public renderExpandSymbol?: () => Element | TemplateResult<1> | undefined;\n\n  @state()\n  private iconSlotHasContent = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'menu');\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this.shadowRoot\n      ?.querySelector<\n        HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement\n      >('#label-button')\n      ?.focus?.();\n  }\n\n  private readonly _labelButtonChanged = (label?: Element | undefined) => {\n    this.selectableTarget = label || this;\n  };\n\n  private readonly _iconSlotChanged = (e: any): void => {\n    this.iconSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private readonly _onCaretClicked = () => {\n    const eventName = this.showChildren\n      ? UUIMenuItemEvent.HIDE_CHILDREN\n      : UUIMenuItemEvent.SHOW_CHILDREN;\n    const event = new UUIMenuItemEvent(eventName, { cancelable: true });\n    this.dispatchEvent(event);\n\n    if (event.defaultPrevented) return;\n\n    this.showChildren = !this.showChildren;\n  };\n\n  #onLabelClicked() {\n    if (this.selectOnly) return;\n    const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);\n    this.dispatchEvent(event);\n  }\n\n  private _renderLabelInside() {\n    return html` <slot\n        name=\"icon\"\n        id=\"icon\"\n        style=${this.iconSlotHasContent ? '' : 'display: none;'}\n        @slotchange=${this._iconSlotChanged}></slot>\n      ${this.renderLabel()}\n      <slot name=\"badge\" id=\"badge\"> </slot>`;\n  }\n\n  private _renderLabelAsAnchor() {\n    if (this.disabled) {\n      return html` <span id=\"label-button\" ${ref(this._labelButtonChanged)}>\n        ${this._renderLabelInside()}\n      </span>`;\n    }\n    return html` <a\n      id=\"label-button\"\n      ${ref(this._labelButtonChanged)}\n      href=${ifDefined(this.href)}\n      target=${ifDefined(this.target || undefined)}\n      rel=${ifDefined(\n        this.rel ||\n          (this.target === '_blank' ? 'noopener noreferrer' : undefined),\n      )}\n      @click=${this.#onLabelClicked}\n      ?disabled=${this.disabled}\n      aria-label=\"${this.label}\">\n      ${this._renderLabelInside()}\n    </a>`;\n  }\n\n  private _renderLabelAsButton() {\n    return html` <button\n      id=\"label-button\"\n      ${ref(this._labelButtonChanged)}\n      @click=${this.#onLabelClicked}\n      ?disabled=${this.disabled}\n      aria-label=\"${this.label}\">\n      ${this._renderLabelInside()}\n    </button>`;\n  }\n\n  render() {\n    return html`\n      <div id=\"menu-item\" aria-label=\"menuitem\" role=\"menuitem\">\n        <div id=\"label-button-background\"></div>\n        ${this.hasChildren\n          ? html`<button\n              id=\"caret-button\"\n              aria-label=${this.caretLabel}\n              @click=${this._onCaretClicked}>\n              ${this.#renderExpandSymbol()}\n            </button>`\n          : ''}\n        ${this.href && this.selectOnly !== true && this.selectable !== true\n          ? this._renderLabelAsAnchor()\n          : this._renderLabelAsButton()}\n\n        <slot id=\"actions-container\" name=\"actions\"></slot>\n        ${this.loading\n          ? html`<uui-loader-bar id=\"loader\"></uui-loader-bar>`\n          : ''}\n      </div>\n      ${this.showChildren ? html`<slot></slot>` : ''}\n    `;\n  }\n\n  #renderExpandSymbol() {\n    if (this.renderExpandSymbol) {\n      const result = this.renderExpandSymbol();\n      if (result) {\n        return result;\n      }\n    }\n\n    return html`<uui-symbol-expand\n      aria-hidden=\"true\"\n      ?open=${this.showChildren}></uui-symbol-expand>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        box-sizing: border-box;\n        display: block;\n        --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);\n        user-select: none;\n        --flat-structure-reversed: calc(\n          1 - var(--uui-menu-item-flat-structure, 0)\n        );\n      }\n\n      #menu-item {\n        position: relative;\n        padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));\n        display: grid;\n        grid-template-columns:\n          calc(var(--flat-structure-reversed) * var(--uui-size-8))\n          1fr;\n        grid-template-rows: 1fr;\n        white-space: nowrap;\n      }\n\n      /** Not active, not selected, not disabled: */\n      :host(:not([active], [selected], [disabled], [select-mode='highlight']))\n        #menu-item:has(#label-button:hover)\n        #label-button-background {\n        background-color: var(\n          --uui-menu-item-background-color-hover,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n      :host(:not([active], [selected], [disabled]))\n        #menu-item\n        #label-button:hover,\n      :host(:not([active], [selected])) #menu-item #caret-button:hover {\n        color: var(\n          --uui-menu-item-color-hover,\n          var(--uui-color-interactive-emphasis)\n        );\n      }\n\n      /** Active */\n      :host([active]) #label-button,\n      :host([active]) #actions-container,\n      :host([active]) #caret-button {\n        color: var(\n          --uui-menu-item-color-active,\n          var(--uui-color-current-contrast)\n        );\n      }\n      :host([active]) #label-button-background {\n        background-color: var(\n          --uui-menu-item-background-color-active,\n          var(--uui-color-current)\n        );\n      }\n      :host([active])\n        #menu-item:has(#label-button:hover)\n        #label-button-background,\n      :host([active]) #caret-button:hover {\n        background-color: var(\n          --uui-menu-item-background-color-active-hover,\n          var(--uui-color-current-emphasis)\n        );\n      }\n\n      /** Disabled */\n      :host([disabled]) #menu-item {\n        background-color: var(\n          --uui-menu-item-background-color-disabled,\n          var(--uui-color-disabled)\n        );\n      }\n\n      /** Selected */\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #label-button,\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #actions-container,\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #caret-button {\n        color: var(\n          --uui-menu-item-color-selected,\n          var(--uui-color-selected-contrast)\n        );\n      }\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #label-button-background {\n        background-color: var(\n          --uui-menu-item-background-color-selected,\n          var(--uui-color-selected)\n        );\n      }\n      /** Selected, not highlight mode */\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background,\n      :host([selected]:not([select-mode='highlight'], [disabled]))\n        #caret-button:hover {\n        background-color: var(\n          --uui-menu-item-background-color-selected-hover,\n          var(--uui-color-selected-emphasis)\n        );\n      }\n\n      /** highlight mode, default */\n      :host([select-mode='highlight']:not([disabled], [active], [selectable]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background {\n        border-radius: var(--uui-border-radius);\n        background-color: var(\n          --uui-menu-item-background-color-highlight,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n\n      /** highlight mode, active */\n      :host([select-mode='highlight'][active]:not([disabled]))\n        #menu-item\n        #label-button-background {\n        border-radius: var(--uui-border-radius);\n      }\n\n      /** highlight mode, active & selected */\n      :host([select-mode='highlight'][active][selected]:not([disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background {\n        border-radius: var(--uui-border-radius);\n        background-color: var(\n          --uui-menu-item-background-color-highlight-active-selected,\n          var(--uui-color-current-emphasis)\n        );\n      }\n\n      /** highlight mode, selected */\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #label-button,\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #actions-container,\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #caret-button {\n        color: var(\n          --uui-menu-item-color-highlight-selected,\n          var(--uui-color-interactive)\n        );\n      }\n      :host([select-mode='highlight'][selectable][selected]:not([disabled]))\n        #menu-item\n        #label-button:hover {\n        color: var(\n          --uui-menu-item-background-color-highlight-selectable-selected,\n          var(--uui-color-interactive-emphasis)\n        );\n      }\n\n      /** highlight mode, selected, selectable caret hover */\n      :host([selected][selectable][select-mode='highlight']:not([active]))\n        #menu-item\n        #caret-button:hover {\n        border-radius: var(--uui-border-radius);\n        background-color: var(\n          --uui-menu-item-background-color-highlight-selectable-selected,\n          var(--uui-color-surface-emphasis)\n        );\n        color: var(\n          --uui-menu-item-color-highlight-selectable-selected,\n          var(--uui-color-interactive-emphasis)\n        );\n      }\n\n      /** Highlight borders */\n\n      :host([select-mode='highlight']:not([disabled]))\n        #menu-item\n        #label-button-background::after {\n        border-radius: var(--uui-border-radius);\n        position: absolute;\n        content: '';\n        inset: 1px;\n        border: 2px solid\n          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));\n        opacity: 0;\n      }\n\n      :host([select-mode='highlight'][selectable][selected]:not([disabled]))\n        #menu-item\n        #caret-button:hover::after {\n        border-top-left-radius: var(--uui-border-radius);\n        border-bottom-left-radius: var(--uui-border-radius);\n        position: absolute;\n        content: '';\n        inset: 1px 0 1px 1px;\n        border: 2px solid\n          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));\n        border-right: none;\n      }\n\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item\n        #label-button-background::after {\n        opacity: 1;\n      }\n\n      :host([select-mode='highlight'][selectable]:not([disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background::after {\n        opacity: 0.33;\n      }\n      :host([select-mode='highlight'][selected]:not([disabled]))\n        #menu-item:has(#label-button:hover)\n        #label-button-background::after {\n        opacity: 0.66;\n      }\n\n      /** Buttons */\n\n      :host([disabled]) #label-button {\n        cursor: default;\n        opacity: 0.5;\n      }\n\n      button {\n        display: inline-flex;\n        align-items: center;\n\n        font-family: inherit;\n        font-size: inherit;\n\n        padding: 0;\n        text-align: left;\n        border: none;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n        min-height: var(--uui-size-12);\n      }\n\n      #label-button {\n        position: relative;\n        flex-grow: 1;\n        grid-column-start: 2;\n        white-space: nowrap;\n        overflow: hidden;\n        padding-right: var(--uui-size-space-3);\n        padding-left: calc(\n          var(--uui-menu-item-flat-structure) * var(--uui-size-space-3)\n        );\n        display: inline-flex;\n        align-items: center;\n        text-decoration: none;\n        color: currentColor;\n        min-height: var(--uui-size-12);\n        font-weight: inherit;\n      }\n\n      #label-button .label {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      span#label-button {\n        pointer-events: none; /* avoid hovering state on this. */\n      }\n\n      #caret-button {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: end;\n        padding-inline-end: 3px;\n        color: var(--uui-color-interactive);\n      }\n\n      #label-button-background {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        border-radius: var(\n          --uui-menu-item-border-radius,\n          var(--uui-border-radius)\n        );\n      }\n\n      #actions-container {\n        opacity: 0;\n        width: 0;\n        grid-column-start: 3;\n        overflow: hidden;\n      }\n      :host(:not([disabled])) #menu-item:hover #actions-container,\n      :host(:not([disabled])) #menu-item:focus #actions-container,\n      :host(:not([disabled])) #menu-item:focus-within #actions-container {\n        opacity: 1;\n        width: auto;\n      }\n\n      #loader {\n        position: absolute;\n        width: 100%;\n        bottom: 0;\n      }\n\n      #icon {\n        display: inline-flex;\n        margin-right: var(--uui-size-2);\n      }\n      :host([selected]:not([select-mode='highlight'], [disabled])) #icon {\n        --uui-icon-color-overwrite: currentColor;\n      }\n\n      #badge {\n        font-size: 12px;\n        --uui-badge-position: relative;\n        --uui-badge-position: auto;\n        display: block;\n        margin-left: 6px;\n      }\n\n      /** Focus styling */\n\n      :host([select-mode='highlight']) #label-button:focus-visible {\n        outline: none;\n        overflow: initial;\n      }\n\n      :host([select-mode='highlight']) #label-button:focus-visible::after {\n        content: '';\n        border-radius: calc(var(--uui-border-radius) - 1px);\n        position: absolute;\n        inset: 3px 3px 3px -5px;\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      :host([select-mode='highlight']) #caret-button:focus-visible {\n        outline: none;\n        overflow: initial;\n      }\n\n      :host([select-mode='highlight']) #caret-button:focus-visible::after {\n        content: '';\n        position: absolute;\n        inset: 3px;\n        border-radius: calc(var(--uui-border-radius) - 1px);\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      /** Slots */\n\n      slot:not([name]) {\n        position: relative;\n        display: block;\n        width: 100%;\n      }\n      slot:not([name]) {\n        --uui-menu-item-indent: var(--uui-menu-item-child-indent);\n      }\n\n      slot[name='actions'] {\n        display: flex;\n        align-items: center;\n        --uui-button-height: calc(var(--uui-size-base-unit) * 4);\n        margin-right: var(--uui-size-base-unit);\n      }\n\n      @keyframes fadeIn {\n        100% {\n          opacity: 1;\n        }\n      }\n\n      uui-loader-bar {\n        opacity: 0;\n        animation: fadeIn 120ms ease-in 60ms forwards;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

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

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIMenuItemElement } from "./menu-item.element.js";
 import { UUIMenuItemEvent } from "./UUIMenuItemEvent.js";
+import { UUIMenuItemElement } from "./menu-item.element.js";
+//#region src/components/menu-item/menu-item.ts
 defineElement("uui-menu-item", UUIMenuItemElement);
-export {
-  UUIMenuItemElement,
-  UUIMenuItemEvent,
-  UUIMenuItemElement as default
-};
-//# sourceMappingURL=menu-item.js.map
+//#endregion
+export { UUIMenuItemElement, UUIMenuItemEvent };
+
+//# sourceMappingURL=menu-item.js.map

package/dist/components/menu-item/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sources":["../../../src/components/menu-item/menu-item.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIMenuItemElement } from './menu-item.element.js';\n\ndefineElement('uui-menu-item', UUIMenuItemElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-menu-item': UUIMenuItemElement;\n  }\n}\n\nexport * from './menu-item.element.js';\nexport * from './UUIMenuItemEvent.js';\nexport { UUIMenuItemElement as default } from './menu-item.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,iBAAiB,kBAAkB;"}
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../../src/components/menu-item/menu-item.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIMenuItemElement } from './menu-item.element.js';\n\ndefineElement('uui-menu-item', UUIMenuItemElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-menu-item': UUIMenuItemElement;\n  }\n}\n\nexport * from './menu-item.element.js';\nexport * from './UUIMenuItemEvent.js';\n"],"mappings":";;;;AAGA,cAAc,iBAAiB,kBAAkB"}