bromcom-ui-next 0.1.29 → 0.1.30

package/dist/collection/components/linked/linked.component.js

@@ -1,56 +1,128 @@
 import { h, Host } from "@stencil/core";
-import { computePosition, shift, offset, autoUpdate, flip } from "@floating-ui/dom";
+import { computePosition, shift, offset, autoUpdate, flip, arrow } from "@floating-ui/dom";
+import { tv } from "../../utils/tv";
+/**
+ * @component BcmLinked
+ * @description A flexible linked floating element component that displays contextual content relative to a trigger element.
+ * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+ * Supports different trigger types (click, hover, focus, manual) and comprehensive event system.
+ *
+ * @example Basic Click Trigger
+ * <bcm-linked trigger="click">
+ *   <button slot="trigger">Click Me</button>
+ *   <div>Floating content here</div>
+ * </bcm-linked>
+ *
+ * @example Hover Trigger with Delays
+ * <bcm-linked trigger="hover" show-delay="200" hide-delay="100">
+ *   <span slot="trigger">Hover Me</span>
+ *   <div>This appears on hover</div>
+ * </bcm-linked>
+ *
+ * @example Manual Control
+ * <bcm-linked id="my-linked" trigger="manual">
+ *   <button slot="trigger">Trigger</button>
+ *   <div>Controlled content</div>
+ * </bcm-linked>
+ * <script>
+ *   const linked = document.querySelector('#my-linked');
+ *   linked.show(); // Opens the floating element
+ *   linked.hide(); // Closes the floating element
+ * </script>
+ *
+ * @slot trigger - The trigger element that controls the floating element visibility
+ * @slot - Default slot for the floating content
+ *
+ * @csspart floating - The floating container element
+ * @csspart arrow - The arrow element pointing to the trigger
+ * @csspart content - The content wrapper element
+ */
 export class BcmLinked {
     constructor() {
-        // Trigger configuration
+        // Unique ID for ARIA
+        this.componentId = `linked-${Math.random().toString(36).substring(2, 11)}`;
+        /**
+         * @prop {boolean} visible - Controls the visibility state of the floating element.
+         * Can be set programmatically or toggled by user interaction.
+         * Default: false
+         */
+        this.visible = false;
+        /**
+         * @prop {TriggerType} trigger - Defines the interaction type to show/hide the floating element.
+         * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave,
+         * 'focus' shows on focus and hides on blur, 'manual' requires programmatic control.
+         * Default: 'click'
+         */
         this.trigger = 'click';
+        /**
+         * @prop {Placement} placement - Defines the position of the floating element relative to the trigger.
+         * Default: 'bottom-start'
+         */
         this.placement = 'bottom-start';
-        // Timing configuration
+        /**
+         * @prop {number} showDelay - Delay in milliseconds before showing the floating element.
+         * Default: 0
+         */
         this.showDelay = 0;
+        /**
+         * @prop {number} hideDelay - Delay in milliseconds before hiding the floating element.
+         * Default: 0
+         */
         this.hideDelay = 0;
-        // Positioning configuration
-        this.offset = 8;
-        this.arrow = false;
+        /**
+         * @prop {number} offsetDistance - Distance in pixels between the floating element and the trigger.
+         * Default: 8
+         */
+        this.offsetDistance = 8;
+        /**
+         * @prop {boolean} showArrow - Whether to show an arrow pointing to the trigger element.
+         * Default: true
+         */
+        this.showArrow = true;
+        /**
+         * @prop {boolean} disabled - Disables the floating element, preventing it from showing.
+         * Default: false
+         */
         this.disabled = false;
-        // Style configuration
-        this.zIndex = 1000;
-        this.appendToBody = false;
-        this.destroyOnHide = false;
-        // State
+        /**
+         * @prop {boolean} closeOnOutsideClick - Whether to close when clicking outside.
+         * Default: true
+         */
+        this.closeOnOutsideClick = true;
+        /**
+         * @prop {boolean} closeOnEscape - Whether to close when pressing Escape key.
+         * Default: true
+         */
+        this.closeOnEscape = true;
+        // Internal state
         this.isVisible = false;
-        this.isReady = false;
-        this.handleMouseEnter = () => {
-            this.clearTimeouts();
-            if (this.showDelay > 0) {
-                this.showTimeout = setTimeout(() => this.show(), this.showDelay);
-            }
-            else {
-                this.show();
+        this.handleTriggerSlotChange = () => {
+            var _a;
+            const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
+            if (!slot)
+                return;
+            const elements = slot.assignedElements();
+            if (elements.length > 0) {
+                this.removeTriggerListeners();
+                this.triggerRef = elements[0];
+                this.setupTriggerListeners();
+                this.setupAriaAttributes();
             }
         };
+        this.handleMouseEnter = () => {
+            this.show();
+        };
         this.handleMouseLeave = () => {
-            this.clearTimeouts();
-            if (this.hideDelay > 0) {
-                this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
-            }
-            else {
-                this.hide();
-            }
+            this.hide();
         };
         this.handleFloatingMouseEnter = () => {
             this.clearTimeouts();
         };
         this.handleFloatingMouseLeave = () => {
-            this.clearTimeouts();
-            if (this.hideDelay > 0) {
-                this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
-            }
-            else {
-                this.hide();
-            }
+            this.hide();
         };
-        this.handleClick = (e) => {
-            e.stopPropagation();
+        this.handleTriggerClick = (event) => {
+            event.stopPropagation();
             this.toggle();
         };
         this.handleFocus = () => {
@@ -59,156 +131,229 @@ export class BcmLinked {
         this.handleBlur = () => {
             this.hide();
         };
+        this.handleOutsideClick = (event) => {
+            var _a;
+            if (!this.closeOnOutsideClick || !this.visible)
+                return;
+            const target = event.target;
+            const path = event.composedPath();
+            const isInsideHost = this.host.contains(target) || path.includes(this.host);
+            const isInsideFloating = ((_a = this.floatingRef) === null || _a === void 0 ? void 0 : _a.contains(target)) || (this.floatingRef && path.includes(this.floatingRef));
+            if (!isInsideHost && !isInsideFloating) {
+                this.hide();
+            }
+        };
+        this.handleToggle = (event) => {
+            if (event.newState === 'open' && !this.isVisible) {
+                this.isVisible = true;
+            }
+            else if (event.newState === 'closed' && this.isVisible) {
+                this.isVisible = false;
+            }
+        };
+        this.linkedClass = tv({
+            slots: {
+                wrapper: 'inline-block',
+                floating: ['bcm-ui-element', 'fixed', 'bg-color-basic-base', 'rounded-md', 'shadow-lg', 'border', 'border-color-basic-subtle'],
+                arrow: ['absolute', 'w-2', 'h-2', 'bg-color-basic-base', 'border', 'border-color-basic-subtle', 'rotate-45'],
+                content: 'bg-color-basic-base',
+            },
+        });
     }
-    // Watch for changes
-    setupTarget() {
-        this.disconnectTarget();
-        this.connectTarget();
-    }
-    onVisibilityChange(newValue) {
+    // Watch for visibility prop changes
+    handleVisibleChange(newValue) {
+        if (this.disabled)
+            return;
         if (newValue) {
-            this.updatePosition();
-            this.bcmShown.emit();
+            this.showInternal();
         }
         else {
-            this.bcmHidden.emit();
+            this.hideInternal();
         }
     }
-    async componentDidLoad() {
-        // Wait for render
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        this.floatingEl = this.host.querySelector('.floating-content');
-        if (this.floatingEl) {
-            this.isReady = true;
-            this.connectTarget();
-            this.setupFloatingObserver();
-            console.log('✅ bcm-linked initialized successfully');
+    handleDisabledChange(isDisabled) {
+        if (isDisabled && this.visible) {
+            this.hide();
         }
-        else {
-            console.error('❌ Could not find .floating-content element');
+    }
+    handlePositionPropsChange() {
+        if (this.visible) {
+            this.updatePosition();
         }
     }
-    disconnectedCallback() {
-        var _a, _b;
-        this.disconnectTarget();
-        this.clearTimeouts();
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        // Restore element to original position if component is destroyed while in portal
-        if (this.appendToBody && this.floatingEl && this.originalParent) {
-            this.originalParent.appendChild(this.floatingEl);
+    // Internal show logic
+    showInternal() {
+        var _a;
+        if (!this.floatingRef || this.disabled)
+            return;
+        this.bcmShow.emit();
+        this.isVisible = true;
+        this.floatingRef.showPopover();
+        this.startAutoUpdate();
+        this.updatePosition();
+        (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
+        if (this.closeOnOutsideClick && this.trigger !== 'manual') {
+            this.addOutsideClickListener();
         }
+        // Emit bcmShown after animation
+        requestAnimationFrame(() => {
+            this.bcmShown.emit();
+        });
     }
-    connectTarget() {
-        if (!this.isReady)
+    // Internal hide logic
+    hideInternal() {
+        var _a;
+        if (!this.floatingRef)
             return;
-        // Find target element
-        this.targetEl =
-            this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null) || this.host.previousElementSibling || this.host.parentElement;
-        if (!this.targetEl) {
-            console.warn('bcm-linked: No target element found');
+        this.bcmHide.emit();
+        this.isVisible = false;
+        this.floatingRef.hidePopover();
+        this.stopAutoUpdate();
+        (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+        this.removeOutsideClickListener();
+        // Emit bcmHidden after animation
+        setTimeout(() => {
+            this.bcmHidden.emit();
+        }, 150);
+    }
+    /**
+     * Programmatically shows the floating element.
+     * Respects the showDelay prop.
+     */
+    async show() {
+        if (this.visible || this.disabled)
             return;
+        this.clearTimeouts();
+        if (this.showDelay > 0) {
+            this.showTimeout = window.setTimeout(() => {
+                this.bcmBeforeShow.emit();
+                this.visible = true;
+            }, this.showDelay);
         }
-        // Setup event listeners based on trigger type
-        this.setupEventListeners();
-        // Setup auto-update for position
-        if (this.targetEl && this.floatingEl) {
-            this.cleanup = autoUpdate(this.targetEl, this.floatingEl, () => {
-                if (this.isVisible) {
-                    this.updatePosition();
-                }
-            });
+        else {
+            this.bcmBeforeShow.emit();
+            this.visible = true;
         }
-        // Setup resize observer for responsive positioning
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.isVisible) {
-                this.updatePosition();
-            }
-        });
-        this.resizeObserver.observe(this.floatingEl);
     }
-    disconnectTarget() {
-        var _a, _b;
-        if (this.targetEl) {
-            this.removeEventListeners();
+    /**
+     * Programmatically hides the floating element.
+     * Respects the hideDelay prop.
+     */
+    async hide() {
+        if (!this.visible)
+            return;
+        this.clearTimeouts();
+        if (this.hideDelay > 0) {
+            this.hideTimeout = window.setTimeout(() => {
+                this.bcmBeforeHide.emit();
+                this.visible = false;
+            }, this.hideDelay);
+        }
+        else {
+            this.bcmBeforeHide.emit();
+            this.visible = false;
+        }
+    }
+    /**
+     * Toggles the floating element visibility.
+     */
+    async toggle() {
+        if (this.visible) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    /**
+     * Updates the position of the floating element.
+     * Useful when the trigger element moves or resizes.
+     */
+    async updatePosition() {
+        await this.calculatePosition();
+    }
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
         }
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
-    setupEventListeners() {
+    setupAriaAttributes() {
+        if (!this.triggerRef)
+            return;
+        this.triggerRef.setAttribute('aria-describedby', this.componentId);
+        this.triggerRef.setAttribute('aria-expanded', String(this.visible));
+        this.triggerRef.setAttribute('aria-haspopup', 'true');
+    }
+    setupTriggerListeners() {
         var _a, _b;
-        if (!this.targetEl || this.disabled)
+        if (!this.triggerRef || this.disabled)
             return;
         switch (this.trigger) {
             case 'hover':
-                this.targetEl.addEventListener('mouseenter', this.handleMouseEnter);
-                this.targetEl.addEventListener('mouseleave', this.handleMouseLeave);
-                (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.handleFloatingMouseEnter);
-                (_b = this.floatingEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.handleFloatingMouseLeave);
+                this.triggerRef.addEventListener('mouseenter', this.handleMouseEnter);
+                this.triggerRef.addEventListener('mouseleave', this.handleMouseLeave);
+                (_a = this.floatingRef) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.handleFloatingMouseEnter);
+                (_b = this.floatingRef) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.handleFloatingMouseLeave);
                 break;
             case 'click':
-                this.targetEl.addEventListener('click', this.handleClick);
-                this.setupClickOutside();
+                this.triggerRef.addEventListener('click', this.handleTriggerClick);
                 break;
             case 'focus':
-                this.targetEl.addEventListener('focus', this.handleFocus);
-                this.targetEl.addEventListener('blur', this.handleBlur);
+                this.triggerRef.addEventListener('focus', this.handleFocus);
+                this.triggerRef.addEventListener('blur', this.handleBlur);
+                break;
+            case 'manual':
+                // No automatic listeners
                 break;
         }
     }
-    removeEventListeners() {
+    removeTriggerListeners() {
         var _a, _b;
-        if (!this.targetEl)
+        if (!this.triggerRef)
             return;
-        this.targetEl.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.targetEl.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.targetEl.removeEventListener('click', this.handleClick);
-        this.targetEl.removeEventListener('focus', this.handleFocus);
-        this.targetEl.removeEventListener('blur', this.handleBlur);
-        (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.handleFloatingMouseEnter);
-        (_b = this.floatingEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.handleFloatingMouseLeave);
-        this.removeClickOutside();
+        this.triggerRef.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.triggerRef.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.triggerRef.removeEventListener('click', this.handleTriggerClick);
+        this.triggerRef.removeEventListener('focus', this.handleFocus);
+        this.triggerRef.removeEventListener('blur', this.handleBlur);
+        (_a = this.floatingRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.handleFloatingMouseEnter);
+        (_b = this.floatingRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.handleFloatingMouseLeave);
     }
-    setupClickOutside() {
-        this.clickOutsideHandler = (e) => {
-            var _a, _b;
-            const target = e.target;
-            if (!((_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.contains(target)) && !((_b = this.targetEl) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.host.contains(target)) {
+    handleKeyDown(event) {
+        var _a;
+        if (!this.closeOnEscape || !this.visible)
+            return;
+        if (event.key === 'Escape') {
+            const openLinked = Array.from(document.querySelectorAll('bcm-linked[visible]'));
+            const topLinked = openLinked[openLinked.length - 1];
+            if (topLinked === this.host) {
+                event.preventDefault();
                 this.hide();
+                (_a = this.triggerRef) === null || _a === void 0 ? void 0 : _a.focus();
             }
-        };
-        document.addEventListener('click', this.clickOutsideHandler, true);
-    }
-    removeClickOutside() {
-        if (this.clickOutsideHandler) {
-            document.removeEventListener('click', this.clickOutsideHandler, true);
-            this.clickOutsideHandler = undefined;
         }
     }
-    clearTimeouts() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = undefined;
-        }
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = undefined;
-        }
+    addOutsideClickListener() {
+        setTimeout(() => {
+            document.addEventListener('click', this.handleOutsideClick, true);
+        }, 0);
     }
-    async updatePosition() {
-        if (!this.targetEl || !this.floatingEl || !this.isVisible)
+    removeOutsideClickListener() {
+        document.removeEventListener('click', this.handleOutsideClick, true);
+    }
+    async calculatePosition() {
+        if (!this.triggerRef || !this.floatingRef || !this.isVisible)
             return;
-        // Use autoPlacement only for bottom-start (dropdown default)
-        // For other placements, respect the manual placement with flip fallback
-        // const useAutoPlacement = this.placement === 'bottom-start';
-        const middleware = [
-            offset(this.offset),
-            // useAutoPlacement
-            //   ? autoPlacement({
-            //       allowedPlacements: ['bottom-start', 'bottom-end', 'bottom', 'top-start', 'top-end', 'top', 'right-start', 'right-end', 'right', 'left-start', 'left-end', 'left'],
-            //       boundary: document.body,
-            //     })
-            //   :
+        const virtualElement = {
+            getBoundingClientRect: () => this.triggerRef.getBoundingClientRect(),
+        };
+        const middlewareList = [
+            offset(this.offsetDistance),
             flip({
                 fallbackPlacements: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'],
             }),
@@ -216,109 +361,88 @@ export class BcmLinked {
                 padding: 8,
             }),
         ];
-        const { x, y, placement } = await computePosition(this.targetEl, this.floatingEl, {
+        if (this.showArrow && this.arrowRef) {
+            middlewareList.push(arrow({ element: this.arrowRef }));
+        }
+        const { x, y, placement, middlewareData } = await computePosition(virtualElement, this.floatingRef, {
             placement: this.placement,
-            middleware,
+            middleware: middlewareList,
             strategy: 'fixed',
         });
-        Object.assign(this.floatingEl.style, {
+        Object.assign(this.floatingRef.style, {
             left: `${x}px`,
             top: `${y}px`,
-            zIndex: this.zIndex.toString(),
         });
-        // Update arrow if enabled
-        if (this.arrow) {
-            this.updateArrow(placement);
+        // Arrow positioning
+        if (this.showArrow && this.arrowRef && middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]];
+            Object.assign(this.arrowRef.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
         }
+        this.floatingRef.setAttribute('data-placement', placement);
     }
-    updateArrow(placement) {
-        var _a;
-        const arrow = (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.querySelector('.floating-arrow');
-        if (!arrow)
+    startAutoUpdate() {
+        if (!this.triggerRef || !this.floatingRef)
             return;
-        // Remove all arrow classes
-        arrow.className = 'floating-arrow';
-        // Add placement-specific class
-        const side = placement.split('-')[0];
-        arrow.classList.add(`arrow-${side}`);
-    }
-    async show() {
-        if (this.disabled || this.isVisible)
-            return;
-        this.bcmShow.emit();
-        // Portalling: Move the floating element to the body
-        if (this.appendToBody && this.floatingEl) {
-            this.originalParent = this.floatingEl.parentNode;
-            this.originalNextSibling = this.floatingEl.nextSibling;
-            document.body.appendChild(this.floatingEl);
-        }
-        this.isVisible = true;
-        // Use requestAnimationFrame to ensure the element is visible before positioning
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        await this.updatePosition();
+        this.cleanupAutoUpdate = autoUpdate(this.triggerRef, this.floatingRef, () => this.calculatePosition(), {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: true,
+            layoutShift: true,
+        });
     }
-    async hide() {
-        if (!this.isVisible)
-            return;
-        this.bcmHide.emit();
-        this.isVisible = false;
-        // Portalling: Restore the floating element to its original position
-        if (this.appendToBody && this.floatingEl && this.originalParent) {
-            if (this.originalNextSibling) {
-                this.originalParent.insertBefore(this.floatingEl, this.originalNextSibling);
-            }
-            else {
-                this.originalParent.appendChild(this.floatingEl);
-            }
-            this.originalParent = undefined;
-            this.originalNextSibling = undefined;
-        }
-        if (this.destroyOnHide && this.floatingEl && this.floatingEl.parentNode) {
-            this.floatingEl.parentNode.removeChild(this.floatingEl);
-        }
+    stopAutoUpdate() {
+        var _a;
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupAutoUpdate = undefined;
     }
-    async toggle() {
-        if (this.isVisible) {
-            await this.hide();
-        }
-        else {
-            await this.show();
+    componentDidLoad() {
+        var _a;
+        // Toggle event listener (Popover API)
+        (_a = this.floatingRef) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.handleToggle);
+        // Initial trigger setup - manually trigger slot change handler
+        this.handleTriggerSlotChange();
+        // Initial state sync
+        if (this.visible) {
+            this.showInternal();
         }
     }
-    async updatePositioning() {
-        await this.updatePosition();
-    }
-    setupFloatingObserver() {
-        if (!this.floatingEl)
-            return;
-        // Observe floating element size changes for position updates
-        this.resizeObserver = new ResizeObserver(() => {
+    disconnectedCallback() {
+        this.clearTimeouts();
+        this.stopAutoUpdate();
+        this.removeTriggerListeners();
+        this.removeOutsideClickListener();
+        if (this.floatingRef) {
+            this.floatingRef.removeEventListener('toggle', this.handleToggle);
             if (this.isVisible) {
-                this.updatePosition();
+                try {
+                    this.floatingRef.hidePopover();
+                }
+                catch (e) {
+                    // Element might already be removed
+                }
             }
-        });
-        this.resizeObserver.observe(this.floatingEl);
+        }
     }
     render() {
-        const floatingClasses = {
-            'floating-content': true,
-            'floating-visible': this.isVisible,
-            'floating-hidden': !this.isVisible,
-            'floating-with-arrow': this.arrow,
-            'floating-destroy-on-hide': this.destroyOnHide,
-        };
-        return (h(Host, { key: 'f5835cc1b6044476e66402d23a3becf18d3f2049' }, h("div", { key: '2c7f92bbe85bc938a767734ef4b27702247fb390', class: floatingClasses, style: {
-                position: 'fixed',
-                top: '0px',
-                left: '0px',
-                zIndex: this.zIndex.toString(),
-                display: this.isVisible ? 'block' : 'none',
-                visibility: this.isVisible ? 'visible' : 'hidden',
-                opacity: this.isVisible ? '1' : '0',
-                pointerEvents: this.isVisible ? 'auto' : 'none',
-            } }, this.arrow && h("div", { key: 'f6eedac02b29b3ca00a9a84eea940ac89089f30c', class: "floating-arrow" }), h("div", { key: '7cb19f085de1d77a41fd9897be90999e78a0a54d', class: "floating-wrapper" }, h("slot", { key: 'a4b4289642850e3c2f7f27771b3d28bc41c8248a' }))), h("div", { key: '61cd7af9a4a47c87c308e1e67f96efb987c97312', style: { display: 'none' } }, h("slot", { key: '7160df275f5c7c66733158f95266598d0d207a17', name: "fallback" }))));
+        const { wrapper, floating, arrow, content } = this.linkedClass();
+        return (h(Host, { key: 'f58760b6589329f9eabc42f39b6503fad10cf330' }, h("div", { key: 'adb9003eec4ca786bdddc657ba28cbc0a80baf57', class: wrapper() }, h("slot", { key: '61323463e76c395668d02288e5bdcb44826a31ea', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("div", { key: '3b395b18152cd302b4511ef89928374f33012594', ref: el => (this.floatingRef = el), id: this.componentId, part: "floating", class: floating(),
+            // @ts-ignore - popover is a valid HTML attribute
+            popover: "manual", role: "dialog" }, this.showArrow && h("div", { key: '3f5311d21f7fce74c94ac0435a8d2fc076036b10', ref: el => (this.arrowRef = el), part: "arrow", class: arrow() }), h("div", { key: 'ee41f30c7f73c113f129f938fd721476658b5744', part: "content", class: content() }, h("slot", { key: '106502e2f8db8fdc90412fcf59da40d2de377988' }))))));
     }
     static get is() { return "bcm-linked"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["linked.css"]
@@ -331,51 +455,31 @@ export class BcmLinked {
     }
     static get properties() {
         return {
-            "targetId": {
-                "type": "string",
-                "attribute": "target-id",
-                "mutable": false,
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} visible - Controls the visibility state of the floating element.\nCan be set programmatically or toggled by user interaction.\nDefault: false"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
-            },
-            "targetElement": {
-                "type": "unknown",
-                "attribute": "target-element",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "false"
             },
             "trigger": {
                 "type": "string",
-                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
                     "original": "TriggerType",
@@ -391,17 +495,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{TriggerType} trigger - Defines the interaction type to show/hide the floating element.\n'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave,\n'focus' shows on focus and hides on blur, 'manual' requires programmatic control.\nDefault: 'click'"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "trigger",
                 "defaultValue": "'click'"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -417,17 +524,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{Placement} placement - Defines the position of the floating element relative to the trigger.\nDefault: 'bottom-start'"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'bottom-start'"
             },
             "showDelay": {
                 "type": "number",
-                "attribute": "show-delay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -437,17 +547,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{number} showDelay - Delay in milliseconds before showing the floating element.\nDefault: 0"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-delay",
                 "defaultValue": "0"
             },
             "hideDelay": {
                 "type": "number",
-                "attribute": "hide-delay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -457,17 +570,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{number} hideDelay - Delay in milliseconds before hiding the floating element.\nDefault: 0"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-delay",
                 "defaultValue": "0"
             },
-            "offset": {
+            "offsetDistance": {
                 "type": "number",
-                "attribute": "offset",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -477,17 +593,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{number} offsetDistance - Distance in pixels between the floating element and the trigger.\nDefault: 8"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "offset-distance",
                 "defaultValue": "8"
             },
-            "arrow": {
+            "showArrow": {
                 "type": "boolean",
-                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -497,17 +616,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} showArrow - Whether to show an arrow pointing to the trigger element.\nDefault: true"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "attribute": "show-arrow",
+                "defaultValue": "true"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -517,37 +639,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} disabled - Disables the floating element, preventing it from showing.\nDefault: false"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "zIndex": {
-                "type": "number",
-                "attribute": "z-index",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "1000"
-            },
-            "appendToBody": {
+            "closeOnOutsideClick": {
                 "type": "boolean",
-                "attribute": "append-to-body",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -557,17 +662,20 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} closeOnOutsideClick - Whether to close when clicking outside.\nDefault: true"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "attribute": "close-on-outside-click",
+                "defaultValue": "true"
             },
-            "destroyOnHide": {
+            "closeOnEscape": {
                 "type": "boolean",
-                "attribute": "destroy-on-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -577,31 +685,73 @@ export class BcmLinked {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{boolean} closeOnEscape - Whether to close when pressing Escape key.\nDefault: true"
+                        }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
-            "isVisible": {},
-            "isReady": {}
+            "isVisible": {}
         };
     }
     static get events() {
         return [{
+                "method": "bcmBeforeShow",
+                "name": "bcmBeforeShow",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmBeforeShow - Emitted before the floating element shows."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "bcmShow",
                 "name": "bcmShow",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmShow - Emitted when the floating element is shown."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmBeforeHide",
+                "name": "bcmBeforeHide",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmBeforeHide - Emitted before the floating element hides."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -612,11 +762,14 @@ export class BcmLinked {
             }, {
                 "method": "bcmHide",
                 "name": "bcmHide",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmHide - Emitted when the floating element is hidden."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -627,11 +780,14 @@ export class BcmLinked {
             }, {
                 "method": "bcmShown",
                 "name": "bcmShown",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmShown - Emitted after the floating element is fully shown (after animation)."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -642,11 +798,14 @@ export class BcmLinked {
             }, {
                 "method": "bcmHidden",
                 "name": "bcmHidden",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "bcmHidden - Emitted after the floating element is fully hidden (after animation)."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -671,7 +830,7 @@ export class BcmLinked {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Programmatically shows the floating element.\nRespects the showDelay prop.",
                     "tags": []
                 }
             },
@@ -688,7 +847,7 @@ export class BcmLinked {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Programmatically hides the floating element.\nRespects the hideDelay prop.",
                     "tags": []
                 }
             },
@@ -705,11 +864,11 @@ export class BcmLinked {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Toggles the floating element visibility.",
                     "tags": []
                 }
             },
-            "updatePositioning": {
+            "updatePosition": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -722,7 +881,7 @@ export class BcmLinked {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the position of the floating element.\nUseful when the trigger element moves or resizes.",
                     "tags": []
                 }
             }
@@ -731,14 +890,29 @@ export class BcmLinked {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "targetId",
-                "methodName": "setupTarget"
+                "propName": "visible",
+                "methodName": "handleVisibleChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "placement",
+                "methodName": "handlePositionPropsChange"
             }, {
-                "propName": "targetElement",
-                "methodName": "setupTarget"
+                "propName": "offsetDistance",
+                "methodName": "handlePositionPropsChange"
             }, {
-                "propName": "isVisible",
-                "methodName": "onVisibilityChange"
+                "propName": "showArrow",
+                "methodName": "handlePositionPropsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }