@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-layout-auto.entry-D1TtACRt.js

@@ -0,0 +1,90 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+const layoutAutoCss = () => `:host{display:block;position:relative;margin:0 0.75rem;--ix-layout-grid-gap:1.5rem}:host .container{display:flex;align-items:stretch;flex-wrap:wrap;gap:var(--ix-layout-grid-gap)}:host ::slotted(*){flex-grow:0;flex-shrink:0}`;
+const LayoutForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.layout = [
+      { minWidth: "0", columns: 1 },
+      { minWidth: "48em", columns: 2 }
+    ];
+    this.mediaQueryList = [];
+    this.observer = new MutationObserver(() => this.calculateGridTemplateColumns());
+    this.resizeObserver = new ResizeObserver(() => {
+      this.calculateGridTemplateColumns();
+    });
+  }
+  connectedCallback() {
+    this.observer.observe(this.hostElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-colspan"]
+    });
+    this.resizeObserver.observe(this.hostElement);
+    this.calculateGridTemplateColumns();
+  }
+  componentWillLoad() {
+    this.calculateGridTemplateColumns();
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  updateMediaQueryList() {
+    this.mediaQueryList = [];
+    this.layout.forEach((layout) => {
+      const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);
+      this.mediaQueryList.push({
+        mediaQuery,
+        layout
+      });
+    });
+  }
+  parseNumber(number) {
+    if (!number) {
+      return 1;
+    }
+    const result = parseInt(number);
+    if (isNaN(result)) {
+      return 1;
+    }
+    return result;
+  }
+  calculateGridTemplateColumns() {
+    this.updateMediaQueryList();
+    let layoutColumns = 1;
+    let columnSpacing = "var(--ix-layout-grid-gap)";
+    this.mediaQueryList.forEach((mediaQuery) => {
+      if (mediaQuery.mediaQuery.matches) {
+        layoutColumns = mediaQuery.layout.columns;
+      }
+    });
+    Array.from(this.hostElement.children).forEach((child) => {
+      let colspan = this.parseNumber(child.getAttribute("data-colspan"));
+      colspan = Math.min(colspan, layoutColumns);
+      const childRatio = colspan / layoutColumns;
+      child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
+    });
+  }
+  render() {
+    return h(Host, { key: "e80a4427592546a5c5155d23108840ec2e34ecd3" }, h("div", { key: "cf63d295988d17bf976bfddd13c13f8987b2ca1a", class: "container" }, h("slot", { key: "0eaa6a54b56fa3f43adde3620178ccd25447507e" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "layout": [{
+        "updateMediaQueryList": 0
+      }]
+    };
+  }
+};
+LayoutForm.style = layoutAutoCss();
+export {
+  LayoutForm as ix_layout_auto
+};

package/build/static/demo/v2/preview/html/assets/ix-link-button.entry-CTnqpsK5.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+import { w as iconChevronRightSmall } from "./index-BBzEV-f4-ChQfUIyc.js";
+const linkButtonCss = () => `:host{display:inline-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover,:host .link-button:not(.disabled):not(:disabled).hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active,:host .link-button:not(.disabled):not(:disabled).active{color:var(--theme-color-dynamic--active)}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}`;
+const LinkButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disabled = false;
+    this.target = "_self";
+  }
+  render() {
+    return h(Host, { key: "4d24f0a12d133ab58cb2a873536e68db17df2d5a" }, h("a", { key: "0585700d404cf2d49597085527608c6db40ea97e", title: this.url, tabindex: "0", class: {
+      "link-button": true,
+      disabled: this.disabled
+    }, href: this.disabled ? void 0 : this.url, target: this.target }, h("ix-icon", { key: "68d6611903eec80a879d4bfbb90a71fcdd05d5a0", class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: "4e4b66cb6cd469f56d9029a0ddbf5a44ea838128", class: {
+      link: true,
+      disabled: this.disabled
+    } }, h("slot", { key: "eb961e003cfa95ceaf0033a19d1e12ff92b7f78f" }))));
+  }
+};
+LinkButton.style = linkButtonCss();
+export {
+  LinkButton as ix_link_button
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-about-item.entry-CHFJyAik.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+const menuAboutItemCss = () => `:host{display:block}`;
+const MenuAboutItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.labelChange = createEvent(this, "labelChange", 7);
+  }
+  watchLabel(newValue, oldValue) {
+    this.labelChange.emit({
+      name: "ix-menu-about-item",
+      oldLabel: oldValue,
+      newLabel: newValue
+    });
+  }
+  render() {
+    return h(Host, { key: "2877a9c9386fb74d8c4fcfb72d5f31d8aa9057f1" }, h("slot", { key: "fc2e89e7a6a427dbbf3e2030949a4db31c34957e" }));
+  }
+  static get watchers() {
+    return {
+      "label": [{
+        "watchLabel": 0
+      }]
+    };
+  }
+};
+MenuAboutItem.style = menuAboutItemCss();
+export {
+  MenuAboutItem as ix_menu_about_item
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-about-news.entry-28uo1qrP.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+import { q as iconClose, x as iconShout } from "./index-BBzEV-f4-ChQfUIyc.js";
+const menuAboutNewsCss = () => `:host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-2);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--theme-default-time);margin-inline-start:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-inline-start:4rem;margin-block-start:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-2);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}@media only screen and (max-width: 48em){:host{display:flex;flex-direction:column;max-height:calc(100vh - 4.75rem);width:calc(100% - 2rem);max-width:30rem;transform:translateX(calc(1rem - 50%));left:calc(50% - 1rem) !important;bottom:1rem !important;margin-inline:0 !important;z-index:calc(var(--theme-z-index-sticky) - 1)}:host .slot-container{overflow-y:auto}:host #arrow{display:none}}`;
+const MenuAboutNews = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showMore = createEvent(this, "showMore", 7);
+    this.closePopover = createEvent(this, "closePopover", 7);
+    this.show = false;
+    this.i18nShowMore = "Show more";
+    this.expanded = false;
+  }
+  render() {
+    return h(Host, { key: "7443d209d383de9e46d8c024c1756ae814c5d764", class: {
+      expanded: this.expanded,
+      show: !this.show
+    } }, h("div", { key: "034c93b01133fa50d28c0e4ce98becc53fe29158", class: "banner-container" }, h("ix-icon", { key: "69df7443eba7107db4d4f20d2a628159a7ed8660", color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: "36cc1e785395307d29813cac4f13b1309ee2d257", viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: "35d4a86b62c225dc03329e6e53bdd6180d1a6b8e", points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: "d5f1d76a2bf661fb865fa7c4857b0f20d6f225dc", class: "cui-popover-news-header" }, h("ix-typography", { key: "d8ef22907758393fe430cc2a4940dea8ee7372e8", format: "label", bold: true }, this.label)), h("ix-icon-button", { key: "2fb7cf52ee3bf3e475fc5fa6d0aaadec96246acc", size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+      this.show = false;
+      this.closePopover.emit();
+    } }), h("div", { key: "8875b7027424233f78ac46c52cbeccc3d4fb7560", class: "slot-container" }, h("slot", { key: "b662f3b8c11a9c3ea639ed6b753a4b80ed038bec" })), this.aboutItemLabel ? h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {
+      this.show = false;
+      this.showMore.emit(e);
+    } }, this.i18nShowMore)) : null, h("div", { key: "97cbdaf247a6f83b9361121cbac596dc86e2bb28", id: "arrow" }));
+  }
+};
+MenuAboutNews.style = menuAboutNewsCss();
+export {
+  MenuAboutNews as ix_menu_about_news
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-about.entry-C0R-Bc8y.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from "./global-7ZbTfMw3.js";
+import { s as syncTabDisplay, i as initialize, M as MenuTabs } from "./ix-menu-settings.entry-DmV8Tic2.js";
+import "./index-BBzEV-f4-ChQfUIyc.js";
+const menuAboutCss = () => `.text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}`;
+const MenuAbout = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabChange = createEvent(this, "tabChange", 7);
+    this.close = createEvent(this, "close", 7);
+    this.label = "About & legal information";
+    this.ariaLabelCloseButton = "Close About";
+    this.show = false;
+  }
+  updateTab(newLabel, oldLabel) {
+    if (newLabel !== oldLabel) {
+      syncTabDisplay(this, newLabel);
+    }
+  }
+  componentWillLoad() {
+    initialize(this);
+  }
+  componentDidLoad() {
+    forceUpdate(this.el);
+  }
+  render() {
+    return h(MenuTabs, { key: "ca696d609e81a77afbb7210a699c89e52cf2b59f", context: this });
+  }
+  get el() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "activeTabLabel": [{
+        "updateTab": 0
+      }]
+    };
+  }
+};
+MenuAbout.style = menuAboutCss();
+export {
+  MenuAbout as ix_menu_about
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-avatar.entry-D3vmp8xE.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { y as iconLogOut } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as a11yBoolean } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { g as getSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+const menuAvatarCss = () => `:host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:var(--theme-default-time)}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{color:var(--theme-nav-item-primary--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar{border-radius:1.25rem}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover,:host .avatar:not(.disabled):not(:disabled).hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):active,:host .avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}:host .avatar:focus-visible{outline:1px solid var(--theme-color-focus-bdr)}`;
+const MenuAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.logoutClick = createEvent(this, "logoutClick", 7);
+    this.i18nLogout = "Logout";
+    this.hideLogoutButton = false;
+    this.enableTopLayer = false;
+    this.showContextMenu = false;
+    this.avatarElementId = "ix-menu-avatar-id";
+    this.tooltipRef = makeRef();
+  }
+  onSlotChange() {
+    const slot = this.hostElement.shadowRoot.querySelector("slot");
+    if (!slot) {
+      return;
+    }
+    const elements = getSlottedElements(slot);
+    this.showContextMenu = elements.length !== 0;
+  }
+  render() {
+    var _a;
+    const tooltipText = (_a = this.tooltipText) !== null && _a !== void 0 ? _a : this.top;
+    const ariaHidden = tooltipText === this.top;
+    return h(Host, { key: "63251d35fc15b945de3bae097702c3e0e7377568", slot: "ix-menu-avatar" }, h("button", { key: "f50dd772c58b7b20e966d0a992f6e2537ebbe5bc", class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { key: "1b3ea2ab31cc248e021306b9399b5b2bbad1122f", image: this.image, initials: this.initials }), h("div", { key: "1e8aee8c464ebc41e99d00b6933f6682d1c98019", class: "avatar-name" }, h("span", { key: "3bc559472005be3d21b406fd9ea85fcb9737dcb6", class: "text-default-single" }, this.top), h("span", { key: "023fb55cd5229df9aadec9daf86834e16944a66f", class: "text-default-single" }, this.bottom))), !!tooltipText && h("ix-tooltip", { key: "8e13fc36570e1152049b636ecabb042e7288c3e8", ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: "right", "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText), h("ix-dropdown", { key: "6a7e04c67894981100c3b81eb6ac9c5d9a16194a", trigger: this.hostElement, placement: "right-start", hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+      mainAxis: 16
+    }, onShowChanged: (event) => {
+      if (event.detail && this.tooltipRef.current) {
+        this.tooltipRef.current.hideTooltip(0);
+      }
+    }, enableTopLayer: this.enableTopLayer }, h("slot", { key: "d7444d53d15826d0999476c55bc428a89a6b73fa", onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && h("ix-menu-avatar-item", { key: "f6c1fc16b2b39ef2277ae01485f1b7014e72e568", label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+      this.logoutClick.emit(e);
+    } })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+MenuAvatar.style = menuAvatarCss();
+export {
+  MenuAvatar as ix_menu_avatar
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-category.entry-DPO8fZRu.js

@@ -0,0 +1,204 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { h as iconChevronDownSmall } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import { c as closestIxMenu } from "./context-BniHpAE1-BXrc-Gwu.js";
+import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import "./typed-event-BdCnOrqW-CWsLM0S_.js";
+function createEnterLeaveDebounce(enterCallback, leaveCallback, { debounceTimeEnter, debounceTimeLeave } = {
+  debounceTimeEnter: 0,
+  debounceTimeLeave: 500
+}) {
+  let enterTimeout;
+  let leaveTimeout;
+  return {
+    onEnter: () => {
+      clearTimeout(leaveTimeout);
+      enterTimeout = setTimeout(() => {
+        enterCallback();
+      }, debounceTimeEnter);
+    },
+    onLeave: () => {
+      clearTimeout(enterTimeout);
+      leaveTimeout = setTimeout(() => {
+        leaveCallback();
+      }, debounceTimeLeave);
+    }
+  };
+}
+const menuCategoryCss = () => `:host{display:flex;flex-direction:column;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}`;
+const DefaultIxMenuItemHeight = 40;
+const DefaultAnimationTimeout = 150;
+const MenuCategory = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeOtherCategories = createEvent(this, "closeOtherCategories", 7);
+    this.menuExpand = false;
+    this.showItems = false;
+    this.showDropdown = false;
+    this.nestedItems = [];
+    this.enterLeaveDebounce = createEnterLeaveDebounce(() => {
+      this.onPointerEnter();
+    }, () => {
+      this.onPointerLeave();
+    });
+  }
+  isNestedItemActive() {
+    return this.getNestedItems().some((item) => item.active);
+  }
+  getNestedItems() {
+    return Array.from(this.hostElement.querySelectorAll(":scope ix-menu-item"));
+  }
+  getNestedItemsHeight() {
+    const items = this.getNestedItems();
+    return items.length * DefaultIxMenuItemHeight;
+  }
+  onExpandCategory(showItems) {
+    if (showItems) {
+      this.animateFadeIn();
+    } else {
+      this.animateFadeOut();
+    }
+  }
+  animateFadeOut() {
+    const slotHideThresholdMs = 25;
+    animate(this.menuItemsContainer, {
+      duration: DefaultAnimationTimeout,
+      easing: "easeInSine",
+      opacity: [1, 0],
+      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],
+      onComplete: () => {
+        setTimeout(() => {
+          this.showItems = false;
+          this.showDropdown = false;
+        }, DefaultAnimationTimeout + slotHideThresholdMs);
+      }
+    });
+  }
+  animateFadeIn() {
+    animate(this.menuItemsContainer, {
+      duration: DefaultAnimationTimeout,
+      easing: "easeInSine",
+      opacity: [0, 1],
+      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
+      onBegin: () => {
+        this.showItems = true;
+        this.showDropdown = false;
+      }
+    });
+  }
+  onPointerEnter() {
+    var _a;
+    if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+      return;
+    }
+    this.closeOtherCategories.emit();
+    this.showDropdown = true;
+  }
+  onPointerLeave() {
+    this.showDropdown = false;
+  }
+  onCategoryClick(e) {
+    var _a;
+    e.stopPropagation();
+    if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+      this.onExpandCategory(!this.showItems);
+      return;
+    }
+  }
+  onNestedItemsChanged(mutations) {
+    const oldNestedItemsLength = this.nestedItems.length;
+    this.nestedItems = this.getNestedItems();
+    if (this.showItems && this.menuItemsContainer && oldNestedItemsLength !== this.nestedItems.length) {
+      this.menuItemsContainer.style.maxHeight = `${this.getNestedItemsHeight() + DefaultIxMenuItemHeight}px`;
+    }
+    if (!this.menuExpand || this.showItems || !mutations) {
+      return;
+    }
+    for (const mutation of mutations !== null && mutations !== void 0 ? mutations : []) {
+      if (mutation.attributeName === "class" && mutation.target instanceof HTMLElement && mutation.target.classList.contains("active")) {
+        this.showItems = true;
+        this.onExpandCategory(true);
+        return;
+      }
+    }
+  }
+  isCategoryItemListVisible() {
+    return this.menuExpand && (this.showItems || this.isNestedItemActive());
+  }
+  componentWillLoad() {
+    const closestMenu = closestIxMenu(this.hostElement);
+    if (!closestMenu) {
+      throw Error("ix-menu-category can only be used as a child of ix-menu");
+    }
+    this.ixMenu = closestMenu;
+    this.menuExpand = this.ixMenu.expand;
+    this.showItems = this.isCategoryItemListVisible();
+  }
+  componentDidLoad() {
+    var _a;
+    this.observer = createMutationObserver((mutations) => this.onNestedItemsChanged(mutations));
+    this.observer.observe(this.hostElement, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    requestAnimationFrame(() => {
+      this.onNestedItemsChanged();
+    });
+    (_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.addEventListener("expandChange", ({ detail: menuExpand }) => {
+      this.menuExpand = menuExpand;
+      if (!menuExpand) {
+        this.clearMenuItemStyles();
+      }
+      this.showItems = this.isCategoryItemListVisible();
+    });
+  }
+  clearMenuItemStyles() {
+    var _a, _b;
+    (_a = this.menuItemsContainer) === null || _a === void 0 ? void 0 : _a.style.removeProperty("max-height");
+    (_b = this.menuItemsContainer) === null || _b === void 0 ? void 0 : _b.style.removeProperty("opacity");
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    return h(Host, { key: "edd1e65e5cd1cc96d1da1decfa666654d3926f6d", class: {
+      expanded: this.showItems
+    }, onPointerEnter: () => {
+      this.enterLeaveDebounce.onEnter();
+    }, onPointerLeave: (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      this.enterLeaveDebounce.onLeave();
+    } }, h("ix-menu-item", { key: "bd7b6f2c2bef925249db2b73ad14e1454a291939", class: "category-parent", active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("span", { key: "23c9e797cc2ef3a788866de2851d2d7fa8c1db83", class: "category" }, h("span", { key: "b15dd87212ebbf9d2ceb6212ec9c85bdf27c4624", class: "category-text" }, this.label), h("ix-icon", { key: "6381529eccd7caa09f9361de68564969a56ffa3f", name: iconChevronDownSmall, class: {
+      "category-chevron": true,
+      "category-chevron--open": this.showItems
+    }, "aria-hidden": "true" }))), h("div", { key: "dc0a076803031b9e2f725adaa0b5d2a1ad6b8c19", ref: (ref) => this.menuItemsContainer = ref, class: {
+      "menu-items": true,
+      "menu-items--expanded": this.showItems,
+      "menu-items--collapsed": !this.showItems
+    } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: "1d9fdeceee2eaf0f5d6ab29b1a5adfa8dba0c9a2", closeBehavior: "both", show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+      this.showDropdown = dropdownShown;
+    }, class: "category-dropdown", anchor: this.hostElement, placement: "right-start", offset: {
+      mainAxis: 3
+    }, onClick: (e) => {
+      if (e.target instanceof HTMLElement) {
+        if (e.target.tagName === "IX-MENU-ITEM") {
+          this.showDropdown = false;
+        } else {
+          e.preventDefault();
+        }
+      }
+    } }, h("ix-dropdown-item", { key: "2344605c05f8bd39b29928584fe8130fde99a252", class: "category-dropdown-header" }, h("ix-typography", { key: "619da17167ac283092b899b44bfac92417ce38f1", format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: "0c5c0fb54666edd6d2680f39819042056a5e8a83" }), h("slot", { key: "1ed415049caaadf3347ff60cf8c241a8ab29b266" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+MenuCategory.style = menuCategoryCss();
+export {
+  MenuCategory as ix_menu_category
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-expand-icon.entry-D3uZcwxr.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+import { H as iconDoubleChevronLeft, F as iconDoubleChevronRight } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { g as getButtonClasses } from "./base-button-CV0w47z9-ChfeyWNW.js";
+const menuExpandIconCss = () => `:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host .btn-subtle-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary,:host .btn-subtle-tertiary.focus,:host .btn-subtle-tertiary:focus-visible{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in var(--theme-default-time), transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--hover)}.menu-expand-button{width:2rem;padding:0px !important;cursor:pointer}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .menu-expand-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}`;
+const MenuExpandIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.expanded = false;
+    this.pinned = false;
+    this.ixAriaLabel = "Expand";
+  }
+  getSmallScreenIcon() {
+    return h("button", { tabindex: -1, class: Object.assign(Object.assign({}, getButtonClasses("subtle-tertiary", true, false, false, false)), { "menu-expand-button": true }) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" })));
+  }
+  getLargeScreenIcon() {
+    return h("ix-icon-button", { tabindex: -1, icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary", "aria-label": this.expanded ? "Collapse menu" : "Expand menu" });
+  }
+  getMenuIcon() {
+    if (this.pinned) {
+      return this.getLargeScreenIcon();
+    }
+    if (this.breakpoint === "md") {
+      return this.getLargeScreenIcon();
+    }
+    if (this.breakpoint === "lg") {
+      return this.getLargeScreenIcon();
+    }
+    return this.getSmallScreenIcon();
+  }
+  render() {
+    return h(Host, { key: "d0b7b4a7a64641d68b291468ff4e9de612461b62", class: {
+      expanded: this.expanded
+    }, "aria-hidden": "true" }, this.getMenuIcon());
+  }
+};
+MenuExpandIcon.style = menuExpandIconCss();
+export {
+  MenuExpandIcon as ix_menu_expand_icon
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-item.entry-B0azZYlT.js

@@ -0,0 +1,112 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { T as iconDocument } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { b as a11yHostAttributes, a as a11yBoolean } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { m as menuController } from "./menu-service-BMvtckRa-Dk6abri9.js";
+import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import "./typed-event-BdCnOrqW-CWsLM0S_.js";
+const createSequentialId = (prefix, sequenceId2) => {
+  return `${prefix}-${sequenceId2++}`;
+};
+const menuItemCss = () => `:host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{all:unset;box-sizing:border-box;display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);width:100%;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .tab-icon{color:var(--theme-nav-item-primary-icon--color);position:relative;pointer-events:none}:host .tab:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:-1px}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.5rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{display:block;color:var(--theme-nav-item-primary--color);margin:0 1rem 0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:"";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.tab-icon{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.tab-nested) .tab{flex-direction:row;padding-left:1.375rem}:host(.tab-nested) .tab .notification{position:relative;top:0;left:0;padding-left:0.5rem}:host(.tab-nested) .tab .tab-icon{padding-left:0.5rem;padding-right:0.5rem}:host(.tab-nested) .tab .tab-text{margin-left:0.5rem}:host(.tab-nested) .tab::before{display:none}`;
+let sequenceId = 0;
+const MenuItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.home = false;
+    this.bottom = false;
+    this.active = false;
+    this.disabled = false;
+    this.target = "_self";
+    this.isCategory = false;
+    this.ariaHiddenTooltip = false;
+    this.menuExpanded = false;
+    this.internalItemId = createSequentialId("ix-menu-item-", sequenceId++);
+    this.buttonRef = makeRef();
+    this.isHostedInsideCategory = false;
+    this.observer = createMutationObserver(() => {
+      this.setTooltip();
+    });
+  }
+  componentWillLoad() {
+    var _a;
+    this.isHostedInsideCategory = !!this.hostElement.closest("ix-menu-category");
+    this.onIconChange();
+    this.menuExpanded = ((_a = menuController.nativeElement) === null || _a === void 0 ? void 0 : _a.expand) || false;
+    this.menuExpandedDisposer = menuController.expandChange.on((expand) => this.menuExpanded = expand);
+  }
+  componentWillRender() {
+    this.setTooltip();
+  }
+  setTooltip() {
+    var _a, _b, _c;
+    this.tooltip = (_c = (_b = (_a = this.tooltipText) !== null && _a !== void 0 ? _a : this.label) !== null && _b !== void 0 ? _b : this.hostElement.textContent) !== null && _c !== void 0 ? _c : void 0;
+    this.ariaHiddenTooltip = this.tooltipText === this.label || this.tooltipText === this.hostElement.textContent;
+  }
+  connectedCallback() {
+    this.observer.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+      characterData: true
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.menuExpandedDisposer) {
+      this.menuExpandedDisposer.dispose();
+    }
+  }
+  onIconChange() {
+    if (!this.isHostedInsideCategory && !this.hostElement.icon) {
+      this.icon = iconDocument;
+    }
+  }
+  render() {
+    let extendedAttributes = {};
+    if (this.home) {
+      extendedAttributes = {
+        slot: "home"
+      };
+    }
+    if (this.bottom) {
+      extendedAttributes = {
+        slot: "bottom"
+      };
+    }
+    const hostA11y = a11yHostAttributes(this.hostElement);
+    const commonAttributes = Object.assign({ class: "tab", tabIndex: this.disabled ? -1 : 0 }, hostA11y);
+    const menuContent = [
+      this.icon && h("ix-icon", { key: "3235cdce2773d33e6f1a75b4df395079246fa993", class: "tab-icon", name: this.icon, "aria-hidden": "true" }),
+      this.notifications ? h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications)) : null,
+      h("span", { key: "704284ed9ae6b83b2b2d65ebc103e5e8ff766c1b", id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: "6b79e39fb7e616088d11bd8b9c57f4406fdd94b6" }))
+    ];
+    return h(Host, Object.assign({ key: "331694d5c502b1ed77035e591ffa5748777d8a81", class: {
+      disabled: this.disabled,
+      "home-tab": this.home,
+      "bottom-tab": this.bottom,
+      active: this.active,
+      "tab-nested": this.isHostedInsideCategory
+    }, "aria-disabled": this.disabled ? "true" : null }, extendedAttributes), this.href ? h("a", Object.assign({}, commonAttributes, { href: this.disabled ? void 0 : this.href, target: this.target, rel: this.rel, role: "button", ref: this.buttonRef, onClick: (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    } }), menuContent) : h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent), h("ix-tooltip", { key: "d282a68bce72435079cbfea5234b227c92027643", for: this.buttonRef.waitForCurrent(), placement: "right", showDelay: 1e3, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "icon": [{
+        "onIconChange": 0
+      }]
+    };
+  }
+};
+MenuItem.style = menuItemCss();
+export {
+  MenuItem as ix_menu_item
+};