@xlabs-store/core 0.0.1

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

@@ -0,0 +1,273 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xMentionsCss = () => `@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:inline-block;width:100%;position:relative;font-family:var(--x-mentions-font-family, var(--x-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif))}.x-mentions-textarea{width:100%;padding:var(--x-mentions-padding-vertical, var(--x-control-padding-vertical, 4px)) var(--x-mentions-padding-horizontal, var(--x-control-padding-horizontal, 11px));color:var(--x-mentions-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-mentions-font-size, var(--x-font-size-base, 14px));line-height:var(--x-mentions-line-height, var(--x-line-height-base, 1.5714));background-color:var(--x-mentions-bg, var(--x-color-bg-container, #ffffff));background-image:none;border:var(--x-mentions-border-width, var(--x-border-width-base, 1px)) solid var(--x-mentions-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-mentions-border-radius, var(--x-border-radius-xs, 4px));-webkit-transition:all var(--x-mentions-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-mentions-motion-duration, var(--x-motion-duration-mid, 0.2s));resize:vertical}.x-mentions-textarea:hover{border-color:var(--x-mentions-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-mentions-textarea:focus{border-color:var(--x-mentions-border-color-focus, var(--x-color-primary, #1677ff));outline:0;-webkit-box-shadow:var(--x-mentions-focus-shadow, 0 0 0 2px var(--x-color-primary-bg, rgba(22, 119, 255, 0.1)));box-shadow:var(--x-mentions-focus-shadow, 0 0 0 2px var(--x-color-primary-bg, rgba(22, 119, 255, 0.1)))}.x-mentions-textarea:disabled{color:var(--x-mentions-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));background-color:var(--x-mentions-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));cursor:not-allowed}.x-mentions-dropdown{position:absolute;background:var(--x-mentions-dropdown-bg, var(--x-color-bg-elevated, #ffffff));border-radius:var(--x-mentions-border-radius, var(--x-border-radius-xs, 4px));-webkit-box-shadow:var(--x-mentions-dropdown-shadow, var(--x-shadow-lg, 0 6px 16px rgba(0, 0, 0, 0.08)));box-shadow:var(--x-mentions-dropdown-shadow, var(--x-shadow-lg, 0 6px 16px rgba(0, 0, 0, 0.08)));z-index:var(--x-mentions-dropdown-z-index, var(--x-z-index-dropdown, 1050));min-width:var(--x-mentions-dropdown-min-width, 100px)}.x-mentions-dropdown-loading{padding:var(--x-mentions-spacing-xs, var(--x-spacing-xs, 8px));color:var(--x-mentions-loading-color, var(--x-color-text-tertiary, rgba(0, 0, 0, 0.45)));text-align:center}.x-mentions-dropdown-menu{list-style:none;padding:var(--x-mentions-spacing-xxs, var(--x-spacing-xxs, 4px)) 0;margin:0;max-height:var(--x-mentions-dropdown-max-height, 250px);overflow-y:auto}.x-mentions-dropdown-menu-item{padding:var(--x-mentions-spacing-xs, var(--x-spacing-xs, 8px)) var(--x-mentions-spacing-md, var(--x-spacing-md, 16px));cursor:pointer;-webkit-transition:background var(--x-mentions-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-mentions-motion-ease, ease);transition:background var(--x-mentions-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-mentions-motion-ease, ease)}.x-mentions-dropdown-menu-item-active,.x-mentions-dropdown-menu-item:hover{background-color:var(--x-mentions-item-bg-hover, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06)))}`;
+
+const XMentions = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xSelect = createEvent(this, "xSelect", 7);
+        this.xSearch = createEvent(this, "xSearch", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Current input value.
+     * @example
+     * <x-mentions value="@alice"></x-mentions>
+     */
+    value = '';
+    /**
+     * Available mention options.
+     * @example
+     * <x-mentions options={[{ value: 'alice', label: 'Alice' }]}></x-mentions>
+     */
+    options = [];
+    /**
+     * Trigger prefix for mentions.
+     * @example
+     * <x-mentions triggerPrefix={['@', '#']}></x-mentions>
+     */
+    triggerPrefix = '@';
+    /**
+     * Placeholder text.
+     * @example
+     * <x-mentions placeholder="Type @ to mention"></x-mentions>
+     */
+    placeholder = '';
+    /**
+     * Loading state for dropdown.
+     * @example
+     * <x-mentions loading></x-mentions>
+     */
+    loading = false;
+    /**
+     * Disable input.
+     * @example
+     * <x-mentions disabled></x-mentions>
+     */
+    disabled = false;
+    /**
+     * Number of textarea rows.
+     * @example
+     * <x-mentions rows={4}></x-mentions>
+     */
+    rows = 3;
+    /**
+     * Dropdown open state.
+     */
+    open = false;
+    /**
+     * Filtered options based on query.
+     */
+    filterOptions = [];
+    /**
+     * Active option index.
+     */
+    activeIndex = 0;
+    /**
+     * Inline style for dropdown position.
+     */
+    popupStyle = { top: '0', left: '0' };
+    /**
+     * Emits when value changes.
+     * @example
+     * <x-mentions onXChange={(ev) => console.log(ev.detail)}></x-mentions>
+     */
+    xChange;
+    /**
+     * Emits when an option is selected.
+     * @example
+     * <x-mentions onXSelect={(ev) => console.log(ev.detail)}></x-mentions>
+     */
+    xSelect;
+    /**
+     * Emits when search query changes.
+     * @example
+     * <x-mentions onXSearch={(ev) => console.log(ev.detail)}></x-mentions>
+     */
+    xSearch;
+    textarea;
+    measureDiv;
+    /**
+     * Initialize measurement helper after load.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    componentDidLoad() {
+        // Create measure div for caret position
+        this.measureDiv = document.createElement('div');
+        this.measureDiv.style.position = 'absolute';
+        this.measureDiv.style.visibility = 'hidden';
+        this.measureDiv.style.whiteSpace = 'pre-wrap';
+        this.measureDiv.style.wordWrap = 'break-word';
+        this.el.shadowRoot.appendChild(this.measureDiv);
+    }
+    handleWindowClick(ev) {
+        if (!this.el.contains(ev.target)) {
+            this.open = false;
+        }
+    }
+    /**
+     * Handle input change and trigger search.
+     *
+     * Flow:
+     * 1. Updates internal `value` and emits change.
+     * 2. Detects cursor position.
+     * 3. Scans backwards from cursor for trigger prefix (e.g., '@').
+     * 4. If prefix found:
+     *    - Extracts query string between prefix and cursor.
+     *    - Validates query (no spaces).
+     *    - Emits `xSearch`.
+     *    - Filters `options` based on query.
+     *    - If matches found, opens dropdown and positions it.
+     * 5. Else, closes dropdown.
+     *
+     * @param e - Input event from textarea.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        this.xChange.emit(this.value);
+        const cursor = target.selectionStart;
+        const textBeforeCursor = this.value.slice(0, cursor);
+        const lastPrefixIndex = Math.max(...[].concat(this.triggerPrefix).map(p => textBeforeCursor.lastIndexOf(p)));
+        if (lastPrefixIndex !== -1) {
+            const query = textBeforeCursor.slice(lastPrefixIndex + 1);
+            // Check if there is a space between prefix and cursor
+            if (!/\s/.test(query)) {
+                this.xSearch.emit(query);
+                this.filterOptions = this.options.filter(opt => opt.value.toLowerCase().includes(query.toLowerCase()) || opt.label.toLowerCase().includes(query.toLowerCase()));
+                if (this.filterOptions.length > 0) {
+                    this.open = true;
+                    this.activeIndex = 0;
+                    this.updatePopupPosition(target, lastPrefixIndex);
+                    return;
+                }
+            }
+        }
+        this.open = false;
+    }
+    /**
+     * Update dropdown position relative to textarea.
+     * @param textarea - Textarea element.
+     * @param index - Trigger index in value.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    updatePopupPosition(textarea, index) {
+        // Simplified caret position calculation
+        // In a real implementation, we need to mirror textarea styles to measureDiv
+        // and calculate coordinates of the character at index.
+        // For now, just place it below the textarea or at a fixed position relative to cursor approximation.
+        // Copy styles
+        const style = window.getComputedStyle(textarea);
+        this.measureDiv.style.font = style.font;
+        this.measureDiv.style.padding = style.padding;
+        this.measureDiv.style.border = style.border;
+        this.measureDiv.style.width = style.width;
+        const text = textarea.value.slice(0, index + 1);
+        this.measureDiv.textContent = text;
+        // Create a span for the last char to get its position
+        const span = document.createElement('span');
+        span.textContent = '.';
+        this.measureDiv.appendChild(span);
+        // const rect = span.getBoundingClientRect();
+        // const textareaRect = textarea.getBoundingClientRect();
+        // Relative to textarea
+        // This is tricky inside shadow DOM and with scrolling.
+        // Let's just put it at the bottom left of the cursor for now if possible, or just simple dropdown.
+        // Actually, let's try to use the measureDiv height to estimate top.
+        // Since we are in shadow DOM, we can position absolute relative to host.
+        // But textarea might scroll.
+        // Simplified: Just show at bottom of textarea for now to avoid complex math in this session.
+        // Or better: use a library like textarea-caret-position if available, but I can't install.
+        // Let's try a rough approximation:
+        // We can't easily get exact coordinates without a lot of code.
+        // I'll position it at the bottom of the textarea for simplicity in this MVP.
+        this.popupStyle = {
+            top: `${textarea.offsetHeight}px`,
+            left: '0'
+        };
+    }
+    /**
+     * Handle keyboard navigation in dropdown.
+     * @param e - Keyboard event.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    handleKeyDown(e) {
+        if (this.open) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.activeIndex = (this.activeIndex + 1) % this.filterOptions.length;
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.activeIndex = (this.activeIndex - 1 + this.filterOptions.length) % this.filterOptions.length;
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                this.selectOption(this.filterOptions[this.activeIndex]);
+            }
+            else if (e.key === 'Escape') {
+                this.open = false;
+            }
+        }
+    }
+    /**
+     * Select an option and insert into value.
+     *
+     * Flow:
+     * 1. Identifies the trigger prefix position before cursor.
+     * 2. Constructs new value:
+     *    - Text before prefix + prefix + option value + space + text after cursor.
+     * 3. Updates `value` and emits change/select events.
+     * 4. Closes dropdown.
+     * 5. Restores focus and moves cursor to end of inserted mention.
+     *
+     * @param option - Mention option to insert.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    selectOption(option) {
+        const cursor = this.textarea.selectionStart;
+        const textBeforeCursor = this.value.slice(0, cursor);
+        const lastPrefixIndex = Math.max(...[].concat(this.triggerPrefix).map(p => textBeforeCursor.lastIndexOf(p)));
+        const textAfterCursor = this.value.slice(cursor);
+        const prefix = this.value.slice(lastPrefixIndex, lastPrefixIndex + 1);
+        const newValue = this.value.slice(0, lastPrefixIndex) + prefix + option.value + ' ' + textAfterCursor;
+        this.value = newValue;
+        this.xChange.emit(this.value);
+        this.xSelect.emit(option);
+        this.open = false;
+        // Restore focus and cursor
+        setTimeout(() => {
+            this.textarea.focus();
+            // Calculate new cursor position
+            const newCursor = lastPrefixIndex + 1 + option.value.length + 1;
+            this.textarea.setSelectionRange(newCursor, newCursor);
+        }, 0);
+    }
+    /**
+     * Render textarea and dropdown list.
+     * @returns JSX.Element
+     * @example
+     * <x-mentions options={[{ value: 'alice', label: 'Alice' }]}></x-mentions>
+     */
+    render() {
+        return (h(Host, { key: '7223117577aad1c73291ab68fbd70d79b89a0cc8', class: "x-mentions" }, h("textarea", { key: '1ae44273a687c944885622e3508e33658e4715ac', ref: el => this.textarea = el, class: "x-mentions-textarea", value: this.value, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e) }), this.open && (h("div", { key: '5d44c8c63575b764a6b5a9eead7fb92b90ed4164', class: "x-mentions-dropdown", style: this.popupStyle }, this.loading ? (h("div", { class: "x-mentions-dropdown-loading" }, "Loading...")) : (h("ul", { class: "x-mentions-dropdown-menu" }, this.filterOptions.map((option, index) => (h("li", { class: {
+                'x-mentions-dropdown-menu-item': true,
+                'x-mentions-dropdown-menu-item-active': index === this.activeIndex
+            }, onClick: () => this.selectOption(option), onMouseEnter: () => this.activeIndex = index }, option.label)))))))));
+    }
+};
+XMentions.style = xMentionsCss();
+
+export { XMentions as x_mentions };

