@xlabs-store/core 0.0.1 → 0.0.2

package/dist/esm/x-menu_2.entry.js

@@ -0,0 +1,506 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BMTt8QT3.js';
+
+const xMenuCss = () => `@charset "UTF-8";:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-menu-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-menu-font-size, var(--x-font-size-base, 14px));font-family:var(--x-menu-font-family, var(--x-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));line-height:var(--x-menu-line-height, var(--x-line-height-base, 1.5714285714));list-style:none;background:var(--x-menu-bg, var(--x-color-bg-container, #ffffff));outline:none;-webkit-transition:background var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), width var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:background var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), width var(--x-menu-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-menu-list{margin:0;padding:var(--x-menu-item-margin-block, var(--x-spacing-xxs, 4px)) 0;list-style:none;background:inherit;display:block}:host(.x-menu-horizontal){line-height:var(--x-menu-horizontal-line-height, 46px);border-bottom:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-menu-horizontal) .x-menu-list{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding:0}:host(.x-menu-vertical){-webkit-border-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border-inline-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-menu-inline){-webkit-border-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border-inline-end:var(--x-menu-border-width, var(--x-border-width-base, 1px)) solid var(--x-menu-border-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-menu-inline-collapsed){width:var(--x-menu-collapsed-width, 80px)}:host(.x-menu-inline-collapsed) .x-menu-list{padding:var(--x-menu-item-margin-block, var(--x-spacing-xxs, 4px)) 0}:host(.x-menu-light){background:var(--x-menu-bg, var(--x-color-bg-container, #ffffff));color:var(--x-menu-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}:host(.x-menu-dark){background:var(--x-menu-dark-bg, var(--x-menu-dark-bg, #001529));color:var(--x-menu-dark-color, rgba(255, 255, 255, 0.65))}:host(.x-menu-dark) .x-menu-list{background:var(--x-menu-dark-bg, var(--x-menu-dark-bg, #001529))}:host([borderless]){border:none !important}`;
+
+const XMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xSelect = createEvent(this, "xSelect", 7);
+        this.xDeselect = createEvent(this, "xDeselect", 7);
+        this.xClick = createEvent(this, "xClick", 7);
+        this.xOpenChange = createEvent(this, "xOpenChange", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Type of menu: vertical, horizontal, or inline
+     * @example
+     * <x-menu mode="horizontal"></x-menu>
+     */
+    mode = 'vertical';
+    /**
+     * Color theme of the menu
+     * @example
+     * <x-menu theme="dark"></x-menu>
+     */
+    theme = 'light';
+    /**
+     * Specifies the collapsed status when menu is inline mode
+     * @example
+     * <x-menu inlineCollapsed></x-menu>
+     */
+    inlineCollapsed = false;
+    /**
+     * Indent (in pixels) of inline menu items on each level
+     * @example
+     * <x-menu inlineIndent={32}></x-menu>
+     */
+    inlineIndent = 24;
+    /**
+     * Array with the keys of default selected menu items
+     * @example
+     * <x-menu defaultSelectedKeys={['home']}></x-menu>
+     */
+    defaultSelectedKeys = [];
+    /**
+     * Array with the keys of currently selected menu items (controlled)
+     * @example
+     * <x-menu selectedKeys={['settings']}></x-menu>
+     */
+    selectedKeys;
+    /**
+     * Array with the keys of default opened sub-menus
+     * @example
+     * <x-menu defaultOpenKeys={['sub-1']}></x-menu>
+     */
+    defaultOpenKeys = [];
+    /**
+     * Array with the keys of currently opened sub-menus (controlled)
+     * @example
+     * <x-menu openKeys={['sub-1']}></x-menu>
+     */
+    openKeys;
+    /**
+     * Allows selection of multiple items
+     * @example
+     * <x-menu multiple></x-menu>
+     */
+    multiple = false;
+    /**
+     * Allows selecting menu items
+     * @example
+     * <x-menu selectable={false}></x-menu>
+     */
+    selectable = true;
+    /**
+     * Which action can trigger submenu open/close
+     * @example
+     * <x-menu triggerSubMenuAction="click"></x-menu>
+     */
+    triggerSubMenuAction = 'hover';
+    /**
+     * Delay time to show submenu when mouse enters (in seconds)
+     * @example
+     * <x-menu subMenuOpenDelay={0.2}></x-menu>
+     */
+    subMenuOpenDelay = 0;
+    /**
+     * Delay time to hide submenu when mouse leaves (in seconds)
+     * @example
+     * <x-menu subMenuCloseDelay={0.2}></x-menu>
+     */
+    subMenuCloseDelay = 0.1;
+    // ========================================
+    // STATE
+    // ========================================
+    internalSelectedKeys = [];
+    internalOpenKeys = [];
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Called when a menu item is selected
+     * @example
+     * <x-menu onXSelect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xSelect;
+    /**
+     * Called when a menu item is deselected (multiple mode only)
+     * @example
+     * <x-menu onXDeselect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xDeselect;
+    /**
+     * Called when a menu item is clicked
+     * @example
+     * <x-menu onXClick={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xClick;
+    /**
+     * Called when sub-menus are opened or closed
+     * @example
+     * <x-menu onXOpenChange={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xOpenChange;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    componentWillLoad() {
+        // Initialize internal state from default props
+        this.internalSelectedKeys = this.selectedKeys ?? [...this.defaultSelectedKeys];
+        this.internalOpenKeys = this.openKeys ?? [...this.defaultOpenKeys];
+    }
+    componentDidLoad() {
+        this.syncChildrenProps();
+    }
+    componentDidUpdate() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    handleSelectedKeysChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalSelectedKeys = [...newValue];
+        }
+    }
+    handleOpenKeysChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalOpenKeys = [...newValue];
+        }
+    }
+    handlePropsChange() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    handleItemClick(ev) {
+        ev.stopPropagation();
+        const { key, keyPath, domEvent } = ev.detail;
+        // Emit click event
+        this.xClick.emit({ key, keyPath, domEvent });
+        if (!this.selectable)
+            return;
+        const currentSelected = this.getSelectedKeys();
+        const isSelected = currentSelected.includes(key);
+        if (this.multiple) {
+            // Multiple selection mode
+            // Flow:
+            // 1. If already selected, remove from list (deselect).
+            // 2. If not selected, add to list (select).
+            // 3. Emit appropriate event (xSelect/xDeselect).
+            if (isSelected) {
+                // Deselect
+                const newSelected = currentSelected.filter(k => k !== key);
+                this.updateSelectedKeys(newSelected);
+                this.xDeselect.emit({ key, keyPath, selectedKeys: newSelected, domEvent });
+            }
+            else {
+                // Select
+                const newSelected = [...currentSelected, key];
+                this.updateSelectedKeys(newSelected);
+                this.xSelect.emit({ key, keyPath, selectedKeys: newSelected, domEvent });
+            }
+        }
+        else {
+            // Single selection mode
+            // Flow:
+            // 1. If not selected, replace current selection with new key.
+            // 2. Emit xSelect.
+            if (!isSelected) {
+                this.updateSelectedKeys([key]);
+                this.xSelect.emit({ key, keyPath, selectedKeys: [key], domEvent });
+            }
+        }
+    }
+    /**
+     * Listens for submenu toggle events.
+     * Updates the open keys state and emits change event.
+     *
+     * Flow:
+     * 1. Stops event propagation.
+     * 2. Retrieves the key and target open state from the event detail.
+     * 3. Updates the list of open keys:
+     *    - If opening: Appends the key to the list.
+     *    - If closing: Filters the key out of the list.
+     * 4. Updates internal state and emits `xOpenChange`.
+     *
+     * @param {CustomEvent<SubmenuToggleDetail>} ev - The toggle event.
+     */
+    handleSubmenuToggle(ev) {
+        ev.stopPropagation();
+        const { key, open } = ev.detail;
+        const currentOpen = this.getOpenKeys();
+        let newOpenKeys;
+        if (open) {
+            newOpenKeys = [...currentOpen, key];
+        }
+        else {
+            newOpenKeys = currentOpen.filter(k => k !== key);
+        }
+        this.updateOpenKeys(newOpenKeys);
+        this.xOpenChange.emit({ openKeys: newOpenKeys });
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    getSelectedKeys() {
+        return this.selectedKeys ?? this.internalSelectedKeys;
+    }
+    getOpenKeys() {
+        return this.openKeys ?? this.internalOpenKeys;
+    }
+    updateSelectedKeys(keys) {
+        if (this.selectedKeys === undefined) {
+            // Uncontrolled mode
+            this.internalSelectedKeys = keys;
+        }
+        // In controlled mode, parent should update via prop
+    }
+    updateOpenKeys(keys) {
+        if (this.openKeys === undefined) {
+            // Uncontrolled mode
+            this.internalOpenKeys = keys;
+        }
+        // In controlled mode, parent should update via prop
+    }
+    syncChildrenProps() {
+        const selectedKeys = this.getSelectedKeys();
+        const openKeys = this.getOpenKeys();
+        const effectiveMode = this.inlineCollapsed && this.mode === 'inline' ? 'vertical' : this.mode;
+        // Sync props to direct children
+        // Flow:
+        // 1. Iterates over assigned elements in slot.
+        // 2. Sets internal props (_menuMode, _menuTheme, _selected, etc.) on items/submenus.
+        // 3. This ensures children react to parent state changes (like collapse/theme).
+        const syncElement = (element, level = 0) => {
+            const el = element;
+            const tagName = element.tagName.toLowerCase();
+            if (tagName === 'x-menu-item') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+                el._selected = selectedKeys.includes(el.itemKey);
+            }
+            else if (tagName === 'x-menu-submenu') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+                el._open = openKeys.includes(el.itemKey);
+                el._triggerSubMenuAction = this.triggerSubMenuAction;
+                el._subMenuOpenDelay = this.subMenuOpenDelay;
+                el._subMenuCloseDelay = this.subMenuCloseDelay;
+                el._selectedKeys = selectedKeys;
+            }
+            else if (tagName === 'x-menu-item-group') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+            }
+            else if (tagName === 'x-menu-divider') {
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+            }
+        };
+        // Get all slotted children
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot) {
+            const assignedElements = slot.assignedElements();
+            assignedElements.forEach(el => syncElement(el, 0));
+        }
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Main render method for the menu component.
+     *
+     * Flow:
+     * 1. Determines the effective mode (handles inline collapsed state becoming vertical).
+     * 2. Constructs the class map for the host element based on mode and theme.
+     * 3. Renders the Host element with role="menu".
+     * 4. Renders a `<ul>` list container.
+     * 5. Renders the default slot for menu items and submenus.
+     * 6. Listens to `slotchange` to sync props to new children.
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render() {
+        const effectiveMode = this.inlineCollapsed && this.mode === 'inline' ? 'vertical' : this.mode;
+        const classes = {
+            'x-menu': true,
+            'x-menu-root': true,
+            [`x-menu-${effectiveMode}`]: true,
+            [`x-menu-${this.theme}`]: true,
+            'x-menu-inline-collapsed': this.inlineCollapsed && this.mode === 'inline',
+        };
+        return (h(Host, { key: '7844d940a9362e8c5976b12b8dfa564aae5117ac', class: classes, role: "menu" }, h("ul", { key: '01d56745bb75774a3700eafa28fd6d5c8cfff507', class: "x-menu-list", part: "list" }, h("slot", { key: 'df485eacd98937dcc2e056f27ce22bb4dc8c89ba', onSlotchange: () => this.syncChildrenProps() }))));
+    }
+    static get watchers() { return {
+        "selectedKeys": [{
+                "handleSelectedKeysChange": 0
+            }],
+        "openKeys": [{
+                "handleOpenKeysChange": 0
+            }],
+        "mode": [{
+                "handlePropsChange": 0
+            }],
+        "theme": [{
+                "handlePropsChange": 0
+            }],
+        "inlineCollapsed": [{
+                "handlePropsChange": 0
+            }],
+        "inlineIndent": [{
+                "handlePropsChange": 0
+            }]
+    }; }
+};
+XMenu.style = xMenuCss();
+
+const xMenuItemCss = () => `@charset "UTF-8";:host{display:block;position:relative;margin:0 var(--x-menu-item-margin-inline, 4px) var(--x-menu-item-margin-block, 4px);font-family:var(--x-menu-item-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));font-size:var(--x-menu-item-font-size, var(--x-font-size, 14px));cursor:pointer;-webkit-transition:color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-menu-item-inner{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--x-menu-item-height, 40px);padding:0 var(--x-menu-item-padding-inline, 16px);border-radius:var(--x-menu-item-border-radius, var(--x-border-radius-lg, 8px));color:var(--x-menu-item-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));line-height:var(--x-menu-item-height, 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:inherit;transition:inherit}.x-menu-item-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;min-width:var(--x-menu-icon-size, 14px);-webkit-margin-end:var(--x-menu-icon-margin-inline-end, 10px);margin-inline-end:var(--x-menu-icon-margin-inline-end, 10px);font-size:var(--x-menu-icon-size, 14px);-webkit-transition:font-size var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), margin var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:font-size var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), margin var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-menu-item-icon:empty{display:none}.x-menu-item-content{-ms-flex:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.x-menu-item-extra{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--x-menu-icon-margin-inline-end, 10px);padding-inline-start:var(--x-menu-icon-margin-inline-end, 10px);font-size:var(--x-menu-item-font-size, var(--x-font-size, 14px));color:inherit;opacity:0.65}.x-menu-item-extra:empty{display:none}:host(.x-menu-item-light) .x-menu-item-inner{color:var(--x-menu-item-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}:host(.x-menu-item-light):hover .x-menu-item-inner,:host(.x-menu-item-light).x-menu-item-hover .x-menu-item-inner{color:var(--x-menu-item-color-hover, var(--x-color-text, rgba(0, 0, 0, 0.88)));background-color:var(--x-menu-item-bg-hover, rgba(0, 0, 0, 0.06))}:host(.x-menu-item-light).x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-color-selected, var(--x-color-primary, #1677ff));background-color:var(--x-menu-item-bg-selected, var(--x-color-primary-bg, #e6f4ff))}:host(.x-menu-item-light).x-menu-item-disabled{cursor:not-allowed}:host(.x-menu-item-light).x-menu-item-disabled .x-menu-item-inner{color:var(--x-menu-item-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));background:none}:host(.x-menu-item-light).x-menu-item-danger .x-menu-item-inner{color:var(--x-menu-item-danger-color, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-light).x-menu-item-danger:hover .x-menu-item-inner{color:var(--x-menu-item-danger-color-hover, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-light).x-menu-item-danger.x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-danger-color-selected, var(--x-color-error, #ff4d4f));background-color:var(--x-menu-item-danger-bg-selected, var(--x-color-error-bg, #fff2f0))}:host(.x-menu-item-dark) .x-menu-item-inner{color:var(--x-menu-item-dark-color, rgba(255, 255, 255, 0.65))}:host(.x-menu-item-dark):hover .x-menu-item-inner,:host(.x-menu-item-dark).x-menu-item-hover .x-menu-item-inner{color:var(--x-menu-item-dark-color-hover, #ffffff);background-color:var(--x-menu-item-dark-bg-hover, rgba(255, 255, 255, 0.08))}:host(.x-menu-item-dark).x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-dark-color-selected, #ffffff);background-color:var(--x-menu-item-dark-bg-selected, var(--x-color-primary, #1677ff))}:host(.x-menu-item-dark).x-menu-item-disabled{cursor:not-allowed}:host(.x-menu-item-dark).x-menu-item-disabled .x-menu-item-inner{color:var(--x-menu-item-dark-color-disabled, rgba(255, 255, 255, 0.25));background:none}:host(.x-menu-item-dark).x-menu-item-danger .x-menu-item-inner{color:var(--x-menu-item-dark-danger-color, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-dark).x-menu-item-danger:hover .x-menu-item-inner{color:var(--x-menu-item-dark-danger-color-hover, #ff7875)}:host(.x-menu-item-dark).x-menu-item-danger.x-menu-item-selected .x-menu-item-inner{color:var(--x-menu-item-dark-danger-color-selected, #ffffff);background-color:var(--x-menu-item-dark-danger-bg-selected, var(--x-color-error, #ff4d4f))}:host(.x-menu-item-collapsed){margin:0 auto var(--x-menu-item-margin-block, 4px);width:calc(100% - var(--x-menu-item-margin-inline, 4px) * 2)}:host(.x-menu-item-collapsed) .x-menu-item-inner{-ms-flex-pack:center;justify-content:center;padding:0}:host(.x-menu-item-collapsed) .x-menu-item-icon{-webkit-margin-end:0;margin-inline-end:0;font-size:var(--x-menu-icon-size, 14px)}:host(.x-menu-item-collapsed) .x-menu-item-content,:host(.x-menu-item-collapsed) .x-menu-item-extra{display:none;width:0;opacity:0;overflow:hidden}:host(.x-menu-item-collapsed-hidden){display:none !important}:host(.x-menu-item-horizontal){margin:0}:host(.x-menu-item-horizontal) .x-menu-item-inner{height:var(--x-menu-horizontal-line-height, 46px);line-height:var(--x-menu-horizontal-line-height, 46px);padding:0 var(--x-menu-item-padding-inline, 16px);border-radius:0}:host(.x-menu-item-horizontal) .x-menu-item-inner::after{content:"";position:absolute;right:var(--x-menu-item-padding-inline, 16px);bottom:0;left:var(--x-menu-item-padding-inline, 16px);border-bottom:var(--x-menu-active-bar-height, 2px) solid transparent;-webkit-transition:border-color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:border-color var(--x-menu-item-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-menu-item-motion-ease, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}:host(.x-menu-item-horizontal).x-menu-item-light:hover .x-menu-item-inner,:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-hover .x-menu-item-inner{background-color:transparent;color:var(--x-menu-horizontal-item-color-hover, var(--x-color-primary, #1677ff))}:host(.x-menu-item-horizontal).x-menu-item-light:hover .x-menu-item-inner::after,:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-hover .x-menu-item-inner::after{border-bottom-color:var(--x-menu-horizontal-item-color-hover, var(--x-color-primary, #1677ff))}:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-selected .x-menu-item-inner{background-color:transparent;color:var(--x-menu-horizontal-item-color-selected, var(--x-color-primary, #1677ff))}:host(.x-menu-item-horizontal).x-menu-item-light.x-menu-item-selected .x-menu-item-inner::after{border-bottom-color:var(--x-menu-horizontal-item-color-selected, var(--x-color-primary, #1677ff))}`;
+
+const XMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xMenuItemClick = createEvent(this, "xMenuItemClick", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Unique ID of the menu item
+     * @example
+     * <x-menu-item itemKey="home">Home</x-menu-item>
+     */
+    itemKey = '';
+    /**
+     * Display the danger style
+     * @example
+     * <x-menu-item danger>Delete</x-menu-item>
+     */
+    danger = false;
+    /**
+     * Whether menu item is disabled
+     * @example
+     * <x-menu-item disabled>Disabled</x-menu-item>
+     */
+    disabled = false;
+    /**
+     * Set display title for collapsed item
+     * @example
+     * <x-menu-item itemTitle="Dashboard">Dashboard</x-menu-item>
+     */
+    itemTitle;
+    // ========================================
+    // INTERNAL PROPS (set by parent menu)
+    // ========================================
+    /** @internal */
+    _menuMode = 'vertical';
+    /** @internal */
+    _menuTheme = 'light';
+    /** @internal */
+    _inlineCollapsed = false;
+    /** @internal */
+    _level = 0;
+    /** @internal */
+    _inlineIndent = 24;
+    /** @internal */
+    _selected = false;
+    /** @internal */
+    _keyPath = [];
+    // ========================================
+    // STATE
+    // ========================================
+    isHovered = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when the menu item is clicked (internal)
+     * @example
+     * <x-menu-item onXMenuItemClick={(ev) => console.log(ev.detail)}>Item</x-menu-item>
+     */
+    xMenuItemClick;
+    // ========================================
+    // WATCHERS
+    // ========================================
+    handleSelectedChange() {
+        // Force re-render when selection changes
+    }
+    // ========================================
+    // HANDLERS
+    // ========================================
+    /**
+     * Handle click event.
+     *
+     * Flow:
+     * 1. Checks if disabled.
+     * 2. Constructs key path including self.
+     * 3. Emits `xMenuItemClick` event with key, keyPath, and original event.
+     *
+     * @param e - Mouse event.
+     */
+    handleClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const keyPath = [...this._keyPath, this.itemKey];
+        this.xMenuItemClick.emit({
+            key: this.itemKey,
+            keyPath,
+            domEvent: e,
+        });
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled) {
+            this.isHovered = true;
+        }
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    // ========================================
+    // RENDER
+    // ========================================
+    getInlinePadding() {
+        if (this._menuMode === 'inline' && !this._inlineCollapsed) {
+            const paddingLeft = this._level * this._inlineIndent + 16;
+            return `${paddingLeft}px`;
+        }
+        return '';
+    }
+    /**
+     * Render menu item content.
+     *
+     * Flow:
+     * 1. Calculates inline padding based on level and indent (for inline mode).
+     * 2. Determines collapsed state logic (level 0 vs nested).
+     * 3. Constructs CSS classes for state (selected, disabled, danger, hover, mode, theme).
+     * 4. Renders host element with accessibility attributes.
+     * 5. Renders inner content with icon, default slot, and extra slot.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-menu-item itemKey="settings">Settings</x-menu-item>
+     */
+    render() {
+        const paddingInlineStart = this.getInlinePadding();
+        const isCollapsedLevel0 = this._inlineCollapsed && this._level === 0;
+        const isCollapsedNested = this._inlineCollapsed && this._level > 0;
+        const classes = {
+            'x-menu-item': true,
+            'x-menu-item-selected': this._selected,
+            'x-menu-item-disabled': this.disabled,
+            'x-menu-item-danger': this.danger,
+            'x-menu-item-hover': this.isHovered,
+            'x-menu-item-collapsed': isCollapsedLevel0,
+            'x-menu-item-collapsed-hidden': isCollapsedNested,
+            [`x-menu-item-${this._menuMode}`]: true,
+            [`x-menu-item-${this._menuTheme}`]: true,
+        };
+        const style = paddingInlineStart ? { paddingInlineStart } : {};
+        return (h(Host, { key: '3c7cfe327eba32426ed086056ee48aae943d9fc0', class: classes, role: "menuitem", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, "aria-selected": this._selected ? 'true' : 'false', title: this._inlineCollapsed ? this.itemTitle || undefined : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'd0cf40eb14a0dd3a0c36460ee7706a64e10cf260', class: "x-menu-item-inner", style: style, part: "item" }, h("span", { key: '998fcee3175881c9063e193cc20def7fe1526dfa', class: "x-menu-item-icon", part: "icon" }, h("slot", { key: '25886dd0daf7f2c864dda17531f055a2a5a8daf9', name: "icon" })), h("span", { key: 'e43e54efdbf101f1f3ff5fe8b915748986e7b097', class: "x-menu-item-content", part: "content" }, h("slot", { key: '18c24407717f3ded4949cc47ef20a5c4697dbe32' })), h("span", { key: '5fae33d727bf3687b258d2d608ce72e393195b1e', class: "x-menu-item-extra", part: "extra" }, h("slot", { key: '012ffa51ea15457af67a5bffc29d340ece24f0ba', name: "extra" })))));
+    }
+    static get watchers() { return {
+        "_selected": [{
+                "handleSelectedChange": 0
+            }]
+    }; }
+};
+XMenuItem.style = xMenuItemCss();
+
+export { XMenu as x_menu, XMenuItem as x_menu_item };

