@aquera/nile-elements 1.2.7-beta-1.5 → 1.2.7-beta-1.6

package/dist/src/nile-lite-tooltip/nile-lite-tooltip.js

@@ -0,0 +1,344 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-lite-tooltip.css';
+import NileElement from '../internal/nile-element';
+import tippy, { followCursor, roundArrow, createSingleton } from 'tippy.js';
+import { parseFollowCursor, parseDuration } from './utils';
+/**
+ * Nile lite-tooltip component.
+ *
+ * Supports wrapper, sibling (for), and singleton modes.
+ * Aligns with Tippy.js props and Nile design system.
+ *
+ * @tag nile-lite-tooltip
+ */
+let NileliteTooltip = class NileliteTooltip extends NileElement {
+    static get styles() {
+        return [styles];
+    }
+    createRenderRoot() {
+        return this; // lite DOM
+    }
+    constructor() {
+        super();
+        // ───────────── Props ─────────────
+        /** ID of the target element (for sibling mode) */
+        this.for = null;
+        /** Tooltip content text or HTML */
+        this.content = '';
+        /** Tooltip size (applies CSS class) */
+        this.size = 'small';
+        /** Animation duration for show/hide (ms). Can be a single value or [show, hide]. */
+        this.duration = 200;
+        /** Interactive mode */
+        this.interactive = false;
+        /** Placement of the tooltip */
+        this.placement = 'top';
+        /** Disabled state */
+        this.disabled = false;
+        /** Distance (Popper offset Y or main axis) */
+        this.distance = 8;
+        /** Skidding (Popper offset X or cross axis) */
+        this.skidding = 0;
+        /** Whether tooltip is open (controlled mode) */
+        this.open = false;
+        /** Trigger behavior */
+        this.trigger = 'mouseenter focus';
+        /** Allow HTML content rendering */
+        this.allowHTML = false;
+        /** Cursor following mode */
+        this.followCursor = false;
+        /** Arrow type for tooltip */
+        this.arrow = 'default';
+        /** Enables singleton mode when multiple children exist */
+        this.singleton = false;
+        /** Not added in Doc */
+        /** Delay before show/hide (ms or [show, hide]) */
+        this.delay = 0;
+        /** Tooltip max width */
+        this.maxWidth = 'auto';
+        /** Z-index of tooltip */
+        this.zIndex = 9999;
+        /** Whether tooltip hides on click */
+        this.hideOnClick = true;
+        /** Enables inertia motion effect */
+        this.inertia = false;
+        /** Interactive border (px) */
+        this.interactiveBorder = 2;
+        this.injectTippyStyles();
+    }
+    // Inject custom styles for tooltips
+    injectTippyStyles() {
+        const STYLE_ID = 'nile-lite-tooltip-styles';
+        if (document.getElementById(STYLE_ID))
+            return;
+        const style = document.createElement('style');
+        style.id = STYLE_ID;
+        style.textContent = `
+      .tippy-box[data-animation=fade][data-state=hidden] { opacity: 0; }
+      [data-tippy-root] { max-width: calc(100vw - 10px); }
+      .tippy-box {
+        position: relative;
+        background-color: #333;
+        color: #fff;
+        border-radius: 4px;
+        font-size: 14px;
+        line-height: 1.4;
+        white-space: normal;
+        outline: 0;
+        transition-property: transform, visibility, opacity;
+      }
+
+      /* Placement-specific arrows */
+      .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0; }
+      .tippy-box[data-placement^=top] > .tippy-arrow:before {
+        bottom: -7px;
+        border-width: 8px 8px 0;
+        border-top-color: initial;
+      }
+
+      .tippy-box[data-placement^=bottom] > .tippy-arrow { top: 0; }
+      .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
+        top: -7px;
+        border-width: 0 8px 8px;
+        border-bottom-color: initial;
+      }
+
+      .tippy-box[data-placement^=left] > .tippy-arrow { right: 0; }
+      .tippy-box[data-placement^=left] > .tippy-arrow:before {
+        right: -7px;
+        border-width: 8px 0 8px 8px;
+        border-left-color: initial;
+      }
+
+      .tippy-box[data-placement^=right] > .tippy-arrow { left: 0; }
+      .tippy-box[data-placement^=right] > .tippy-arrow:before {
+        left: -7px;
+        border-width: 8px 8px 8px 0;
+        border-right-color: initial;
+      }
+
+      .tippy-box[data-inertia][data-state=visible] {
+        transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+      }
+
+      .tippy-box.large { font-size: 16px; padding: 8px 12px; }
+      .tippy-arrow { width: 16px; height: 16px; color: #333; }
+      .tippy-arrow:before {
+        content: "";
+        position: absolute;
+        border-color: transparent;
+        border-style: solid;
+      }
+
+      .tippy-content {
+        position: relative;
+        padding: 2px 6px;
+        z-index: 1;
+      }
+		.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
+    `;
+        document.head.appendChild(style);
+    }
+    firstUpdated() {
+        this.attachTooltip();
+    }
+    attachTooltip() {
+        this.destroyTooltips();
+        if (this.disabled)
+            return;
+        const options = {
+            content: this.content || this.getAttribute('data-tippy-content') || undefined,
+            placement: this.placement,
+            trigger: this.trigger,
+            offset: [this.skidding, this.distance],
+            theme: 'lite',
+            animation: 'fade',
+            interactive: this.interactive,
+            arrow: roundArrow,
+            duration: parseDuration(this.duration),
+            allowHTML: this.allowHTML,
+            delay: this.delay,
+            maxWidth: this.maxWidth,
+            zIndex: this.zIndex,
+            hideOnClick: false,
+            inertia: this.inertia,
+            interactiveBorder: this.interactiveBorder,
+            appendTo: document.body,
+            followCursor: parseFollowCursor(this.followCursor),
+            plugins: parseFollowCursor(this.followCursor) ? [followCursor] : [],
+            onShow: instance => {
+                this.open = true;
+                this.dispatchEvent(new CustomEvent('nile-show', { detail: { instance, target: instance.reference } }));
+                this.dispatchEvent(new CustomEvent('nile-toggle', { detail: { open: true, instance, target: instance.reference } }));
+                return undefined;
+            },
+            onHide: instance => {
+                this.open = false;
+                this.dispatchEvent(new CustomEvent('nile-hide', { detail: { instance, target: instance.reference } }));
+                this.dispatchEvent(new CustomEvent('nile-toggle', { detail: { open: false, instance, target: instance.reference } }));
+                return undefined;
+            },
+        };
+        if (this.for) {
+            this.targetEl = document.getElementById(this.for);
+            if (!this.targetEl)
+                return;
+            if (!this.id) {
+                this.generatedId = `nile-tooltip-${Math.random().toString(36).slice(2, 9)}`;
+                this.id = this.generatedId;
+            }
+            this.prevDescribedby = this.targetEl.getAttribute('aria-describedby');
+            const describedby = this.prevDescribedby
+                ? `${this.prevDescribedby} ${this.id}`
+                : this.id;
+            this.targetEl.setAttribute('aria-describedby', describedby);
+            this.singleInstance = tippy(this.targetEl, options);
+            if (this.size)
+                this.singleInstance.popper
+                    .querySelector('.tippy-box')
+                    ?.classList.add(this.size);
+            if (this.open) {
+                queueMicrotask(() => this.singleInstance?.show());
+            }
+            return;
+        }
+        const children = Array.from(this.querySelectorAll('*'));
+        if (children.length > 0) {
+            this.tooltipInstances = children.map(child => {
+                const el = child;
+                const localContent = el.getAttribute('content') || this.content;
+                const instance = tippy(el, { ...options, content: localContent });
+                instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+                return instance;
+            });
+            if (this.singleton && this.tooltipInstances.length > 1) {
+                this.singletonInstance = createSingleton(this.tooltipInstances, {
+                    delay: [75, 0],
+                    arrow: roundArrow,
+                    moveTransition: 'transform 0.15s ease-out',
+                });
+            }
+            if (this.open) {
+                if (this.singletonInstance)
+                    this.singletonInstance.show();
+                else
+                    this.tooltipInstances.forEach(t => t.show());
+            }
+        }
+    }
+    destroyTooltips() {
+        this.tooltipInstances?.forEach(t => t.destroy());
+        this.singleInstance?.destroy();
+        this.singletonInstance?.destroy();
+        this.tooltipInstances = undefined;
+        this.singleInstance = undefined;
+        this.singletonInstance = undefined;
+        if (this.targetEl && this.id) {
+            const current = this.targetEl
+                .getAttribute('aria-describedby')
+                ?.split(' ')
+                .filter(id => id !== this.id)
+                .join(' ')
+                .trim();
+            if (current) {
+                this.targetEl.setAttribute('aria-describedby', current);
+            }
+            else {
+                this.targetEl.removeAttribute('aria-describedby');
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyTooltips();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (['for', 'content', 'placement', 'distance', 'skidding', 'trigger', 'disabled', 'hoist', 'size', 'arrow', 'singleton']
+            .some(p => changed.has(p))) {
+            this.attachTooltip();
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                this.singleInstance?.show();
+                this.singletonInstance?.show();
+                this.tooltipInstances?.forEach(t => t.show());
+            }
+            else {
+                this.singleInstance?.hide();
+                this.singletonInstance?.hide();
+                this.tooltipInstances?.forEach(t => t.hide());
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'for' })
+], NileliteTooltip.prototype, "for", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileliteTooltip.prototype, "content", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileliteTooltip.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileliteTooltip.prototype, "duration", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileliteTooltip.prototype, "interactive", void 0);
+__decorate([
+    property({ type: String })
+], NileliteTooltip.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileliteTooltip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], NileliteTooltip.prototype, "distance", void 0);
+__decorate([
+    property({ type: Number })
+], NileliteTooltip.prototype, "skidding", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileliteTooltip.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], NileliteTooltip.prototype, "trigger", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileliteTooltip.prototype, "allowHTML", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileliteTooltip.prototype, "followCursor", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileliteTooltip.prototype, "arrow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileliteTooltip.prototype, "singleton", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileliteTooltip.prototype, "delay", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileliteTooltip.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: Number })
+], NileliteTooltip.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: [Boolean, String], reflect: true })
+], NileliteTooltip.prototype, "hideOnClick", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileliteTooltip.prototype, "inertia", void 0);
+__decorate([
+    property({ type: Number })
+], NileliteTooltip.prototype, "interactiveBorder", void 0);
+NileliteTooltip = __decorate([
+    customElement('nile-lite-tooltip')
+], NileliteTooltip);
+export { NileliteTooltip };
+export default NileliteTooltip;
+//# sourceMappingURL=nile-lite-tooltip.js.map

