atomicuilibrary 0.1.0 → 0.1.3

package/dist/esm/ui-color-controller.entry.js

@@ -1,148 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
-
-const colorControllerCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit;width:100%;max-width:2a0px}.col-ctrl-label{font-size:13px;font-weight:700;color:var(--color-primary, #6366f1);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}.col-ctrl-grid{display:flex;flex-direction:column;gap:6px}.col-ctrl-row{display:flex;align-items:center;gap:8px}.col-ctrl-key{flex:0 0 20px;font-size:12px;font-weight:500;color:var(--text-secondary, #4b5563)}.col-ctrl-input-wrapper{flex:1;display:flex;align-items:center;border:1px solid var(--border-default, #e5e7eb);border-radius:4px;background:var(--bg-primary, #ffffff);padding:2px 6px;transition:all 0.2s}.col-ctrl-input-wrapper:focus-within{border-color:var(--color-primary, #6366f1);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 99, 102, 241), 0.1)}.col-ctrl-input{flex:1;border:none;background:transparent;outline:none;font-size:13px;padding:4px;width:100%;color:var(--text-primary, #111827);font-family:monospace;text-align:right}.col-ctrl-input::-webkit-outer-spin-button,.col-ctrl-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hex-row .col-ctrl-key{font-family:monospace;font-weight:700}.col-ctrl-unit{font-size:12px;color:var(--text-muted, #9ca3af);margin-left:4px;min-width:12px}.hex-input{text-align:left;letter-spacing:0.05em;font-weight:600}`;
-
-const ColorController = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.colorChange = createEvent(this, "colorChange");
-    }
-    /** Current color as a hex string */
-    value = '#10b981';
-    /** Label for the entire group */
-    label = '';
-    /** Emitted when any color channel changes */
-    colorChange;
-    r = 16;
-    g = 185;
-    b = 129;
-    h = 159;
-    s = 91;
-    v = 73;
-    hex = '10B981';
-    handleValueUpdate(newValue) {
-        this.updateAllFromHex(newValue);
-    }
-    componentWillLoad() {
-        this.updateAllFromHex(this.value);
-    }
-    updateAllFromHex(hex) {
-        if (!hex)
-            return;
-        const clean = hex.startsWith('#') ? hex.slice(1) : hex;
-        this.hex = clean.toUpperCase();
-        const bigInt = parseInt(clean, 16);
-        this.r = (bigInt >> 16) & 255;
-        this.g = (bigInt >> 8) & 255;
-        this.b = bigInt & 255;
-        const r = this.r / 255;
-        const g = this.g / 255;
-        const b = this.b / 255;
-        const max = Math.max(r, g, b);
-        const min = Math.min(r, g, b);
-        const d = max - min;
-        let h = 0;
-        if (d === 0)
-            h = 0;
-        else if (max === r)
-            h = ((g - b) / d) % 6;
-        else if (max === g)
-            h = (b - r) / d + 2;
-        else if (max === b)
-            h = (r - g) / d + 4;
-        h = Math.round(h * 60);
-        if (h < 0)
-            h += 360;
-        const s = max === 0 ? 0 : d / max;
-        const v = max;
-        this.h = h;
-        this.s = Math.round(s * 100);
-        this.v = Math.round(v * 100);
-    }
-    emitChange() {
-        this.value = `#${this.hex}`;
-        this.colorChange.emit(this.value);
-    }
-    handleHexInput = (e) => {
-        const val = e.detail.value || '';
-        if (val.length === 6 || val.length === 3) {
-            if (/^[0-9A-Fa-f]+$/.test(val)) {
-                this.hex = val.toUpperCase();
-                this.updateAllFromHex(this.hex);
-                this.emitChange();
-            }
-        }
-    };
-    handleRgbChange(channel, val) {
-        if (isNaN(val))
-            return;
-        this[channel] = Math.max(0, Math.min(255, val));
-        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
-        this.updateAllFromHex(this.hex);
-        this.emitChange();
-    }
-    handleHsvChange(channel, val) {
-        if (isNaN(val))
-            return;
-        if (channel === 'h')
-            this.h = Math.max(0, Math.min(360, val));
-        if (channel === 's')
-            this.s = Math.max(0, Math.min(100, val));
-        if (channel === 'v')
-            this.v = Math.max(0, Math.min(100, val));
-        // HSV to RGB
-        const h = this.h;
-        const s = this.s / 100;
-        const v = this.v / 100;
-        const c = v * s;
-        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
-        const m = v - c;
-        let r = 0, g = 0, b = 0;
-        if (h < 60) {
-            r = c;
-            g = x;
-            b = 0;
-        }
-        else if (h < 120) {
-            r = x;
-            g = c;
-            b = 0;
-        }
-        else if (h < 180) {
-            r = 0;
-            g = c;
-            b = x;
-        }
-        else if (h < 240) {
-            r = 0;
-            g = x;
-            b = c;
-        }
-        else if (h < 300) {
-            r = x;
-            g = 0;
-            b = c;
-        }
-        else {
-            r = c;
-            g = 0;
-            b = x;
-        }
-        this.r = Math.round((r + m) * 255);
-        this.g = Math.round((g + m) * 255);
-        this.b = Math.round((b + m) * 255);
-        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
-        this.emitChange();
-    }
-    render() {
-        return (h(Host, { key: '8a799159e4f7d80bbe881ba3a93d1a6faed5a54e' }, this.label && h("div", { key: 'd32e7f8bcf4ab190437317d2697a86486e84d264', class: "col-ctrl-label" }, this.label), h("div", { key: '75cc18672f23ef572569ac2cc9d125373264c962', class: "col-ctrl-grid" }, h("div", { key: 'af936f413bb4b7aeff0dd9752deadc0ce1dfcb03', class: "col-ctrl-row" }, h("span", { key: '71c0d3c44062a67c1402d2e2b92f81c3ce8878dc', class: "col-ctrl-key" }, "H"), h("div", { key: '08c832583ca9f956c3fc761fa32b712d208d853d', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '283a471f4bf8af83f37b7ac201a81d25e6803dba', class: "col-ctrl-input", type: "number", value: this.h, onInputChange: (v) => this.handleHsvChange('h', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'ef039c70dbc01252f0129f95f7eca4f6302f9049', class: "col-ctrl-unit" }, "\u00B0"))), h("div", { key: '68c91d46d38583bd8a8158452033088811453d1c', class: "col-ctrl-row" }, h("span", { key: '3dfb8b3a1f1053080d6ca3c3b03027fa46cc33bd', class: "col-ctrl-key" }, "S"), h("div", { key: '929558e93d27bc799a2401b0f01f358222c24c24', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'a2fcdc19f32f5348848347319c134d94d8963ca5', class: "col-ctrl-input", type: "number", value: this.s, onInputChange: (v) => this.handleHsvChange('s', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'de5d00b3264b1284fe23ca13f9611e5046c444d6', class: "col-ctrl-unit" }, "%"))), h("div", { key: '4e744c31accbcdbe6505a160e693926e6001ac9c', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '9feef4b4fe6459e34f6ac36a42c90d24413da27b', class: "col-ctrl-key" }, "V"), h("div", { key: '9d1821a375ab9473de477c7ab38cea6cd0cf9c57', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '259bb011612129fd3589fcb7febf15bdd0e7ce13', class: "col-ctrl-input", type: "number", value: this.v, onInputChange: (v) => this.handleHsvChange('v', parseInt(v.detail)), variant: "plain" }), h("span", { key: '3646c32d18517429f758cfef21d34df5d9ec407e', class: "col-ctrl-unit" }, "%"))), h("div", { key: '4f0dae6cce89af626b9d545dda0971ab2f041bca', class: "col-ctrl-row" }, h("span", { key: '6995401c0f6cabba13eb35c596e039769dc33c0a', class: "col-ctrl-key" }, "R"), h("div", { key: 'cc802f297a286f745957b613b37f3ab5ea12fa4e', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '633391de1afcd81d7ce6f68656569f858a673d62', class: "col-ctrl-input", type: "number", value: this.r, onInputChange: (v) => this.handleRgbChange('r', parseInt(v.detail)), variant: "plain" }))), h("div", { key: 'f4dce90ceb3f0849cb17101c07229b384739d5f1', class: "col-ctrl-row" }, h("span", { key: 'c3891f220f1fccf54fd84ded9674bad3100c530f', class: "col-ctrl-key" }, "G"), h("div", { key: '187f474a516c7a1bd35cce0e03e9aeb3c8d3b6b8', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '60be98aaf3e10a67b43bb2206e767d60e7bc1e04', class: "col-ctrl-input", type: "number", value: this.g, onInputChange: (v) => this.handleRgbChange('g', parseInt(v.detail)), variant: "plain" }))), h("div", { key: 'a844765b839bfa715a150932d1b3b80c44899d11', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '548be88547a50add11eb34c6f837e6fca6d9fbfd', class: "col-ctrl-key" }, "B"), h("div", { key: 'eaab04459f36946161d9165d917cff488b27a841', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '7a3b67f4b98a20e920c8c6537a48354a891d76e5', class: "col-ctrl-input", type: "number", value: this.b, onInputChange: (v) => this.handleRgbChange('b', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '97a6584e32baa09c44a1c3dc80e93c45ea8b1282', class: "col-ctrl-row hex-row" }, h("span", { key: 'aed2ff62dd29ada3896212ede2c24cbf679591ca', class: "col-ctrl-key" }, "#"), h("div", { key: 'b75b8984f2e9dfca0c01022c45a2b1a6e23ba925', class: "col-ctrl-input-wrapper hex-wrapper" }, h("ui-input", { key: '1e051860e57dd8f10298ac939509173bebaca5e3', class: "col-ctrl-input hex-input", value: this.hex, onInputChange: (v) => this.handleHexInput({ detail: { value: v.detail } }), variant: "plain" }))))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "handleValueUpdate": 0
-            }]
-    }; }
-};
-ColorController.style = colorControllerCss();
-
-export { ColorController as ui_color_controller };