package/dist/esm/x-menu-divider.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h, H as Host } from './index-ig_mFsVk.js';
+
+const xMenuDividerCss = () => `:host{display:block;height:1px;margin:var(--x-menu-divider-margin-block, var(--x-spacing-xxs, 4px)) var(--x-menu-divider-margin-inline, 0);background-color:var(--x-menu-divider-color, var(--x-color-split, rgba(5, 5, 5, 0.06)));border:none}:host(.x-menu-divider-dashed){background:none;border-top:1px dashed var(--x-menu-divider-color, var(--x-color-split, rgba(5, 5, 5, 0.06)))}:host(.x-menu-divider-dark){background-color:var(--x-menu-divider-dark-color, rgba(255, 255, 255, 0.1))}:host(.x-menu-divider-dark.x-menu-divider-dashed){background:none;border-top-color:var(--x-menu-divider-dark-color, rgba(255, 255, 255, 0.1))}:host(.x-menu-divider-collapsed-hidden){display:none !important}`;
+
+const XMenuDivider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Whether line is dashed.
+     * @example
+     * <x-menu-divider dashed></x-menu-divider>
+     */
+    dashed = false;
+    // ========================================
+    // INTERNAL PROPS (set by parent menu)
+    // ========================================
+    /** @internal */
+    _menuTheme = 'light';
+    /** @internal */
+    _inlineCollapsed = false;
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Render menu divider with theme/collapse classes.
+     * @returns JSX.Element
+     * @example
+     * <x-menu-divider></x-menu-divider>
+     */
+    render() {
+        // Compose classes based on props and internal menu state.
+        const classes = {
+            'x-menu-divider': true,
+            'x-menu-divider-dashed': this.dashed,
+            'x-menu-divider-collapsed-hidden': this._inlineCollapsed,
+            [`x-menu-divider-${this._menuTheme}`]: true,
+        };
+        return (h(Host, { key: '43b87efc6047e948398ec366b047b5ebde5b3f27', class: classes, role: "separator" }));
+    }
+};
+XMenuDivider.style = xMenuDividerCss();
+
+export { XMenuDivider as x_menu_divider };