package/dist/src/nile-lite-tooltip/nile-lite-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-lite-tooltip.js","sourceRoot":"","sources":["../../../src/nile-lite-tooltip/nile-lite-tooltip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,EAAE,EAAmB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D;;;;;;;GAOG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IACvC,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAES,gBAAgB;QACxB,OAAO,IAAI,CAAC,CAAC,WAAW;IAC1B,CAAC;IA0GD;QACE,KAAK,EAAE,CAAC;QAzGV,oCAAoC;QACpC,kDAAkD;QACJ,QAAG,GAAkB,IAAI,CAAC;QAExE,mCAAmC;QACQ,YAAO,GAAG,EAAE,CAAC;QAExD,uCAAuC;QACI,SAAI,GAAsB,OAAO,CAAC;QAE7E,oFAAoF;QACzC,aAAQ,GAAuC,GAAG,CAAC;QAE9F,uBAAuB;QACqB,gBAAW,GAAG,KAAK,CAAC;QAEhE,+BAA+B;QAE/B,cAAS,GAeQ,KAAK,CAAC;QAEvB,qBAAqB;QACQ,aAAQ,GAAG,KAAK,CAAC;QAE9C,8CAA8C;QAClB,aAAQ,GAAG,CAAC,CAAC;QAEzC,+CAA+C;QACnB,aAAQ,GAAG,CAAC,CAAC;QAEzC,gDAAgD;QACJ,SAAI,GAAG,KAAK,CAAC;QAEzD,uBAAuB;QACK,YAAO,GAAqB,kBAAkB,CAAC;QAG3E,mCAAmC;QACS,cAAS,GAAG,KAAK,CAAC;QAE9D,4BAA4B;QAE5B,iBAAY,GAME,KAAK,CAAC;QAEpB,6BAA6B;QAE7B,UAAK,GACH,SAAS,CAAC;QAEZ,0DAA0D;QACd,cAAS,GAAG,KAAK,CAAC;QAG9D,uBAAuB;QAGvB,kDAAkD;QACT,UAAK,GAA8B,CAAC,CAAC;QAEhF,wBAAwB;QACmB,aAAQ,GAAoB,MAAM,CAAC;QAE9E,yBAAyB;QACG,WAAM,GAAG,IAAI,CAAC;QAE1C,qCAAqC;QACiB,gBAAW,GAAuB,IAAI,CAAC;QAE7F,oCAAoC;QACQ,YAAO,GAAG,KAAK,CAAC;QAE5D,8BAA8B;QACF,sBAAiB,GAAG,CAAC,CAAC;QAc9C,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,oCAAoC;IAC5B,iBAAiB;QACvB,MAAM,QAAQ,GAAG,0BAA0B,CAAC;QAC5C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;YAAE,OAAO;QAE9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;QACpB,KAAK,CAAC,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DnB,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAGO,aAAa;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,OAAO,GAAmB;YAC9B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,SAAS;YAC7E,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;YACtC,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;YACtC,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,WAAW,EAAE,KAAK;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;YACzC,QAAQ,EAAE,QAAQ,CAAC,IAAI;YACvB,YAAY,EAAE,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC;YAClD,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;YACnE,MAAM,EAAE,QAAQ,CAAC,EAAE;gBACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;gBACvG,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;gBACrH,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,MAAM,EAAE,QAAQ,CAAC,EAAE;gBACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;gBACvG,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;gBACtH,OAAO,SAAS,CAAC;YACnB,CAAC;SACF,CAAC;QACF,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAClD,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE3B,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;gBACb,IAAI,CAAC,WAAW,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;gBAC5E,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YAC7B,CAAC;YAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;YACtE,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe;gBACtC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,EAAE,EAAE;gBACtC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YACZ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;YAE5D,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,IAAI,CAAC,IAAI;gBACX,IAAI,CAAC,cAAc,CAAC,MAAM;qBACvB,aAAa,CAAC,YAAY,CAAC;oBAC5B,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;YACpD,CAAC;YACD,OAAO;QACT,CAAC;QAEL,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;QACxD,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAExB,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;gBAC3C,MAAM,EAAE,GAAG,KAAoB,CAAC;gBAChC,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC;gBAChE,MAAM,QAAQ,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;gBAClE,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACtE,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;YAGH,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvD,IAAI,CAAC,iBAAiB,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE;oBAC9D,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;oBACd,KAAK,EAAE,UAAU;oBACjB,cAAc,EAAE,0BAA0B;iBAC3C,CAAC,CAAC;YACL,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,IAAI,CAAC,iBAAiB;oBAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;;oBACrD,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;IAEC,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,CAAC;QAElC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ;iBAC1B,YAAY,CAAC,kBAAkB,CAAC;gBACjC,EAAE,KAAK,CAAC,GAAG,CAAC;iBACX,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;iBAC5B,IAAI,CAAC,GAAG,CAAC;iBACT,IAAI,EAAE,CAAC;YACV,IAAI,OAAO,EAAE,CAAC;gBACZ,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IACE,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC;aAClH,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC5B,CAAC;YACD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAC;gBAC5B,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,CAAC;gBAC/B,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YAChD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAC;gBAC5B,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,CAAC;gBAC/B,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YAChD,CAAC;QACH,CAAC;IACH,CAAC;CACF,CAAA;AAxU+C;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAA2B;AAG7B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAc;AAGb;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAmC;AAGlC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAoD;AAGlD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAqB;AAIhE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAgBJ;AAGM;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAkB;AAGlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAGb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAGG;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAc;AAG7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAgD;AAI/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AAI9D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qDAOvC;AAIpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAE/C;AAGgC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AAOrB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAsC;AAGrC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAoC;AAGlD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AAGY;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAwC;AAGjD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAiB;AAGhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAuB;AArGrC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAmV3B;;AAED,eAAe,eAAe,CAAC","sourcesContent":["import { customElement, property } from 'lit/decorators.js';\nimport { CSSResultArray, PropertyValues } from 'lit';\nimport { styles } from './nile-lite-tooltip.css';\nimport NileElement from '../internal/nile-element';\nimport tippy, { Instance, Props, followCursor, roundArrow, createSingleton } from 'tippy.js';\nimport { parseFollowCursor, parseDuration } from './utils';\n\n/**\n * Nile lite-tooltip component.\n *\t\n * Supports wrapper, sibling (for), and singleton modes.\n * Aligns with Tippy.js props and Nile design system.\n *\n * @tag nile-lite-tooltip\n */\n@customElement('nile-lite-tooltip')\nexport class NileliteTooltip extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected createRenderRoot() {\n    return this; // lite DOM\n  }\n\n  // ───────────── Props ─────────────\n  /** ID of the target element (for sibling mode) */\n  @property({ type: String, attribute: 'for' }) for: string | null = null;\n\n  /** Tooltip content text or HTML */\n  @property({ type: String, reflect: true }) content = '';\n\n  /** Tooltip size (applies CSS class) */\n  @property({ type: String, reflect: true }) size: 'small' | 'large' = 'small';\n\n  /** Animation duration for show/hide (ms). Can be a single value or [show, hide]. */\n  @property({ type: String, reflect: true }) duration: string | number | [number, number] = 200;\n\n  /** Interactive mode */\n  @property({ type: Boolean, reflect: true }) interactive = false;\n\n  /** Placement of the tooltip */\n  @property({ type: String })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'auto'\n    | 'auto-start'\n    | 'auto-end' = 'top';\n\n  /** Disabled state */\n  @property({ type: Boolean }) disabled = false;\n\n  /** Distance (Popper offset Y or main axis) */\n  @property({ type: Number }) distance = 8;\n\n  /** Skidding (Popper offset X or cross axis) */\n  @property({ type: Number }) skidding = 0;\n\n  /** Whether tooltip is open (controlled mode) */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Trigger behavior */\n  @property({ type: String }) trigger: Props['trigger'] = 'mouseenter focus';\n \n\n  /** Allow HTML content rendering */\n  @property({ type: Boolean, reflect: true }) allowHTML = false;\n\n  /** Cursor following mode */\n  @property({ type: String, reflect: true, attribute: true })\n  followCursor:\n    | boolean\n    | 'initial'\n    | 'horizontal'\n    | 'vertical'\n    | 'true'\n    | 'false' = false;\n\n  /** Arrow type for tooltip */\n  @property({ type: String, reflect: true, attribute: true })\n  arrow: 'default' | 'round' | 'large' | 'small' | 'wide' | 'narrow' | 'none' =\n    'default';\n\n  /** Enables singleton mode when multiple children exist */\n  @property({ type: Boolean, reflect: true }) singleton = false;\n\n\n  /** Not added in Doc */\n\n\n  /** Delay before show/hide (ms or [show, hide]) */\n@property({ type: String, reflect: true }) delay: number | [number, number] = 0;\n\n/** Tooltip max width */\n@property({ type: String, reflect: true }) maxWidth: string | number = 'auto';\n\n/** Z-index of tooltip */\n@property({ type: Number }) zIndex = 9999;\n\n/** Whether tooltip hides on click */\n@property({ type: [Boolean, String], reflect: true }) hideOnClick: boolean | 'toggle' = true;\n\n/** Enables inertia motion effect */\n@property({ type: Boolean, reflect: true }) inertia = false;\n\n/** Interactive border (px) */\n@property({ type: Number }) interactiveBorder = 2;\n\n \n\n\n  private tooltipInstances?: Instance[];\n  private singleInstance?: Instance;\n  private singletonInstance?: Instance;\n  private targetEl?: HTMLElement | null;\n  private generatedId?: string;\n  private prevDescribedby?: string | null;\n\n  constructor() {\n    super();\n    this.injectTippyStyles();\n  }\n\n  // Inject custom styles for tooltips\n  private injectTippyStyles(): void {\n    const STYLE_ID = 'nile-lite-tooltip-styles';\n    if (document.getElementById(STYLE_ID)) return;\n\n    const style = document.createElement('style');\n    style.id = STYLE_ID;\n    style.textContent = `\n      .tippy-box[data-animation=fade][data-state=hidden] { opacity: 0; }\n      [data-tippy-root] { max-width: calc(100vw - 10px); }\n      .tippy-box {\n        position: relative;\n        background-color: #333;\n        color: #fff;\n        border-radius: 4px;\n        font-size: 14px;\n        line-height: 1.4;\n        white-space: normal;\n        outline: 0;\n        transition-property: transform, visibility, opacity;\n      }\n\n      /* Placement-specific arrows */\n      .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0; }\n      .tippy-box[data-placement^=top] > .tippy-arrow:before {\n        bottom: -7px;\n        border-width: 8px 8px 0;\n        border-top-color: initial;\n      }\n\n      .tippy-box[data-placement^=bottom] > .tippy-arrow { top: 0; }\n      .tippy-box[data-placement^=bottom] > .tippy-arrow:before {\n        top: -7px;\n        border-width: 0 8px 8px;\n        border-bottom-color: initial;\n      }\n\n      .tippy-box[data-placement^=left] > .tippy-arrow { right: 0; }\n      .tippy-box[data-placement^=left] > .tippy-arrow:before {\n        right: -7px;\n        border-width: 8px 0 8px 8px;\n        border-left-color: initial;\n      }\n\n      .tippy-box[data-placement^=right] > .tippy-arrow { left: 0; }\n      .tippy-box[data-placement^=right] > .tippy-arrow:before {\n        left: -7px;\n        border-width: 8px 8px 8px 0;\n        border-right-color: initial;\n      }\n\n      .tippy-box[data-inertia][data-state=visible] {\n        transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);\n      }\n\n      .tippy-box.large { font-size: 16px; padding: 8px 12px; }\n      .tippy-arrow { width: 16px; height: 16px; color: #333; }\n      .tippy-arrow:before {\n        content: \"\";\n        position: absolute;\n        border-color: transparent;\n        border-style: solid;\n      }\n\n      .tippy-content {\n        position: relative;\n        padding: 2px 6px;\n        z-index: 1;\n      }\n\t\t.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}\n    `;\n    document.head.appendChild(style);\n  }\n\n  firstUpdated(): void {\n    this.attachTooltip();\n  }\n\n  \n  private attachTooltip(): void {\n    this.destroyTooltips();\n    if (this.disabled) return;\n\n    const options: Partial<Props> = {\n      content: this.content || this.getAttribute('data-tippy-content') || undefined,\n      placement: this.placement,\n      trigger: this.trigger,\n      offset: [this.skidding, this.distance],\n      theme: 'lite',\n      animation: 'fade',\n      interactive: this.interactive,\n      arrow: roundArrow,\n      duration: parseDuration(this.duration),\n      allowHTML: this.allowHTML,\n      delay: this.delay,\n      maxWidth: this.maxWidth,\n      zIndex: this.zIndex,\n      hideOnClick: false,  \n      inertia: this.inertia,\n      interactiveBorder: this.interactiveBorder,\n      appendTo: document.body ,\n      followCursor: parseFollowCursor(this.followCursor),\n      plugins: parseFollowCursor(this.followCursor) ? [followCursor] : [],\n      onShow: instance => {\n        this.open = true;\n        this.dispatchEvent(new CustomEvent('nile-show', { detail: { instance, target: instance.reference } }));\n        this.dispatchEvent(new CustomEvent('nile-toggle', { detail: { open: true, instance, target: instance.reference } }));\n        return undefined;\n      },\n      onHide: instance => {\n        this.open = false;\n        this.dispatchEvent(new CustomEvent('nile-hide', { detail: { instance, target: instance.reference } }));\n        this.dispatchEvent(new CustomEvent('nile-toggle', { detail: { open: false, instance, target: instance.reference } }));\n        return undefined;\n      },\n    };\n    if (this.for) {\n      this.targetEl = document.getElementById(this.for);\n      if (!this.targetEl) return;\n\n      if (!this.id) {\n        this.generatedId = `nile-tooltip-${Math.random().toString(36).slice(2, 9)}`;\n        this.id = this.generatedId;\n      }\n\n      this.prevDescribedby = this.targetEl.getAttribute('aria-describedby');\n      const describedby = this.prevDescribedby\n        ? `${this.prevDescribedby} ${this.id}`\n        : this.id;\n      this.targetEl.setAttribute('aria-describedby', describedby);\n\n      this.singleInstance = tippy(this.targetEl, options);\n      if (this.size)\n        this.singleInstance.popper\n          .querySelector('.tippy-box')\n          ?.classList.add(this.size);\n      if (this.open) {\n        queueMicrotask(() => this.singleInstance?.show());\n      }\n      return;\n    }\n\nconst children = Array.from(this.querySelectorAll('*'));\nif (children.length > 0) {\n \n  this.tooltipInstances = children.map(child => {\n    const el = child as HTMLElement;\n    const localContent = el.getAttribute('content') || this.content; \n    const instance = tippy(el, { ...options, content: localContent });\n    instance.popper.querySelector('.tippy-box')?.classList.add(this.size);\n    return instance;\n  });\n\n\n  if (this.singleton && this.tooltipInstances.length > 1) {\n    this.singletonInstance = createSingleton(this.tooltipInstances, {\n      delay: [75, 0],\n      arrow: roundArrow,\n      moveTransition: 'transform 0.15s ease-out',\n    });\n  }\n\n  if (this.open) {\n    if (this.singletonInstance) this.singletonInstance.show();\n    else this.tooltipInstances.forEach(t => t.show());\n  }\n}\n\n  }\n\n  private destroyTooltips(): void {\n    this.tooltipInstances?.forEach(t => t.destroy());\n    this.singleInstance?.destroy();\n    this.singletonInstance?.destroy();\n\n    this.tooltipInstances = undefined;\n    this.singleInstance = undefined;\n    this.singletonInstance = undefined;\n\n    if (this.targetEl && this.id) {\n      const current = this.targetEl\n        .getAttribute('aria-describedby')\n        ?.split(' ')\n        .filter(id => id !== this.id)\n        .join(' ')\n        .trim();\n      if (current) {\n        this.targetEl.setAttribute('aria-describedby', current);\n      } else {\n        this.targetEl.removeAttribute('aria-describedby');\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.destroyTooltips();\n  }\n\n  updated(changed: PropertyValues): void {\n    super.updated(changed);\n\n    if (\n      ['for', 'content', 'placement', 'distance', 'skidding', 'trigger', 'disabled', 'hoist', 'size', 'arrow', 'singleton']\n        .some(p => changed.has(p))\n    ) {\n      this.attachTooltip();\n    }\n\n    if (changed.has('open')) {\n      if (this.open) {\n        this.singleInstance?.show();\n        this.singletonInstance?.show();\n        this.tooltipInstances?.forEach(t => t.show());\n      } else {\n        this.singleInstance?.hide();\n        this.singletonInstance?.hide();\n        this.tooltipInstances?.forEach(t => t.hide());\n      }\n    }\n  }\n}\n\nexport default NileliteTooltip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-lite-tooltip': NileliteTooltip;\n  }\n}\n"]}

package/dist/src/nile-lite-tooltip/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function parseFollowCursor(value: boolean | 'initial' | 'horizontal' | 'vertical' | 'true' | 'false'): boolean | 'initial' | 'horizontal' | 'vertical';
+export declare function parseDuration(value: string | number | [number, number] | undefined): number | [number, number];

package/dist/src/nile-lite-tooltip/utils.js

@@ -0,0 +1,29 @@
+export function parseFollowCursor(value) {
+    if (value === true || value === 'true')
+        return true;
+    if (value === false || value === 'false')
+        return false;
+    if (['initial', 'horizontal', 'vertical'].includes(String(value))) {
+        return value;
+    }
+    return false;
+}
+export function parseDuration(value) {
+    if (Array.isArray(value))
+        return value;
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string') {
+        // Handle comma-separated (e.g. "200,100")
+        if (value.includes(',')) {
+            const parts = value.split(',').map(v => parseInt(v.trim(), 10));
+            return parts;
+        }
+        // Single numeric string
+        const num = parseInt(value, 10);
+        if (!isNaN(num))
+            return num;
+    }
+    return 200; // default fallback
+}
+//# sourceMappingURL=utils.js.map

