@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.0

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

@@ -0,0 +1,558 @@
+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 { 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
+        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)}>
+        ${this._renderLabelInside()}
+      </span>`;
+    }
+    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)}
+      ?disabled=${this.disabled}
+      aria-label="${this.label}">
+      ${this._renderLabelInside()}
+    </a>`;
+  }
+  _renderLabelAsButton() {
+    return html` <button
+      id="label-button"
+      ${ref(this._labelButtonChanged)}
+      @click=${__privateMethod(this, _UUIMenuItemElement_instances, onLabelClicked_fn)}
+      ?disabled=${this.disabled}
+      aria-label="${this.label}">
+      ${this._renderLabelInside()}
+    </button>`;
+  }
+  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)}
+            </button>` : ""}
+        ${this.href && this.selectOnly !== true && this.selectable !== true ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}
+
+        <slot id="actions-container" name="actions"></slot>
+        ${this.loading ? html`<uui-loader-bar id="loader"></uui-loader-bar>` : ""}
+      </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
+      aria-hidden="true"
+      ?open=${this.showChildren}></uui-symbol-expand>`;
+};
+_UUIMenuItemElement.styles = [
+  css`
+      :host {
+        box-sizing: border-box;
+        display: block;
+        --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);
+        user-select: none;
+        --flat-structure-reversed: calc(
+          1 - var(--uui-menu-item-flat-structure, 0)
+        );
+      }
+
+      #menu-item {
+        position: relative;
+        padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
+        display: grid;
+        grid-template-columns:
+          calc(var(--flat-structure-reversed) * var(--uui-size-8))
+          1fr;
+        grid-template-rows: 1fr;
+        white-space: nowrap;
+      }
+
+      /** Not active, not selected, not disabled: */
+      :host(:not([active], [selected], [disabled], [select-mode='highlight']))
+        #menu-item:has(#label-button:hover)
+        #label-button-background {
+        background-color: var(
+          --uui-menu-item-background-color-hover,
+          var(--uui-color-surface-emphasis)
+        );
+      }
+      :host(:not([active], [selected], [disabled]))
+        #menu-item
+        #label-button:hover,
+      :host(:not([active], [selected])) #menu-item #caret-button:hover {
+        color: var(
+          --uui-menu-item-color-hover,
+          var(--uui-color-interactive-emphasis)
+        );
+      }
+
+      /** Active */
+      :host([active]) #label-button,
+      :host([active]) #actions-container,
+      :host([active]) #caret-button {
+        color: var(
+          --uui-menu-item-color-active,
+          var(--uui-color-current-contrast)
+        );
+      }
+      :host([active]) #label-button-background {
+        background-color: var(
+          --uui-menu-item-background-color-active,
+          var(--uui-color-current)
+        );
+      }
+      :host([active])
+        #menu-item:has(#label-button:hover)
+        #label-button-background,
+      :host([active]) #caret-button:hover {
+        background-color: var(
+          --uui-menu-item-background-color-active-hover,
+          var(--uui-color-current-emphasis)
+        );
+      }
+
+      /** Disabled */
+      :host([disabled]) #menu-item {
+        background-color: var(
+          --uui-menu-item-background-color-disabled,
+          var(--uui-color-disabled)
+        );
+      }
+
+      /** Selected */
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #label-button,
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #actions-container,
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #caret-button {
+        color: var(
+          --uui-menu-item-color-selected,
+          var(--uui-color-selected-contrast)
+        );
+      }
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #label-button-background {
+        background-color: var(
+          --uui-menu-item-background-color-selected,
+          var(--uui-color-selected)
+        );
+      }
+      /** Selected, not highlight mode */
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #menu-item:has(#label-button:hover)
+        #label-button-background,
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #caret-button:hover {
+        background-color: var(
+          --uui-menu-item-background-color-selected-hover,
+          var(--uui-color-selected-emphasis)
+        );
+      }
+
+      /** highlight mode, default */
+      :host([select-mode='highlight']:not([disabled], [active], [selectable]))
+        #menu-item:has(#label-button:hover)
+        #label-button-background {
+        border-radius: var(--uui-border-radius);
+        background-color: var(
+          --uui-menu-item-background-color-highlight,
+          var(--uui-color-surface-emphasis)
+        );
+      }
+
+      /** highlight mode, active */
+      :host([select-mode='highlight'][active]:not([disabled]))
+        #menu-item
+        #label-button-background {
+        border-radius: var(--uui-border-radius);
+      }
+
+      /** highlight mode, active & selected */
+      :host([select-mode='highlight'][active][selected]:not([disabled]))
+        #menu-item:has(#label-button:hover)
+        #label-button-background {
+        border-radius: var(--uui-border-radius);
+        background-color: var(
+          --uui-menu-item-background-color-highlight-active-selected,
+          var(--uui-color-current-emphasis)
+        );
+      }
+
+      /** highlight mode, selected */
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #label-button,
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #actions-container,
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #caret-button {
+        color: var(
+          --uui-menu-item-color-highlight-selected,
+          var(--uui-color-interactive)
+        );
+      }
+      :host([select-mode='highlight'][selectable][selected]:not([disabled]))
+        #menu-item
+        #label-button:hover {
+        color: var(
+          --uui-menu-item-background-color-highlight-selectable-selected,
+          var(--uui-color-interactive-emphasis)
+        );
+      }
+
+      /** highlight mode, selected, selectable caret hover */
+      :host([selected][selectable][select-mode='highlight']:not([active]))
+        #menu-item
+        #caret-button:hover {
+        border-radius: var(--uui-border-radius);
+        background-color: var(
+          --uui-menu-item-background-color-highlight-selectable-selected,
+          var(--uui-color-surface-emphasis)
+        );
+        color: var(
+          --uui-menu-item-color-highlight-selectable-selected,
+          var(--uui-color-interactive-emphasis)
+        );
+      }
+
+      /** Highlight borders */
+
+      :host([select-mode='highlight']:not([disabled]))
+        #menu-item
+        #label-button-background::after {
+        border-radius: var(--uui-border-radius);
+        position: absolute;
+        content: '';
+        inset: 1px;
+        border: 2px solid
+          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));
+        opacity: 0;
+      }
+
+      :host([select-mode='highlight'][selectable][selected]:not([disabled]))
+        #menu-item
+        #caret-button:hover::after {
+        border-top-left-radius: var(--uui-border-radius);
+        border-bottom-left-radius: var(--uui-border-radius);
+        position: absolute;
+        content: '';
+        inset: 1px 0 1px 1px;
+        border: 2px solid
+          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));
+        border-right: none;
+      }
+
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #label-button-background::after {
+        opacity: 1;
+      }
+
+      :host([select-mode='highlight'][selectable]:not([disabled]))
+        #menu-item:has(#label-button:hover)
+        #label-button-background::after {
+        opacity: 0.33;
+      }
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item:has(#label-button:hover)
+        #label-button-background::after {
+        opacity: 0.66;
+      }
+
+      /** Buttons */
+
+      :host([disabled]) #label-button {
+        cursor: default;
+        opacity: 0.5;
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+
+        font-family: inherit;
+        font-size: inherit;
+
+        padding: 0;
+        text-align: left;
+        border: none;
+        color: inherit;
+        background-color: transparent;
+        cursor: pointer;
+        min-height: var(--uui-size-12);
+      }
+
+      #label-button {
+        position: relative;
+        flex-grow: 1;
+        grid-column-start: 2;
+        white-space: nowrap;
+        overflow: hidden;
+        padding-right: var(--uui-size-space-3);
+        padding-left: calc(
+          var(--uui-menu-item-flat-structure) * var(--uui-size-space-3)
+        );
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+        color: currentColor;
+        min-height: var(--uui-size-12);
+        font-weight: inherit;
+      }
+
+      #label-button .label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      span#label-button {
+        pointer-events: none; /* avoid hovering state on this. */
+      }
+
+      #caret-button {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        padding-inline-end: 3px;
+        color: var(--uui-color-interactive);
+      }
+
+      #label-button-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: var(
+          --uui-menu-item-border-radius,
+          var(--uui-border-radius)
+        );
+      }
+
+      #actions-container {
+        opacity: 0;
+        width: 0;
+        grid-column-start: 3;
+        overflow: hidden;
+      }
+      :host(:not([disabled])) #menu-item:hover #actions-container,
+      :host(:not([disabled])) #menu-item:focus #actions-container,
+      :host(:not([disabled])) #menu-item:focus-within #actions-container {
+        opacity: 1;
+        width: auto;
+      }
+
+      #loader {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+      }
+
+      #icon {
+        display: inline-flex;
+        margin-right: var(--uui-size-2);
+      }
+      :host([selected]:not([select-mode='highlight'], [disabled])) #icon {
+        --uui-icon-color-overwrite: currentColor;
+      }
+
+      #badge {
+        font-size: 12px;
+        --uui-badge-position: relative;
+        --uui-badge-position: auto;
+        display: block;
+        margin-left: 6px;
+      }
+
+      /** Focus styling */
+
+      :host([select-mode='highlight']) #label-button:focus-visible {
+        outline: none;
+        overflow: initial;
+      }
+
+      :host([select-mode='highlight']) #label-button:focus-visible::after {
+        content: '';
+        border-radius: calc(var(--uui-border-radius) - 1px);
+        position: absolute;
+        inset: 3px 3px 3px -5px;
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      :host([select-mode='highlight']) #caret-button:focus-visible {
+        outline: none;
+        overflow: initial;
+      }
+
+      :host([select-mode='highlight']) #caret-button:focus-visible::after {
+        content: '';
+        position: absolute;
+        inset: 3px;
+        border-radius: calc(var(--uui-border-radius) - 1px);
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      /** Slots */
+
+      slot:not([name]) {
+        position: relative;
+        display: block;
+        width: 100%;
+      }
+      slot:not([name]) {
+        --uui-menu-item-indent: var(--uui-menu-item-child-indent);
+      }
+
+      slot[name='actions'] {
+        display: flex;
+        align-items: center;
+        --uui-button-height: calc(var(--uui-size-base-unit) * 4);
+        margin-right: var(--uui-size-base-unit);
+      }
+
+      @keyframes fadeIn {
+        100% {
+          opacity: 1;
+        }
+      }
+
+      uui-loader-bar {
+        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

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

@@ -0,0 +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":"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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;"}

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

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

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

@@ -0,0 +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;"}

package/dist/components/modal/modal-container.d.ts

@@ -0,0 +1,14 @@
+import type { PropertyValueMap } from 'lit';
+import { LitElement } from 'lit';
+export declare class UUIModalContainerElement extends LitElement {
+    #private;
+    modalSlot?: HTMLSlotElement;
+    private _modals?;
+    private _sidebars?;
+    sidebarGap: number;
+    transitionDurationMS: number;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult;
+}