@siemens/ix 4.4.0 → 5.1.0

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

@@ -7,71 +7,122 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { iconDocument } from "@siemens/ix-icons/icons";
-import { h, Host } from "@stencil/core";
-import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
+import { h, Host, Mixin, } from "@stencil/core";
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { makeRef } from "../utils/make-ref";
 import { menuController } from "../utils/menu-service/menu-service";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { createSequentialId } from "../utils/uuid";
+import { a11yBoolean } from "../utils/a11y";
 let sequenceId = 0;
 /**
  * @slot menu-item-label Custom label
  */
-export class MenuItem {
+export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
-        /**
-         * Move the Tab to a top position.
-         */
-        this.home = false;
-        /**
-         * Caution: this is no longer working. Please use slot="bottom" instead.
-         *
-         * Place tab on bottom
-         */
-        this.bottom = false;
-        /**
-         * State to display active
-         */
-        this.active = false;
-        /**
-         * Disable tab and remove event handlers
-         */
-        this.disabled = false;
-        /**
-         * Specifies where to open the linked document when href is provided.
-         *
-         * @since 4.0.0
-         */
-        this.target = '_self';
-        /** @internal */
-        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();
-        });
+        super();
+    }
+    /**
+     * Label of the menu item. Will also be used as tooltip text
+     */
+    label;
+    /**
+     * Move the Tab to a top position.
+     */
+    home = false;
+    /**
+     * Caution: this is no longer working. Please use slot="bottom" instead.
+     *
+     * Place tab on bottom
+     */
+    bottom = false;
+    /**
+     * Name of the icon you want to display. Icon names can be resolved from the documentation {@link https://ix.siemens.io/docs/icon-library/icons}
+     */
+    icon;
+    /**
+     * Show notification count on tab
+     */
+    notifications;
+    /**
+     * State to display active
+     */
+    active = false;
+    /**
+     * Disable tab and remove event handlers
+     */
+    disabled = false;
+    /**
+     * Will be shown as tooltip text, if not provided menu text content will be used.
+     *
+     * @since 4.0.0
+     */
+    tooltipText;
+    /**
+     * URL for the button link. When provided, the button will render as an anchor tag.
+     *
+     * @since 4.0.0
+     */
+    href;
+    /**
+     * Specifies where to open the linked document when href is provided.
+     *
+     * @since 4.0.0
+     */
+    target = '_self';
+    /**
+     * Specifies the relationship between the current document and the linked document when href is provided.
+     *
+     * @since 4.0.0
+     */
+    rel;
+    /** @internal */
+    isCategory = false;
+    /** @internal */
+    menuCategoryLabel;
+    hostElement;
+    tooltip;
+    menuExpanded = false;
+    isInMenuContext = false;
+    hostTabIndex = -1;
+    /** @internal */
+    async setTabIndex(value) {
+        this.hostTabIndex = value;
     }
+    internalItemId = createSequentialId('ix-menu-item-', sequenceId++);
+    buttonRef = makeRef();
+    isHostedInsideCategory = false;
+    menuExpandedDisposer;
+    observer = createMutationObserver(() => {
+        this.setTooltip();
+    });
     componentWillLoad() {
-        var _a;
+        super.componentWillLoad();
         this.isHostedInsideCategory =
             !!this.hostElement.closest('ix-menu-category');
+        const rootNode = this.hostElement.getRootNode();
+        const isInMenuShadowDOM = rootNode instanceof ShadowRoot &&
+            rootNode.host?.tagName?.toLowerCase() === 'ix-menu';
+        const directParent = this.hostElement.parentElement;
+        const isMenuChild = !this.isHostedInsideCategory &&
+            (directParent?.tagName?.toLowerCase() === 'ix-menu' ||
+                (directParent?.tagName?.toLowerCase() === 'a' &&
+                    directParent?.parentElement?.tagName?.toLowerCase() === 'ix-menu'));
+        this.isInMenuContext = isInMenuShadowDOM || isMenuChild;
         this.onIconChange();
-        this.menuExpanded = ((_a = menuController.nativeElement) === null || _a === void 0 ? void 0 : _a.expand) || false;
+        this.menuExpanded = menuController.nativeElement?.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 : undefined;
-        this.ariaHiddenTooltip =
-            this.tooltipText === this.label ||
-                this.tooltipText === this.hostElement.textContent;
+            this.tooltipText ??
+                this.label ??
+                this.hostElement.textContent ??
+                undefined;
     }
     connectedCallback() {
         this.observer.observe(this.hostElement, {
@@ -81,6 +132,7 @@ export class MenuItem {
         });
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.observer) {
             this.observer.disconnect();
         }
@@ -93,6 +145,38 @@ export class MenuItem {
             this.icon = iconDocument;
         }
     }