package/dist/src/nile-lite-tooltip/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/nile-lite-tooltip/utils.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,iBAAiB,CAC/B,KAAyE;IAEzE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,IAAI,CAAC;IACpD,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,KAAK,CAAC;IACvD,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QAClE,OAAO,KAA8C,CAAC;IACxD,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAGD,MAAM,UAAU,aAAa,CACzB,KAAqD;IAErD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IACvC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAE5C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,0CAA0C;QAC1C,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACxB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;YAChE,OAAO,KAAyB,CAAC;QACnC,CAAC;QAED,wBAAwB;QACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAAE,OAAO,GAAG,CAAC;IAC9B,CAAC;IAED,OAAO,GAAG,CAAC,CAAC,mBAAmB;AACjC,CAAC","sourcesContent":[" \nexport function parseFollowCursor(\n  value: boolean | 'initial' | 'horizontal' | 'vertical' | 'true' | 'false'\n): boolean | 'initial' | 'horizontal' | 'vertical' {\n  if (value === true || value === 'true') return true;\n  if (value === false || value === 'false') return false;\n  if (['initial', 'horizontal', 'vertical'].includes(String(value))) {\n    return value as 'initial' | 'horizontal' | 'vertical';\n  }\n  return false;\n}\n\n\nexport function parseDuration(\n    value: string | number | [number, number] | undefined\n  ): number | [number, number] {\n    if (Array.isArray(value)) return value;\n    if (typeof value === 'number') return value;\n  \n    if (typeof value === 'string') {\n      // Handle comma-separated (e.g. \"200,100\")\n      if (value.includes(',')) {\n        const parts = value.split(',').map(v => parseInt(v.trim(), 10));\n        return parts as [number, number];\n      }\n  \n      // Single numeric string\n      const num = parseInt(value, 10);\n      if (!isNaN(num)) return num;\n    }\n  \n    return 200; // default fallback\n  }"]}

package/dist/src/nile-select/virtual-scroll-helper.js

@@ -63,7 +63,8 @@ export class VirtualScrollHelper {
             listbox,
             search,
             loader,
-            footer
+            footer,
+            tag__content 
           "
         >
           <slot name="prefix" slot="prefix"></slot>

package/dist/src/nile-select/virtual-scroll-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-scroll-helper.js","sourceRoot":"","sources":["../../../src/nile-select/virtual-scroll-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAG9B,YAAY,SAAsB;QAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,wBAAwB;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,SAAgB,CAAC;QAExC,OAAO,IAAI,CAAA;;;kBAGG,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;wBACV,SAAS,CAAC,UAAU;yBACnB,SAAS,CAAC,WAAW;kBAC5B,SAAS,CAAC,IAAI;2BACL,SAAS,CAAC,aAAa;uCACX,SAAS,CAAC,yBAAyB;gCAC1C,SAAS,CAAC,kBAAkB;4BAChC,SAAS,CAAC,cAAc;sBAC9B,SAAS,CAAC,QAAQ;sBAClB,SAAS,CAAC,QAAQ;0BACd,SAAS,CAAC,YAAY;qBAC3B,SAAS,CAAC,OAAO;mBACnB,SAAS,CAAC,KAAK;qBACb,SAAS,CAAC,OAAO;sBAChB,SAAS,CAAC,QAAQ;uBACjB,SAAS,CAAC,SAAS;mBACvB,SAAS,CAAC,KAAK;oBACd,SAAS,CAAC,MAAM;kBAClB,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;uBACX,SAAS,CAAC,SAAS;kBACxB,SAAS,CAAC,IAAI;sBACV,SAAS,CAAC,QAAQ;2BACb,SAAS,CAAC,aAAa;8BACpB,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;yBAC/B,SAAS,CAAC,WAAW;+BACf,SAAS,CAAC,iBAAiB;kBACxC,SAAS,CAAC,IAAI;kBACd,SAAS,CAAC,IAAI;qBACX,SAAS,CAAC,OAAO;oBAClB,SAAS,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;KAyB/B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html } from 'lit';\nimport type NileElement from '../internal/nile-element';\n\n/**\n * Helper class to manage virtual scroll functionality for nile-select component\n */\nexport class VirtualScrollHelper {\n  private component: NileElement;\n\n  constructor(component: NileElement) {\n    this.component = component;\n  }\n\n  renderVirtualizedContent(): any {\n    const component = this.component as any;\n\n    return html`\n      <div class=\"virtual-select\">\n        <nile-virtual-select\n          .name=${component.name}\n          .value=${component.value}\n          .autoResize=${component.autoResize}\n          .placeholder=${component.placeholder}\n          .size=${component.size}\n          .searchEnabled=${component.searchEnabled}\n          .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}\n          .disableLocalSearch=${component.disableLocalSearch}\n          .optionsLoading=${component.optionsLoading}\n          .multiple=${component.multiple}\n          .helpText=${component.helpText}\n          .errorMessage=${component.errorMessage}\n          .warning=${component.warning}\n          .error=${component.error}\n          .success=${component.success}\n          .disabled=${component.disabled}\n          .clearable=${component.clearable}\n          .hoist=${component.hoist}\n          .filled=${component.filled}\n          .pill=${component.pill}\n          .label=${component.label}\n          .placement=${component.placement}\n          .form=${component.form}\n          .required=${component.required}\n          .showNoResults=${component.showNoResults}\n          .noResultsMessage=${component.noResultsMessage}\n          .renderItemConfig=${component.renderItemConfig}\n          .blockValueChange=${component.blockValueChange}\n          .noWidthSync=${component.noWidthSync}\n          .maxOptionsVisible=${component.maxOptionsVisible}\n          .data=${component.data}\n          .open=${component.open}\n          .loading=${component.loading}\n          .portal=${component.portal}\n          exportparts=\"\n            select-options,\n            select-no-results,\n            virtualized,\n            form-control,\n            form-control-label,\n            form-control-input,\n            combobox,\n            prefix,\n            display-input,\n            tags,\n            tag,\n            clear-button,\n            suffix,\n            expand-icon,\n            listbox,\n            search,\n            loader,\n            footer\n          \"\n        >\n          <slot name=\"prefix\" slot=\"prefix\"></slot>\n        </nile-virtual-select>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"virtual-scroll-helper.js","sourceRoot":"","sources":["../../../src/nile-select/virtual-scroll-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B;;GAEG;AACH,MAAM,OAAO,mBAAmB;IAG9B,YAAY,SAAsB;QAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,wBAAwB;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,SAAgB,CAAC;QAExC,OAAO,IAAI,CAAA;;;kBAGG,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;wBACV,SAAS,CAAC,UAAU;yBACnB,SAAS,CAAC,WAAW;kBAC5B,SAAS,CAAC,IAAI;2BACL,SAAS,CAAC,aAAa;uCACX,SAAS,CAAC,yBAAyB;gCAC1C,SAAS,CAAC,kBAAkB;4BAChC,SAAS,CAAC,cAAc;sBAC9B,SAAS,CAAC,QAAQ;sBAClB,SAAS,CAAC,QAAQ;0BACd,SAAS,CAAC,YAAY;qBAC3B,SAAS,CAAC,OAAO;mBACnB,SAAS,CAAC,KAAK;qBACb,SAAS,CAAC,OAAO;sBAChB,SAAS,CAAC,QAAQ;uBACjB,SAAS,CAAC,SAAS;mBACvB,SAAS,CAAC,KAAK;oBACd,SAAS,CAAC,MAAM;kBAClB,SAAS,CAAC,IAAI;mBACb,SAAS,CAAC,KAAK;uBACX,SAAS,CAAC,SAAS;kBACxB,SAAS,CAAC,IAAI;sBACV,SAAS,CAAC,QAAQ;2BACb,SAAS,CAAC,aAAa;8BACpB,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;8BAC1B,SAAS,CAAC,gBAAgB;yBAC/B,SAAS,CAAC,WAAW;+BACf,SAAS,CAAC,iBAAiB;kBACxC,SAAS,CAAC,IAAI;kBACd,SAAS,CAAC,IAAI;qBACX,SAAS,CAAC,OAAO;oBAClB,SAAS,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B/B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html } from 'lit';\nimport type NileElement from '../internal/nile-element';\n\n/**\n * Helper class to manage virtual scroll functionality for nile-select component\n */\nexport class VirtualScrollHelper {\n  private component: NileElement;\n\n  constructor(component: NileElement) {\n    this.component = component;\n  }\n\n  renderVirtualizedContent(): any {\n    const component = this.component as any;\n\n    return html`\n      <div class=\"virtual-select\">\n        <nile-virtual-select\n          .name=${component.name}\n          .value=${component.value}\n          .autoResize=${component.autoResize}\n          .placeholder=${component.placeholder}\n          .size=${component.size}\n          .searchEnabled=${component.searchEnabled}\n          .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}\n          .disableLocalSearch=${component.disableLocalSearch}\n          .optionsLoading=${component.optionsLoading}\n          .multiple=${component.multiple}\n          .helpText=${component.helpText}\n          .errorMessage=${component.errorMessage}\n          .warning=${component.warning}\n          .error=${component.error}\n          .success=${component.success}\n          .disabled=${component.disabled}\n          .clearable=${component.clearable}\n          .hoist=${component.hoist}\n          .filled=${component.filled}\n          .pill=${component.pill}\n          .label=${component.label}\n          .placement=${component.placement}\n          .form=${component.form}\n          .required=${component.required}\n          .showNoResults=${component.showNoResults}\n          .noResultsMessage=${component.noResultsMessage}\n          .renderItemConfig=${component.renderItemConfig}\n          .blockValueChange=${component.blockValueChange}\n          .noWidthSync=${component.noWidthSync}\n          .maxOptionsVisible=${component.maxOptionsVisible}\n          .data=${component.data}\n          .open=${component.open}\n          .loading=${component.loading}\n          .portal=${component.portal}\n          exportparts=\"\n            select-options,\n            select-no-results,\n            virtualized,\n            form-control,\n            form-control-label,\n            form-control-input,\n            combobox,\n            prefix,\n            display-input,\n            tags,\n            tag,\n            clear-button,\n            suffix,\n            expand-icon,\n            listbox,\n            search,\n            loader,\n            footer,\n            tag__content \n          \"\n        >\n          <slot name=\"prefix\" slot=\"prefix\"></slot>\n        </nile-virtual-select>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.css.js

@@ -17,11 +17,7 @@ export const styles = css `
     box-sizing: border-box;
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));  
   }
 
   .header__item__wrapper{

package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuErB,qBAAqB;IACrB,aAAa;CAChB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\nimport { resizableHeaderStyles, resizerStyles } from '../internal/resizable-table-styles';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    \n  }\n\n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: var(--nile-spacing-md , var(--ng-spacing-xs));\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0.6;\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .headers:hover .hover__arrow {\n    /* opacity: 0.3; */\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .stroke-width {\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  ${resizableHeaderStyles}\n  ${resizerStyles}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmErB,qBAAqB;IACrB,aAAa;CAChB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\nimport { resizableHeaderStyles, resizerStyles } from '../internal/resizable-table-styles';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));  \n  }\n\n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: var(--nile-spacing-md , var(--ng-spacing-xs));\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0.6;\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .headers:hover .hover__arrow {\n    /* opacity: 0.3; */\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .stroke-width {\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  ${resizableHeaderStyles}\n  ${resizerStyles}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-virtual-select/nile-virtual-select.css.js

@@ -391,7 +391,6 @@ export const styles = css `
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
-    overflow: auto;
     overscroll-behavior: none;
     /* Make sure it adheres to the popup's auto size */
     max-width: var(--auto-size-available-width);
@@ -446,6 +445,7 @@ export const styles = css `
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     justify-content: space-between;
+    box-sizing: unset;
   }
 
   .tag__prefix[slot='prefix'] {

package/dist/src/nile-virtual-select/nile-virtual-select.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6gBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {css} from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .virtualized{\n    min-width: 110px;\n    width: 100%;\n  }\n\n  .virtualized ::slotted(nile-option),\n  .virtualized nile-option {\n    width: 100%;\n    display: block;\n  }\n\n  /* Ensure proper sizing for non-virtualized options (small datasets) */\n  .virtualized:not(:has(lit-virtualizer)) {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .virtualized:not(:has(lit-virtualizer)) nile-option {\n    flex-shrink: 0;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled) .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: rgb(133, 129, 129);\n    width: 100%;\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n    width: 100%;\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display: var(--nile-display-flex, var(--ng-display-flex));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible{\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n  \n  .select__hide-default{\n    display: none;\n  }\n\n  .virtualized nile-option[selected] {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .virtualized nile-option[selected]::part(base) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .virtualized.no-scroll {\n    overflow: hidden !important;\n  }\n\n  .virtual-select-loader {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 75%;\n  }\n\n  .select__footer.loading, .select__options.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .virtual-select-loader {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 75%;\n  }\n\n  .select__footer.loading, .select__options.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6gBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {css} from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .virtualized{\n    min-width: 110px;\n    width: 100%;\n  }\n\n  .virtualized ::slotted(nile-option),\n  .virtualized nile-option {\n    width: 100%;\n    display: block;\n  }\n\n  /* Ensure proper sizing for non-virtualized options (small datasets) */\n  .virtualized:not(:has(lit-virtualizer)) {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .virtualized:not(:has(lit-virtualizer)) nile-option {\n    flex-shrink: 0;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled) .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: rgb(133, 129, 129);\n    width: 100%;\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n    width: 100%;\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display: var(--nile-display-flex, var(--ng-display-flex));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n    box-sizing: unset;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible{\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n  \n  .select__hide-default{\n    display: none;\n  }\n\n  .virtualized nile-option[selected] {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .virtualized nile-option[selected]::part(base) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .virtualized.no-scroll {\n    overflow: hidden !important;\n  }\n\n  .virtual-select-loader {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 75%;\n  }\n\n  .select__footer.loading, .select__options.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .virtual-select-loader {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 75%;\n  }\n\n  .select__footer.loading, .select__options.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-virtual-select/nile-virtual-select.d.ts

@@ -255,7 +255,6 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     handleOpenChange(): Promise<void>;
     private handleOpen;
     private handleClose;
-    private initializeOriginalItems;
     show(): Promise<unknown>;
     hide(): Promise<unknown>;
     checkValidity(): boolean;