package/dist/esm/x-message.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
-import { g as getIcon } from './config-BPeosvTA.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BMTt8QT3.js';
+import { g as getIcon } from './config-RKpMhZmc.js';
 
-const xMessageCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;margin-bottom:var(--x-message-notice-margin-bottom, 8px);pointer-events:none;opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), -webkit-transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1));transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), -webkit-transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1));transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1));transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), -webkit-transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1))}:host(.x-message-visible){opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}:host(.x-message-closing){opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);margin-bottom:0;max-height:0;overflow:hidden}.x-message-content{padding:var(--x-message-content-padding-block, 9px) var(--x-message-content-padding-inline, 12px);background:var(--x-message-content-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-message-content-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-message-content-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05));box-shadow:var(--x-message-content-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05));pointer-events:all;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:var(--x-message-content-font-size, 14px);line-height:var(--x-message-content-line-height, 1.5714);color:var(--x-message-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-message-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-right:var(--x-message-icon-margin-right, 8px);font-size:var(--x-message-icon-font-size, 16px);line-height:1}.x-message-icon svg{width:1em;height:1em;fill:currentColor}.x-message-icon-info{color:var(--x-message-icon-info-color, var(--x-color-info, #1677ff))}.x-message-icon-success{color:var(--x-message-icon-success-color, var(--x-color-success, #52c41a))}.x-message-icon-error{color:var(--x-message-icon-error-color, var(--x-color-error, #ff4d4f))}.x-message-icon-warning{color:var(--x-message-icon-warning-color, var(--x-color-warning, #faad14))}.x-message-icon-loading{color:var(--x-message-icon-loading-color, var(--x-color-primary, #1677ff));-webkit-animation:x-message-loading-spin 1s linear infinite;animation:x-message-loading-spin 1s linear infinite}@-webkit-keyframes x-message-loading-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes x-message-loading-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+const xMessageCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-text-processing:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',     'Noto Color Emoji';--x-font-family-code:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:block;margin-bottom:var(--x-message-notice-margin-bottom, 8px);pointer-events:none;opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), -webkit-transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1));transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), -webkit-transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1));transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1));transition:opacity var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), margin var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1)), -webkit-transform var(--x-message-motion-duration, 0.3s) var(--x-message-motion-ease-out, cubic-bezier(0.215, 0.61, 0.355, 1))}:host(.x-message-visible){opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}:host(.x-message-closing){opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);margin-bottom:0;max-height:0;overflow:hidden}.x-message-content{padding:var(--x-message-content-padding-block, 9px) var(--x-message-content-padding-inline, 12px);background:var(--x-message-content-bg, var(--x-color-bg-container, #ffffff));border-radius:var(--x-message-content-border-radius, var(--x-border-radius-lg, 8px));-webkit-box-shadow:var(--x-message-content-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05));box-shadow:var(--x-message-content-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05));pointer-events:all;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:var(--x-message-content-font-size, 14px);line-height:var(--x-message-content-line-height, 1.5714);color:var(--x-message-content-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-message-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-right:var(--x-message-icon-margin-right, 8px);font-size:var(--x-message-icon-font-size, 16px);line-height:1}.x-message-icon svg{width:1em;height:1em;fill:currentColor}.x-message-icon-info{color:var(--x-message-icon-info-color, var(--x-color-info, #1677ff))}.x-message-icon-success{color:var(--x-message-icon-success-color, var(--x-color-success, #52c41a))}.x-message-icon-error{color:var(--x-message-icon-error-color, var(--x-color-error, #ff4d4f))}.x-message-icon-warning{color:var(--x-message-icon-warning-color, var(--x-color-warning, #faad14))}.x-message-icon-loading{color:var(--x-message-icon-loading-color, var(--x-color-primary, #1677ff));-webkit-animation:x-message-loading-spin 1s linear infinite;animation:x-message-loading-spin 1s linear infinite}@-webkit-keyframes x-message-loading-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes x-message-loading-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
 
 /**
  * SVG icons for different message types
@@ -167,7 +167,7 @@ const XMessage = class {
      * await el.getClosePromise()
      */
     async getClosePromise() {
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             this.closeResolver = resolve;
         });
     }
@@ -198,18 +198,18 @@ const XMessage = class {
      */
     renderIcon() {
         const iconHtml = this.icon || getTypeIcon(this.type);
-        return (h("span", { class: `x-message-icon x-message-icon-${this.type}`, innerHTML: iconHtml }));
+        return h("span", { class: `x-message-icon x-message-icon-${this.type}`, innerHTML: iconHtml });
     }
     /**
      * Render message container.
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: '27f27d0cedb9c427b306f02dadefadb9f7d1e9ad', class: {
+        return (h(Host, { key: '7e8fda4dcf923e1a6e3ea109bd780259fff539ad', class: {
                 'x-message': true,
                 'x-message-visible': this.visible,
                 'x-message-closing': this.closing,
-            } }, h("div", { key: 'cc0235875ed024071e865dedfd50380e4c99a8cc', class: "x-message-content" }, this.renderIcon(), h("span", { key: 'e338452129ada22dbc568af07aaaa99a82e03ee5', class: "x-message-text", innerHTML: this.content }))));
+            } }, h("div", { key: 'd1d215171a81b7dde843e9f40a3178e267bb035a', class: "x-message-content" }, this.renderIcon(), h("span", { key: '2345b3d5d8e5b4d9dc48d5992402d59201359eb1', class: "x-message-text", innerHTML: this.content }))));
     }
 };
 XMessage.style = xMessageCss();