+    handleCategoryKeyDown(e) {
+        if ((e.key === 'Enter' || e.key === ' ') && this.isHostedInsideCategory) {
+            this.returnFocusToParentCategoryMenuItem();
+        }
+    }
+    getAriaLabel() {
+        if ('aria-label' in this.inheritAriaAttributes) {
+            return this.inheritAriaAttributes['aria-label'];
+        }
+        const hasDistinctTooltip = this.tooltipText &&
+            this.tooltipText !== this.label &&
+            this.tooltipText !== this.hostElement.textContent;
+        if (hasDistinctTooltip) {
+            return `${this.label ?? this.menuCategoryLabel ?? this.hostElement.textContent ?? ''} ${this.tooltipText}`;
+        }
+        return undefined;
+    }
+    getEffectiveRole(externalRole) {
+        const internalRole = this.isHostedInsideCategory || this.isCategory || this.isInMenuContext
+            ? 'menuitem'
+            : undefined;
+        return externalRole ?? internalRole;
+    }
+    returnFocusToParentCategoryMenuItem() {
+        const categoryElement = this.hostElement.closest('ix-menu-category');
+        const categoryMenuItem = categoryElement?.shadowRoot?.querySelector('ix-menu-item.category-parent');
+        categoryElement?.dispatchEvent(new CustomEvent('ixMenuCategoryItemSelect', {
+            bubbles: true,
+            composed: true,
+        }));
+        categoryMenuItem?.focus();
+    }
     render() {
         let extendedAttributes = {};
         if (this.home) {
@@ -105,28 +189,39 @@ export class MenuItem {
                 slot: 'bottom',
             };
         }
-        const hostA11y = a11yHostAttributes(this.hostElement);
-        const commonAttributes = Object.assign({ class: 'tab', tabIndex: this.disabled ? -1 : 0 }, hostA11y);
+        const { role: externalRole, ...inheritedA11yWithoutRole } = this.inheritAriaAttributes;
+        const effectiveRole = this.getEffectiveRole(externalRole);
+        const commonAttributes = {
+            class: 'tab',
+            ...inheritedA11yWithoutRole,
+        };
         const menuContent = [
-            this.icon && (h("ix-icon", { key: '3235cdce2773d33e6f1a75b4df395079246fa993', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
+            this.icon && (h("ix-icon", { key: '64307467f954284272278cca78a80ae4f9c3b95a', 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' })),
+            h("span", { key: '1fd2d64f4f8487cb81ad7b981d4f8a0c5ebfb312', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '571294f967aae798c6a63f3fbcd46aa4453e1263' })),
         ];
-        return (h(Host, Object.assign({ key: '331694d5c502b1ed77035e591ffa5748777d8a81', class: {
+        const ariaLabel = this.getAriaLabel();
+        return (h(Host, { key: 'b3583fa356cc996792724ff03627f1a2fc6f9abd', 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 ? undefined : this.href, target: this.target, rel: this.rel, role: "button", ref: this.buttonRef, onClick: (e) => {
+                'ix-focusable': !this.disabled,
+            }, ...extendedAttributes }, this.href ? (h("a", { ...commonAttributes, role: effectiveRole, href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, tabIndex: this.isInMenuContext || this.isCategory
+                ? this.hostTabIndex
+                : undefined, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), 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: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            }, "aria-disabled": a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)) : (h("button", { ...commonAttributes, role: effectiveRole, tabIndex: this.isInMenuContext || this.isCategory
+                ? this.hostTabIndex
+                : undefined, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), "aria-disabled": a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)), h("ix-tooltip", { key: '94f61e508c2c4653a40462f0a3e86ee86356e687', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": "true", "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["menu-item.scss"]
@@ -394,14 +489,65 @@ export class MenuItem {
                 "reflect": false,
                 "attribute": "is-category",
                 "defaultValue": "false"
+            },
+            "menuCategoryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-category-label"
             }
         };
     }
     static get states() {
         return {
             "tooltip": {},
-            "ariaHiddenTooltip": {},
-            "menuExpanded": {}
+            "menuExpanded": {},
+            "isInMenuContext": {},
+            "hostTabIndex": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setTabIndex": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
         };
     }
     static get elementRef() { return "hostElement"; }

package/dist/collection/components/menu-settings/menu-settings.css

@@ -271,7 +271,4 @@ a {
 }
 :host ix-tabs {
   margin-bottom: 1.5rem;
-}
-:host .settings-tabs {
-  margin-bottom: 1.5rem;
 }

package/dist/collection/components/menu-settings/menu-settings.js

@@ -6,35 +6,83 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { forceUpdate, h, } from "@stencil/core";
-import { MenuTabs } from "../utils/menu-tabs/menu-tabs-fc";
-import { initialize, syncTabDisplay, } from "../utils/menu-tabs/menu-tabs-utils";
+import { iconClose } from "@siemens/ix-icons/icons";
+import { forceUpdate, h, Host, } from "@stencil/core";
 export class MenuSettings {
-    constructor() {
-        /**
-         * Label of first tab
-         */
-        this.label = 'Settings';
-        /**
-         * Aria label for close button
-         */
-        this.ariaLabelCloseButton = 'Close Settings';
-        /** @internal */
-        this.show = false;
-    }
-    updateTab(newLabel, oldLabel) {
-        if (newLabel !== oldLabel) {
-            syncTabDisplay(this, newLabel);
-        }
+    hostElement;
+    /**
+     * Whether to suppress legacy tabs (ix-menu-settings-item) and use slotted
+     * tabs (ix-tab-item) instead
+     *
+     * @since 5.0.0
+     */
+    suppressLegacyTabs = false;
+    /**
+     * Active tab used for legacy ix-menu-settings-item integrations
+     *
+     * @deprecated since 5.0.0, only used for legacy ix-menu-settings-item
+     * integrations
+     * @since 5.0.0
+     */
+    activeTabKey;
+    /**
+     * Label of first tab
+     */
+    label = 'Settings';
+    /**
+     * Aria label for close button
+     */
+    ariaLabelCloseButton = 'Close Settings';
+    /** @internal */
+    show = false;
+    /**
+     * Active tab changed
+     * @since 3.0.0
+     */
+    tabChange;
+    /**
+     * Popover closed
+     */
+    close;
+    itemsObserver;
+    get items() {
+        return Array.from(this.hostElement.querySelectorAll('ix-menu-settings-item'));
     }
     componentWillLoad() {
-        initialize(this);
+        this.itemsObserver = new MutationObserver(() => this.onItemsChange());
+        this.itemsObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['label'],
+        });
+        this.onItemsChange();
+    }
+    disconnectedCallback() {
+        this.itemsObserver?.disconnect();
     }
-    componentDidLoad() {
-        forceUpdate(this.el);
+    onItemsChange() {
+        if (this.suppressLegacyTabs) {
+            return;
+        }
+        if (this.activeTabKey === undefined && this.items.length > 0) {
+            this.activeTabKey = this.items[0].tabKey;
+        }
+    }
+    handleLabelChange() {
+        if (this.suppressLegacyTabs) {
+            return;
+        }
+        forceUpdate(this);
     }
     render() {
-        return h(MenuTabs, { key: 'eefc53f1fa300794513f41b1bc80ac9fd00e295e', context: this });
+        return (h(Host, { key: '05f98cf864c61b155446992713cd31408c3182fa', slot: 'ix-menu-settings', class: {
+                show: this.show,
+                ['legacy-tabs']: !this.suppressLegacyTabs,
+            } }, h("div", { key: 'a119043ecdf9710d73186650b91ee67677000e5b', class: 'settings-header' }, h("h2", { key: '289bef2c46bf0856677dd810b589048db3a4161c', class: "text-h2" }, this.label), h("ix-icon-button", { key: '9c38c31c8f46b777de1dba7a48e27e03870c11bb', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+                name: 'ix-menu-settings',
+                nativeEvent: e,
+            }) })), !this.suppressLegacyTabs ? (h("ix-tab-set", null, h("ix-tabs", { activeTabKey: this.activeTabKey }, this.items.map(({ label, tabKey }) => (h("ix-tab-item", { tabKey: tabKey, selected: tabKey === this.activeTabKey, label: label })))), h("slot", null))) : (h("slot", null))));
     }
     static get is() { return "ix-menu-settings"; }
     static get encapsulation() { return "shadow"; }
@@ -50,7 +98,30 @@ export class MenuSettings {
     }
     static get properties() {
         return {
-            "activeTabLabel": {
+            "suppressLegacyTabs": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Whether to suppress legacy tabs (ix-menu-settings-item) and use slotted\ntabs (ix-tab-item) instead"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suppress-legacy-tabs",
+                "defaultValue": "false"
+            },
+            "activeTabKey": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -61,13 +132,19 @@ export class MenuSettings {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Active tab"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "since 5.0.0, only used for legacy ix-menu-settings-item\nintegrations"
+                        }, {
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Active tab used for legacy ix-menu-settings-item integrations"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "active-tab-label"
+                "attribute": "active-tab-key"
             },
             "label": {
                 "type": "string",
@@ -134,11 +211,6 @@ export class MenuSettings {
             }
         };
     }
-    static get states() {
-        return {
-            "items": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "tabChange",
@@ -182,11 +254,14 @@ export class MenuSettings {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
-    static get watchers() {
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
         return [{
-                "propName": "activeTabLabel",
-                "methodName": "updateTab"
+                "name": "labelChange",
+                "method": "handleLabelChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -6,8 +6,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from "@stencil/core";
-export class MenuSettingsItem {
+import { h, Host, Mixin, } from "@stencil/core";
+import { BaseTabMixin } from "../tab-item/tab.mixin";
+/**
+ * @deprecated since 5.0.0, use ix-tab-item instead of ix-menu-settings-item
+ */
+export class MenuSettingsItem extends Mixin(BaseTabMixin) {
+    constructor() {
+        super();
+    }
+    /**
+     * Settings Item label
+     */
+    label;
+    /**
+     * @internal
+     */
+    labelChange;
     watchLabel(newValue, oldValue) {
         this.labelChange.emit({
             name: 'ix-menu-settings-item',
@@ -16,20 +31,9 @@ export class MenuSettingsItem {
         });
     }
     render() {
-        return (h(Host, { key: '93bcd49368f3bcb45ca4405eb1f75d5a0699b784' }, h("slot", { key: '3d2fd58e28f27f3f8355dc915fc78e15fb64bf61' })));
+        return (h(Host, { key: '48c4f2a2e07a0dc0006d6cac683869439b06faa0' }, h("ix-tab-panel", { key: '04e2fb1c063f897c6c3982645fc977eb1ce7ea82', tabKey: this.tabKey }, h("slot", { key: '34874508577ce1773af32ee09c73b2b9219a2d1e' }))));
     }
     static get is() { return "ix-menu-settings-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["menu-settings-item.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["menu-settings-item.css"]
-        };
-    }
     static get properties() {
         return {
             "label": {
@@ -61,8 +65,11 @@ export class MenuSettingsItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Label changed"
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
                 },
                 "complexType": {
                     "original": "CustomLabelChangeEvent",

package/dist/collection/components/message-bar/message-bar.js

@@ -10,16 +10,36 @@ import { h, Host, } from "@stencil/core";
 import { animate } from "animejs";
 import { iconClose, iconError, iconInfo, iconNotification, iconSuccess, iconWarning, iconWarningRhomb, } from "@siemens/ix-icons/icons";
 export class MessageBar {
-    constructor() {
-        /**
-         * Specifies the type of the alert.
-         */
-        this.type = 'info';
-        /**
-         * If true, close button is disabled and alert cannot be dismissed by the user
-         */
-        this.persistent = false;
-    }
+    /**
+     * Specifies the type of the alert.
+     */
+    type = 'info';
+    /**
+     * If true, close button is disabled and alert cannot be dismissed by the user
+     */
+    persistent = false;
+    /**
+     * An event emitted when the close button is clicked
+     */
+    closedChange;
+    /**
+     * An event emitted when the close animation is completed
+     */
+    closeAnimationCompleted;
+    icon;
+    color;
+    static duration = 300;
+    static messageTypeConfigs = {
+        //TODO(IX-3400): Replace icon colors with proper CSS variables when available
+        alarm: { icon: iconError, color: 'color-alarm' },
+        critical: { icon: iconWarningRhomb, color: 'color-critical' },
+        warning: { icon: iconWarning, color: 'color-warning-text' },
+        success: { icon: iconSuccess, color: 'color-success' },
+        info: { icon: iconInfo, color: 'color-info' },
+        neutral: { icon: iconNotification, color: 'color-neutral' },
+        primary: { icon: iconNotification, color: 'color-primary' },
+    };
+    divElement;
     componentWillRender() {
         const config = MessageBar.messageTypeConfigs[this.type];
         if (config) {
@@ -42,7 +62,7 @@ export class MessageBar {
         }
     }
     render() {
-        return (h(Host, { key: '77cde4e0a2aa39b0838ccef1fe84dcd85a99f0e1' }, h("div", { key: '319882aba72c886393d8162442a56dc8404ed386', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'a204e1952605dc54532a3a862c8d00f9c049727d', color: this.color, name: this.icon }), h("div", { key: 'a1870021581d39097b24fae111a0f3418516cc1b', class: "message-content" }, h("slot", { key: '96e9f8283842a5ef183e62b0b49ea879a61f303e' })), !this.persistent && (h("ix-icon-button", { key: 'a136f9c0b1b557c3f789b569bbef64802f70cc26', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: '958c28d0bae524a1041a8118d9313972139f1f4a' }, h("div", { key: '8e619088864f0475559795ac309e1fbfc8bc1bb3', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'e21c8715adb8ec071aebb393896b20ae41f0cab5', color: this.color, name: this.icon }), h("div", { key: '060da1ce54e588666ec3c8be27b322bef8cbc85d', class: "message-content" }, h("slot", { key: '0d7485fcf2b06989e6a385050622236ad71d96e3' })), !this.persistent && (h("ix-icon-button", { key: 'dab714f06d4f20c379c661f638bffe809778d1d8', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }
@@ -144,14 +164,3 @@ export class MessageBar {
             }];
     }
 }
-MessageBar.duration = 300;
-MessageBar.messageTypeConfigs = {
-    //TODO(IX-3400): Replace icon colors with proper CSS variables when available
-    alarm: { icon: iconError, color: 'color-alarm' },
-    critical: { icon: iconWarningRhomb, color: 'color-critical' },
-    warning: { icon: iconWarning, color: 'color-warning-text' },
-    success: { icon: iconSuccess, color: 'color-success' },
-    info: { icon: iconInfo, color: 'color-info' },
-    neutral: { icon: iconNotification, color: 'color-neutral' },
-    primary: { icon: iconNotification, color: 'color-primary' },
-};