package/dist/esm/x-menu-item-group.entry.js

@@ -0,0 +1,147 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xMenuItemGroupCss = () => `@charset "UTF-8";:host{display:block}.x-menu-item-group-title{height:var(--x-menu-group-title-height, 32px);padding:0 var(--x-menu-item-padding-inline, var(--x-padding-md, 16px));color:var(--x-menu-group-title-color, var(--x-color-text-description, rgba(0, 0, 0, 0.45)));font-size:var(--x-menu-group-title-font-size, var(--x-font-size-base, 14px));line-height:var(--x-menu-group-title-height, 32px);-webkit-transition:all 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:all 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)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-menu-item-group-list{margin:0;padding:0;list-style:none}:host(.x-menu-item-group-dark) .x-menu-item-group-title{color:var(--x-menu-dark-group-title-color, rgba(255, 255, 255, 0.65))}:host(.x-menu-item-group-collapsed-hidden){display:none !important}`;
+
+const XMenuItemGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * The title of the group.
+     * @example
+     * <x-menu-item-group groupTitle="Group"></x-menu-item-group>
+     */
+    groupTitle;
+    // ========================================
+    // INTERNAL PROPS (set by parent menu)
+    // ========================================
+    /** @internal */
+    _menuMode = 'vertical';
+    /** @internal */
+    _menuTheme = 'light';
+    /** @internal */
+    _inlineCollapsed = false;
+    /** @internal */
+    _level = 0;
+    /** @internal */
+    _inlineIndent = 24;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Sync child props after initial render.
+     * @returns void
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    componentDidLoad() {
+        this.syncChildrenProps();
+    }
+    /**
+     * Sync child props after updates.
+     * @returns void
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    componentDidUpdate() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    handlePropsChange() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Propagate internal menu props to child items and submenus.
+     * @returns void
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    syncChildrenProps() {
+        const syncElement = (element) => {
+            const el = element;
+            const tagName = element.tagName.toLowerCase();
+            // Apply shared props based on child component type.
+            if (tagName === 'x-menu-item') {
+                el._menuMode = this._menuMode;
+                el._menuTheme = this._menuTheme;
+                el._level = this._level;
+                el._inlineIndent = this._inlineIndent;
+            }
+            else if (tagName === 'x-menu-submenu') {
+                el._menuMode = this._menuMode;
+                el._menuTheme = this._menuTheme;
+                el._level = this._level;
+                el._inlineIndent = this._inlineIndent;
+            }
+        };
+        // Read assigned elements from default slot and sync.
+        const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
+        if (slot) {
+            const assignedElements = slot.assignedElements();
+            assignedElements.forEach(el => syncElement(el));
+        }
+    }
+    /**
+     * Calculate inline padding based on nesting level and indent.
+     * @returns string
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    getInlinePadding() {
+        // Only apply padding in inline mode.
+        if (this._menuMode === 'inline') {
+            const paddingLeft = this._level * this._inlineIndent + 16;
+            return `${paddingLeft}px`;
+        }
+        return '';
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Render group title and list slots.
+     * @returns JSX.Element
+     * @example
+     * <x-menu-item-group groupTitle="Group">
+     *   <x-menu-item>Item</x-menu-item>
+     * </x-menu-item-group>
+     */
+    render() {
+        const paddingInlineStart = this.getInlinePadding();
+        // Host class map based on theme and collapsed state.
+        const hostClasses = {
+            'x-menu-item-group': true,
+            'x-menu-item-group-collapsed-hidden': this._inlineCollapsed,
+            [`x-menu-item-group-${this._menuTheme}`]: true,
+        };
+        // Apply padding only when calculated.
+        const titleStyle = paddingInlineStart ? { paddingInlineStart } : {};
+        return (h(Host, { key: '6fc76bbb053651bde5ffcfdae0216c8d0a47c520', class: hostClasses, role: "group" }, h("div", { key: '474e9d78cc1534a08a78cba7849b51b20dccabb5', class: "x-menu-item-group-title", style: titleStyle, part: "title" }, h("slot", { key: '31284eaed7dca12ab8be8440ed4fdfb3b04c9790', name: "title" }, this.groupTitle)), h("ul", { key: 'c0969f8dfde1a16d2bd07e3a5c7a43fafc0fa405', class: "x-menu-item-group-list", part: "list" }, h("slot", { key: '7f4dabd91cd5bd468400200257bd9c0fa74e8022', onSlotchange: () => this.syncChildrenProps() }))));
+    }
+    static get watchers() { return {
+        "_menuMode": [{
+                "handlePropsChange": 0
+            }],
+        "_menuTheme": [{
+                "handlePropsChange": 0
+            }],
+        "_level": [{
+                "handlePropsChange": 0
+            }],
+        "_inlineIndent": [{
+                "handlePropsChange": 0
+            }]
+    }; }
+};
+XMenuItemGroup.style = xMenuItemGroupCss();
+
+export { XMenuItemGroup as x_menu_item_group };