package/dist/esm/ui-popover.entry.js

@@ -1,515 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DUsoYu9r.js';
-import { s as sanitizeHTML } from './security-Dyu3Nplq.js';
-import { F as FocusTrap } from './focus-trap-BSQ8klD4.js';
-import { a as autoUpdate, c as calculateUniversalPlacement } from './dom-BMFah5q3.js';
-
-const popoverCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.popover-wrapper{position:relative;display:inline-block}.popover-trigger{display:inline-block;cursor:pointer}.popover-backdrop{position:fixed;inset-block-start:0;inset-inline-start:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:19999;cursor:default;animation:backdropIn 0.18s ease}@keyframes backdropIn{from{opacity:0}to{opacity:1}}.popover{position:fixed;z-index:21000;background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));border-radius:var(--popover-radius, 10px);box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);opacity:0;transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none;max-width:calc(100vw - 32px);word-wrap:break-word;overflow-wrap:break-word;overflow:visible;}.popover-visible{opacity:1;pointer-events:auto}.popover-inner{overflow:hidden;border-radius:inherit;max-height:inherit;}.popover-header{display:flex;align-items:center;justify-content:space-between;margin:0;padding-block:12px;padding-inline:16px;border-block-end:1px solid var(--popover-border, var(--border-default, #e5e7eb))}.popover-title{font-weight:700;font-size:14px;color:var(--popover-text-primary, var(--text-primary, #1f2937));margin:0;letter-spacing:-0.01em}.popover-close{background:transparent;border:none;color:var(--popover-text-secondary, var(--text-muted, #9ca3af));cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.15s, color 0.15s;margin-inline-start:8px}.popover-close:hover{background:var(--popover-border, var(--border-default, #e5e7eb));color:var(--popover-text-primary, var(--text-primary, #1f2937))}.popover-body{padding-block:12px;padding-inline:16px;font-size:14px;color:var(--popover-text-secondary, var(--text-muted, #6b7280));line-height:1.6;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.15) transparent}.popover-body::-webkit-scrollbar{width:4px}.popover-body::-webkit-scrollbar-track{background:transparent}.popover-body::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.15);border-radius:2px}::slotted([slot=footer]){display:block;padding-block:10px;padding-inline:16px;border-block-start:1px solid var(--popover-border, var(--border-default, #e5e7eb));background:var(--popover-footer-bg, rgba(0, 0, 0, 0.02))}.popover-dark{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151);--popover-text-primary:var(--bg-primary, #f3f4f6);--popover-text-secondary:var(--bg-secondary, #d1d5db);--popover-footer-bg:rgba(255,255,255,0.04)}.popover-dark .popover-arrow{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151)}.popover-success{--popover-bg:var(--bg-primary, #f0fdf4);--popover-border:var(--color-success, #bbf7d0);--popover-text-primary:var(--color-success, #14532d);--popover-text-secondary:var(--color-success, #166534);--popover-footer-bg:rgba(var(--color-success-rgb, 16, 185, 129), 0.06)}.popover-success .popover-header{border-block-end-color:var(--color-success, #bbf7d0)}.popover-success .popover-title::before{content:"✓  ";color:var(--color-success, #16a34a)}.popover-warning{--popover-bg:var(--bg-primary, #fffbeb);--popover-border:var(--color-primary, #fde68a);--popover-text-primary:var(--color-danger, #78350f);--popover-text-secondary:var(--color-danger, #92400e);--popover-footer-bg:rgba(var(--color-warning-rgb, 245, 158, 11), 0.06)}.popover-warning .popover-header{border-block-end-color:var(--color-primary, #fde68a)}.popover-warning .popover-title::before{content:"⚠  ";color:var(--color-warning-hover, #d97706)}.popover-error{--popover-bg:var(--bg-primary, #fef2f2);--popover-border:var(--color-danger, #fecaca);--popover-text-primary:var(--color-danger, #7f1d1d);--popover-text-secondary:var(--color-danger, #991b1b);--popover-footer-bg:rgba(var(--color-danger-rgb, 239, 68, 68), 0.06)}.popover-error .popover-header{border-block-end-color:var(--color-danger, #fecaca)}.popover-error .popover-title::before{content:"✕  ";color:var(--color-danger-hover, #dc2626)}.popover-info{--popover-bg:var(--bg-primary, #eff6ff);--popover-border:var(--color-primary, #bfdbfe);--popover-text-primary:var(--color-primary, #1e3a8a);--popover-text-secondary:var(--color-primary, #1e40af);--popover-footer-bg:rgba(var(--color-primary-rgb, 59, 130, 246), 0.06)}.popover-info .popover-header{border-block-end-color:var(--color-primary, #bfdbfe)}.popover-info .popover-title::before{content:"ℹ  ";color:var(--color-primary-hover, #2563eb)}.popover-arrow{position:absolute;width:var(--ui-popover-arrow-size, 10px);height:var(--ui-popover-arrow-size, 10px);background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));transform:rotate(45deg);pointer-events:none;box-sizing:border-box;z-index:1;}.popover-top .popover-arrow,.popover-top-start .popover-arrow,.popover-top-end .popover-arrow{border-top:none;border-left:none;}.popover-bottom .popover-arrow,.popover-bottom-start .popover-arrow,.popover-bottom-end .popover-arrow{border-right:none;border-bottom:none;}.popover-left .popover-arrow,.popover-left-start .popover-arrow,.popover-left-end .popover-arrow{border-left:none;border-bottom:none;}.popover-right .popover-arrow,.popover-right-start .popover-arrow,.popover-right-end .popover-arrow{border-top:none;border-right:none;}.popover-anim-scale{transform:scale(0.92);transform-origin:center top}.popover-anim-scale.popover-bottom,.popover-anim-scale.popover-bottom-start,.popover-anim-scale.popover-bottom-end{transform-origin:center bottom}.popover-anim-scale.popover-left,.popover-anim-scale.popover-left-start,.popover-anim-scale.popover-left-end{transform-origin:right center}.popover-anim-scale.popover-right,.popover-anim-scale.popover-right-start,.popover-anim-scale.popover-right-end{transform-origin:left center}.popover-anim-scale.popover-visible{transform:scale(1)}.popover-anim-slide.popover-top,.popover-anim-slide.popover-top-start,.popover-anim-slide.popover-top-end{transform:translateY(8px)}.popover-anim-slide.popover-bottom,.popover-anim-slide.popover-bottom-start,.popover-anim-slide.popover-bottom-end{transform:translateY(-8px)}.popover-anim-slide.popover-left,.popover-anim-slide.popover-left-start,.popover-anim-slide.popover-left-end{transform:translateX(8px)}.popover-anim-slide.popover-right,.popover-anim-slide.popover-right-start,.popover-anim-slide.popover-right-end{transform:translateX(-8px)}.popover-anim-slide.popover-visible{transform:translate(0, 0)}.popover-skeleton .popover-body{display:flex;flex-direction:column;gap:10px;padding:16px}.popover-skeleton .popover-body::before,.popover-skeleton .popover-body::after{content:"";display:block;height:12px;border-radius:6px;background:linear-gradient(90deg, var(--bg-primary, #e5e7eb) 25%, var(--bg-secondary, #f3f4f6) 50%, var(--bg-primary, #e5e7eb) 75%);background-size:200% 100%;animation:skeletonShimmer 1.4s infinite}.popover-skeleton .popover-body::after{width:65%}@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.popover{transition:none;transform:none !important;opacity:1 !important;display:none}.popover-visible{display:block}}`;
-
-const Popover = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.uiBeforeOpen = createEvent(this, "uiBeforeOpen");
-        this.uiOpen = createEvent(this, "uiOpen");
-        this.uiBeforeClose = createEvent(this, "uiBeforeClose");
-        this.uiClose = createEvent(this, "uiClose");
-        this.uiToggle = createEvent(this, "uiToggle");
-    }
-    get element() { return getElement(this); }
-    /** Popover heading text */
-    heading = '';
-    /**
-     * The target element to anchor the popover to.
-     * Can be a CSS selector (string) or a direct HTMLElement reference.
-     * If not provided, it will use the element in the 'trigger' slot or its first child.
-     */
-    target;
-    /** Popover content (HTML string). Use this for simple text or if you can't use the 'content' slot. */
-    content = '';
-    /** Controlled open state. */
-    open = false;
-    /** Disabled state. If true, popover will not show. */
-    disabled = false;
-    /**
-     * Trigger type: 'click' | 'hover' | 'focus' | 'manual'
-     * 'manual' = only show/hide via method calls
-     */
-    trigger = 'click';
-    /** Placement of popover */
-    placement = 'top';
-    /** Show arrow */
-    showArrow = true;
-    /** Popover width */
-    width = '280px';
-    /** Animation type */
-    animation = 'scale';
-    /** Show close button */
-    showCloseButton = false;
-    /** Show backdrop */
-    backdrop = false;
-    /**
-     * Visual variant.
-     * 'light' | 'dark' | 'success' | 'warning' | 'error' | 'info'
-     */
-    variant = 'light';
-    /**
-     * ARIA role for the popover panel.
-     * Use 'tooltip' for non-interactive hover hints, 'menu' for menus, 'dialog' for rich content.
-     */
-    popoverRole = 'dialog';
-    /**
-     * Delay in ms before showing on hover (0 = immediate)
-     */
-    showDelay = 0;
-    /**
-     * Delay in ms before hiding on hover
-     */
-    hideDelay = 200;
-    /**
-     * Close popover when window is scrolled
-     */
-    closeOnScroll = false;
-    /**
-     * Allow Escape key to close the popover (default: true)
-     */
-    closeOnEsc = true;
-    /**
-     * Maximum height of the popover body. If content exceeds this, it scrolls.
-     */
-    maxHeight = 'none';
-    /**
-     * When hover trigger is used, allow cursor to move into the popover without closing it.
-     * Set to false for pure tooltip behaviour.
-     */
-    interactive = true;
-    /** Loading state */
-    loading = false;
-    /** Skeleton state */
-    skeleton = false;
-    /** Distance between popover and trigger (in pixels) */
-    offset = 12;
-    /** Size of the arrow in pixels */
-    arrowSize = 10;
-    /** Close popover when clicking outside */
-    closeOnOutsideClick = true;
-    /** Close popover when focus leaves it */
-    closeOnBlur = true;
-    /** Match the width of the trigger element */
-    matchTriggerWidth = false;
-    /** Enable auto-flipping when hitting screen boundaries */
-    flip = true;
-    /** Enable auto-shifting (clamping) to stay inside viewport */
-    shift = true;
-    /** Boundary element for collision detection */
-    boundary = 'viewport';
-    /** Padding from boundary edges */
-    padding = 24;
-    /** Fallback placements for flipping (e.g. "top, bottom") */
-    fallbackPlacements;
-    /** Automatically choose the best placement based on available space */
-    autoPlacement = false;
-    /** Positioning strategy */
-    strategy = 'fixed';
-    /** Optional z-index for the popover panel */
-    zIndex = 21000;
-    /** Emitted before popover shows. Call event.preventDefault() to cancel. */
-    uiBeforeOpen;
-    /** Emitted when popover shows */
-    uiOpen;
-    /** Emitted before popover hides. Call event.preventDefault() to cancel. */
-    uiBeforeClose;
-    /** Emitted when popover hides */
-    uiClose;
-    /** Emitted when toggled */
-    uiToggle;
-    currentPlacement = 'top';
-    popoverStyles = {};
-    arrowStyles = {};
-    targetElement;
-    popoverContent;
-    arrowElement;
-    hideTimeout;
-    showTimeout;
-    focusTrap;
-    cleanupAutoUpdate;
-    resizeObserver;
-    latestSizeData = { width: '', maxWidth: '', maxHeight: '' };
-    updateRetries = 0;
-    componentWillLoad() {
-        this.currentPlacement = this.placement;
-    }
-    componentDidLoad() {
-        this.setupTrigger();
-        this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
-        this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
-        if (this.popoverContent) {
-            this.resizeObserver = new ResizeObserver(() => {
-                if (this.open)
-                    this.updatePosition();
-            });
-            this.resizeObserver.observe(this.popoverContent);
-        }
-        window.addEventListener('keydown', this.handleGlobalKeyDown);
-    }
-    componentDidUpdate() {
-        if (this.open && !this.cleanupAutoUpdate) {
-            this.startAutoUpdate();
-        }
-    }
-    disconnectedCallback() {
-        this.cleanup();
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-        }
-        window.removeEventListener('keydown', this.handleGlobalKeyDown);
-        if (this.focusTrap) {
-            this.focusTrap.deactivate();
-        }
-    }
-    visibilityChanged(newValue) {
-        if (newValue) {
-            if (this.disabled) {
-                this.open = false;
-                return;
-            }
-            this.handleOpen();
-        }
-        else {
-            this.handleClose();
-        }
-    }
-    handleTriggerConfigChange() {
-        this.cleanup();
-        this.setupTrigger();
-    }
-    handleOpen() {
-        if (!this.targetElement) {
-            this.setupTrigger();
-        }
-        this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
-        this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
-        if (this.popoverContent && !this.resizeObserver) {
-            this.resizeObserver = new ResizeObserver(() => {
-                if (this.open)
-                    this.updatePosition();
-            });
-            this.resizeObserver.observe(this.popoverContent);
-        }
-        requestAnimationFrame(() => {
-            this.startAutoUpdate();
-            this.updateAriaAttributes(true);
-            // Add outside click listener only when open
-            if (this.closeOnOutsideClick) {
-                // Use a sm timeout to avoid capturing the same click that opened it
-                setTimeout(() => {
-                    document.addEventListener('click', this.handleOutsideClick);
-                }, 10);
-            }
-            if (this.backdrop || this.showCloseButton || this.trigger === 'click') {
-                requestAnimationFrame(() => {
-                    this.initFocusTrap();
-                    if (this.focusTrap)
-                        this.focusTrap.activate();
-                });
-            }
-            this.uiOpen.emit();
-        });
-    }
-    handleClose() {
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-            this.cleanupAutoUpdate = undefined;
-        }
-        document.removeEventListener('click', this.handleOutsideClick);
-        if (this.focusTrap) {
-            this.focusTrap.deactivate();
-        }
-        this.updateAriaAttributes(false);
-        this.uiClose.emit();
-    }
-    updateAriaAttributes(expanded) {
-        if (this.targetElement) {
-            this.targetElement.setAttribute('aria-expanded', expanded.toString());
-            this.targetElement.setAttribute('aria-haspopup', this.popoverRole === 'menu' ? 'menu' : 'true');
-        }
-    }
-    initFocusTrap() {
-        if (!this.popoverContent)
-            return;
-        if (!this.focusTrap) {
-            this.focusTrap = new FocusTrap(this.popoverContent, {
-                initialFocus: this.popoverContent,
-                returnFocus: this.targetElement,
-                escapeDeactivates: true,
-                clickOutsideDeactivates: !this.backdrop
-            });
-        }
-    }
-    setupTrigger() {
-        // 1. Check for external target via selector or reference
-        if (this.target) {
-            if (typeof this.target === 'string') {
-                this.targetElement = document.querySelector(this.target);
-            }
-            else {
-                this.targetElement = this.target;
-            }
-        }
-        // 2. Fallback to slots if no external target
-        if (!this.targetElement) {
-            const triggerSlot = this.element.shadowRoot?.querySelector('slot[name="trigger"]');
-            const defaultSlot = this.element.shadowRoot?.querySelector('slot:not([name])');
-            const getAssignedElement = (slot) => {
-                const elements = slot?.assignedElements();
-                return elements?.length > 0 ? elements[0] : null;
-            };
-            this.targetElement = getAssignedElement(triggerSlot) || getAssignedElement(defaultSlot);
-        }
-        // 3. Last fallback: the component itself
-        if (!this.targetElement) {
-            this.targetElement = this.element;
-        }
-        if (this.targetElement && this.trigger !== 'manual') {
-            // Accessibility augmentation for non-buttons
-            if (!['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(this.targetElement.tagName)) {
-                if (!this.targetElement.hasAttribute('role'))
-                    this.targetElement.setAttribute('role', 'button');
-                if (!this.targetElement.hasAttribute('tabindex'))
-                    this.targetElement.setAttribute('tabindex', '0');
-            }
-            if (this.trigger === 'click') {
-                this.targetElement.addEventListener('click', this.handleTriggerClick);
-                this.targetElement.addEventListener('keydown', this.handleTargetKeyDown);
-            }
-            else if (this.trigger === 'hover') {
-                this.targetElement.addEventListener('mouseenter', this.handleMouseEnter);
-                this.targetElement.addEventListener('mouseleave', this.handleMouseLeave);
-                this.targetElement.addEventListener('focusin', this.handleFocusIn);
-                this.targetElement.addEventListener('focusout', this.handleFocusOut);
-            }
-            else if (this.trigger === 'focus') {
-                this.targetElement.addEventListener('focusin', this.handleFocusIn);
-                this.targetElement.addEventListener('focusout', this.handleFocusOut);
-            }
-            this.updateAriaAttributes(this.open);
-        }
-    }
-    handleTargetKeyDown = (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            this.toggle();
-        }
-    };
-    cleanup() {
-        if (!this.targetElement)
-            return;
-        this.targetElement.removeEventListener('click', this.handleTriggerClick);
-        this.targetElement.removeEventListener('keydown', this.handleTargetKeyDown);
-        this.targetElement.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.targetElement.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.targetElement.removeEventListener('focusin', this.handleFocusIn);
-        this.targetElement.removeEventListener('focusout', this.handleFocusOut);
-        document.removeEventListener('click', this.handleOutsideClick);
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = undefined;
-        }
-    }
-    handleTriggerClick = (e) => {
-        e.stopPropagation();
-        if (this.trigger === 'click') {
-            this.toggle();
-        }
-    };
-    handleFocusIn = () => {
-        this.show();
-    };
-    handleFocusOut = () => {
-        this.hide();
-    };
-    handleOutsideClick = (event) => {
-        if (this.targetElement?.contains(event.target))
-            return;
-        if (this.popoverContent?.contains(event.target))
-            return;
-        if (this.open)
-            this.hide();
-    };
-    handleMouseEnter = () => {
-        if (this.disabled)
-            return;
-        clearTimeout(this.hideTimeout);
-        if (this.showDelay > 0) {
-            this.showTimeout = setTimeout(() => this.show(), this.showDelay);
-        }
-        else {
-            this.show();
-        }
-    };
-    handleMouseLeave = () => {
-        clearTimeout(this.showTimeout);
-        this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
-    };
-    handlePopoverMouseEnter = () => {
-        if (this.trigger === 'hover' && this.interactive) {
-            clearTimeout(this.hideTimeout);
-            clearTimeout(this.showTimeout);
-        }
-    };
-    handlePopoverMouseLeave = () => {
-        if (this.trigger === 'hover' && this.interactive) {
-            this.handleMouseLeave();
-        }
-    };
-    handleGlobalKeyDown = (e) => {
-        if (this.open && this.closeOnEsc && e.key === 'Escape') {
-            e.stopPropagation();
-            this.hide();
-        }
-    };
-    startAutoUpdate() {
-        if (this.cleanupAutoUpdate)
-            this.cleanupAutoUpdate();
-        // The panel is conditionally rendered ({this.open && ...}).
-        this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
-        if (this.showArrow) {
-            this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
-        }
-        if (!this.targetElement || !this.popoverContent)
-            return;
-        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverContent, () => this.updatePosition(), { animationFrame: true });
-    }
-    async updatePosition() {
-        // Always re-query the panel and arrow in case they were null during initial mount
-        if (!this.popoverContent) {
-            this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
-        }
-        if (this.showArrow && !this.arrowElement) {
-            this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
-        }
-        if (!this.open || !this.popoverContent || !this.targetElement) {
-            this.updateRetries = 0;
-            return;
-        }
-        // Double-check dimensions - if 0, we might need a retry (like Tooltip component does)
-        if (this.popoverContent.offsetWidth === 0 && this.updateRetries < 5) {
-            this.updateRetries++;
-            requestAnimationFrame(() => this.updatePosition());
-            return;
-        }
-        this.updateRetries = 0;
-        const { left, top, placement, availableHeight, availableWidth, arrowX, arrowY } = calculateUniversalPlacement(this.targetElement, {
-            menuWidth: this.popoverContent.offsetWidth,
-            menuHeight: this.popoverContent.offsetHeight,
-            gap: this.offset,
-            placement: this.autoPlacement ? 'auto' : this.placement.split('-')[0],
-            align: this.placement.includes('start') ? 'start' : (this.placement.includes('end') ? 'end' : 'center'),
-            padding: this.padding
-        });
-        this.currentPlacement = placement;
-        // Constrain size based on available space
-        this.latestSizeData = {
-            width: this.width,
-            maxWidth: `${Math.min(window.innerWidth - (this.padding * 2), availableWidth)}px`,
-            maxHeight: this.maxHeight !== 'none' ? this.maxHeight : `${availableHeight}px`,
-        };
-        const sizeData = this.latestSizeData;
-        this.popoverStyles = {
-            position: this.strategy,
-            left: `${left}px`,
-            top: `${top}px`,
-            width: this.matchTriggerWidth ? `${this.targetElement.offsetWidth}px` : (sizeData.width || this.width),
-            minWidth: '160px',
-            maxWidth: sizeData.maxWidth,
-            maxHeight: sizeData.maxHeight,
-            visibility: 'visible',
-            opacity: '1'
-        };
-        if (this.showArrow && this.arrowElement) {
-            const side = placement;
-            const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
-            const halfSize = Math.round(this.arrowSize / 2);
-            this.arrowStyles = {
-                top: '',
-                right: '',
-                bottom: '',
-                left: '',
-                ...(side === 'top' || side === 'bottom' ?
-                    { left: `${arrowX}px`, transform: 'translateX(-50%) rotate(45deg)' } :
-                    { top: `${arrowY}px`, transform: 'translateY(-50%) rotate(45deg)' }),
-                [staticSide]: `-${halfSize}px`,
-            };
-        }
-    }
-    async reposition() {
-        return this.updatePosition();
-    }
-    async computePlacement() {
-        return this.currentPlacement;
-    }
-    async show() {
-        if (this.disabled)
-            return;
-        if (this.uiBeforeOpen) {
-            const event = this.uiBeforeOpen.emit();
-            if (event && event.defaultPrevented)
-                return;
-        }
-        this.open = true;
-    }
-    async hide() {
-        if (this.uiBeforeClose) {
-            const event = this.uiBeforeClose.emit();
-            if (event && event.defaultPrevented)
-                return;
-        }
-        this.open = false;
-    }
-    async toggle() {
-        if (this.disabled)
-            return;
-        if (this.open) {
-            await this.hide();
-        }
-        else {
-            await this.show();
-        }
-        if (this.uiToggle)
-            this.uiToggle.emit({ open: this.open });
-    }
-    getPopoverStyle() {
-        return {
-            '--ui-popover-arrow-size': `${this.arrowSize}px`,
-            zIndex: this.zIndex ? `${this.zIndex}` : undefined,
-        };
-    }
-    render() {
-        const popoverClasses = {
-            'popover': true,
-            'popover-visible': this.open,
-            'popover-loading': this.loading,
-            'popover-skeleton': this.skeleton,
-            [`popover-${this.currentPlacement}`]: true,
-            [`popover-${this.variant}`]: true,
-            [`popover-anim-${this.animation}`]: true,
-        };
-        const finalPopoverStyle = {
-            ...this.getPopoverStyle(),
-            ...this.popoverStyles
-        };
-        return (h("div", { key: '0f7778a7317e7842be132860b1dc61b611fa247d', class: "popover-wrapper" }, h("div", { key: '2df4f3624d7335dbb9149b169778dfe288c4ff57', class: "popover-trigger" }, h("slot", { key: 'e0058a8f0c58e229df36e2ef47a402e4cf9e81dd', name: "trigger" }), h("slot", { key: '49c41549a41f352f0b94e6ae4dbde48435742ebc' })), this.backdrop && this.open && (h("div", { key: '51851882bc67bd5a1a88d7a9f8bd44df99e3dee6', class: "popover-backdrop", onClick: () => this.hide() })), this.open && (h("div", { key: 'bd82cf9d153a7b228ac7696e407bb8a0d36ae942', class: popoverClasses, style: finalPopoverStyle, onMouseEnter: () => this.handlePopoverMouseEnter(), onMouseLeave: () => this.handlePopoverMouseLeave(), role: this.popoverRole, "aria-modal": this.backdrop ? 'true' : 'false', "aria-label": this.heading || undefined }, this.showArrow && h("div", { key: '545cb01f513e171e3d79a664ea57c5cbee6b5d07', class: "popover-arrow", style: this.arrowStyles }), h("div", { key: 'bc8a9f93d49c2d1c201203728e731ef5a2850602', class: "popover-inner" }, (this.heading || this.showCloseButton) && (h("div", { key: '9dee577314cc88f1bad7372006e593f34fa1a3fc', class: "popover-header" }, this.heading && h("div", { key: '7b0b3be1e8f6b0949969172eb74702034c661f6a', class: "popover-title" }, this.heading), this.showCloseButton && (h("ui-button", { key: 'd6dcc9b87b330797f6e29bf711df0504b386f5cb', variant: "ghost", size: "xxs", iconOnly: true, class: "popover-close", onClick: () => this.hide(), ariaLabel: "Close", icon: "x", iconLibrary: "lucide", iconSize: "14px" })))), h("div", { key: '3639ca2119db19c98ce70fd11afe8ba4451cad2c', class: "popover-body", style: { maxHeight: this.maxHeight, overflowY: this.maxHeight !== 'none' ? 'auto' : undefined } }, h("slot", { key: '43b5f442af61f83b9342a8a704a625155aabb0d3', name: "content" }), this.content && h("div", { key: '1bd964f0709f66c335bfaaafe1bbe268554be279', innerHTML: sanitizeHTML(this.content) })), h("slot", { key: 'da80a35ef26a42ab2830e84ac81cdca2aef348f2', name: "footer" }))))));
-    }
-    static get watchers() { return {
-        "open": [{
-                "visibilityChanged": 0
-            }],
-        "target": [{
-                "handleTriggerConfigChange": 0
-            }],
-        "trigger": [{
-                "handleTriggerConfigChange": 0
-            }]
-    }; }
-};
-Popover.style = popoverCss();
-
-export { Popover as ui_popover };