@aquera/nile-elements 1.3.3 → 1.3.4-beta-2

package/dist/src/nile-floating-panel/event-manager.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Manages all event handling for the floating panel
+ */
+export class EventManager {
+    constructor(component) {
+        this.panelContainer = null;
+        this.closeOnOutsideClick = true;
+        this.isOpen = false;
+        this.boundHandleDocumentClick = null;
+        this.onCloseCallback = null;
+        this.component = component;
+    }
+    /**
+     * Sets up the outside click handler
+     */
+    setupOutsideClickHandler(panelContainer, closeOnOutsideClick, isOpen, onClose) {
+        this.panelContainer = panelContainer;
+        this.closeOnOutsideClick = closeOnOutsideClick;
+        this.isOpen = isOpen;
+        this.onCloseCallback = onClose;
+        if (!this.closeOnOutsideClick || this.boundHandleDocumentClick) {
+            return;
+        }
+        this.boundHandleDocumentClick = this.handleDocumentClick.bind(this);
+        // Use capture phase to ensure we catch the event early
+        document.addEventListener('mousedown', this.boundHandleDocumentClick, true);
+    }
+    /**
+     * Updates the outside click handler configuration
+     */
+    updateOutsideClickHandler(panelContainer, closeOnOutsideClick, isOpen) {
+        this.panelContainer = panelContainer;
+        this.closeOnOutsideClick = closeOnOutsideClick;
+        this.isOpen = isOpen;
+        // Cleanup existing handler
+        this.cleanupOutsideClickHandler();
+        // Setup new handler if needed
+        if (isOpen && closeOnOutsideClick && panelContainer) {
+            this.boundHandleDocumentClick = this.handleDocumentClick.bind(this);
+            document.addEventListener('mousedown', this.boundHandleDocumentClick, true);
+        }
+    }
+    /**
+     * Cleans up the outside click handler
+     */
+    cleanupOutsideClickHandler() {
+        if (this.boundHandleDocumentClick) {
+            document.removeEventListener('mousedown', this.boundHandleDocumentClick, true);
+            this.boundHandleDocumentClick = null;
+        }
+    }
+    /**
+     * Handles document click events to detect outside clicks
+     */
+    handleDocumentClick(event) {
+        if (!this.isOpen || !this.closeOnOutsideClick || !this.panelContainer || !this.onCloseCallback) {
+            return;
+        }
+        const target = event.target;
+        // Check if click is outside the panel container
+        if (!this.panelContainer.contains(target) && !this.component.contains(target)) {
+            // Click is outside both the panel and the component itself
+            this.onCloseCallback();
+        }
+    }
+    /**
+     * Cleans up all event handlers
+     */
+    destroy() {
+        this.cleanupOutsideClickHandler();
+        this.panelContainer = null;
+        this.onCloseCallback = null;
+    }
+}
+//# sourceMappingURL=event-manager.js.map

package/dist/src/nile-floating-panel/event-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-manager.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/event-manager.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,OAAO,YAAY;IAQvB,YAAY,SAAsB;QAN1B,mBAAc,GAAuB,IAAI,CAAC;QAC1C,wBAAmB,GAAY,IAAI,CAAC;QACpC,WAAM,GAAY,KAAK,CAAC;QACxB,6BAAwB,GAAyC,IAAI,CAAC;QACtE,oBAAe,GAAwB,IAAI,CAAC;QAGlD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,wBAAwB,CACtB,cAA2B,EAC3B,mBAA4B,EAC5B,MAAe,EACf,OAAmB;QAEnB,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAE/B,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpE,uDAAuD;QACvD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,CAAC;IAC9E,CAAC;IAED;;OAEG;IACH,yBAAyB,CACvB,cAAkC,EAClC,mBAA4B,EAC5B,MAAe;QAEf,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,2BAA2B;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAElC,8BAA8B;QAC9B,IAAI,MAAM,IAAI,mBAAmB,IAAI,cAAc,EAAE,CAAC;YACpD,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,CAAC;QAC9E,CAAC;IACH,CAAC;IAED;;OAEG;IACH,0BAA0B;QACxB,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAClC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,CAAC;YAC/E,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC;QACvC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,KAAiB;QAC3C,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC/F,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAc,CAAC;QAEpC,gDAAgD;QAChD,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9E,2DAA2D;YAC3D,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC9B,CAAC;CACF","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\n/**\n * Manages all event handling for the floating panel\n */\nexport class EventManager {\n  private component: HTMLElement;\n  private panelContainer: HTMLElement | null = null;\n  private closeOnOutsideClick: boolean = true;\n  private isOpen: boolean = false;\n  private boundHandleDocumentClick: ((event: MouseEvent) => void) | null = null;\n  private onCloseCallback: (() => void) | null = null;\n\n  constructor(component: HTMLElement) {\n    this.component = component;\n  }\n\n  /**\n   * Sets up the outside click handler\n   */\n  setupOutsideClickHandler(\n    panelContainer: HTMLElement,\n    closeOnOutsideClick: boolean,\n    isOpen: boolean,\n    onClose: () => void\n  ): void {\n    this.panelContainer = panelContainer;\n    this.closeOnOutsideClick = closeOnOutsideClick;\n    this.isOpen = isOpen;\n    this.onCloseCallback = onClose;\n\n    if (!this.closeOnOutsideClick || this.boundHandleDocumentClick) {\n      return;\n    }\n\n    this.boundHandleDocumentClick = this.handleDocumentClick.bind(this);\n    // Use capture phase to ensure we catch the event early\n    document.addEventListener('mousedown', this.boundHandleDocumentClick, true);\n  }\n\n  /**\n   * Updates the outside click handler configuration\n   */\n  updateOutsideClickHandler(\n    panelContainer: HTMLElement | null,\n    closeOnOutsideClick: boolean,\n    isOpen: boolean\n  ): void {\n    this.panelContainer = panelContainer;\n    this.closeOnOutsideClick = closeOnOutsideClick;\n    this.isOpen = isOpen;\n\n    // Cleanup existing handler\n    this.cleanupOutsideClickHandler();\n\n    // Setup new handler if needed\n    if (isOpen && closeOnOutsideClick && panelContainer) {\n      this.boundHandleDocumentClick = this.handleDocumentClick.bind(this);\n      document.addEventListener('mousedown', this.boundHandleDocumentClick, true);\n    }\n  }\n\n  /**\n   * Cleans up the outside click handler\n   */\n  cleanupOutsideClickHandler(): void {\n    if (this.boundHandleDocumentClick) {\n      document.removeEventListener('mousedown', this.boundHandleDocumentClick, true);\n      this.boundHandleDocumentClick = null;\n    }\n  }\n\n  /**\n   * Handles document click events to detect outside clicks\n   */\n  private handleDocumentClick(event: MouseEvent): void {\n    if (!this.isOpen || !this.closeOnOutsideClick || !this.panelContainer || !this.onCloseCallback) {\n      return;\n    }\n\n    const target = event.target as Node;\n\n    // Check if click is outside the panel container\n    if (!this.panelContainer.contains(target) && !this.component.contains(target)) {\n      // Click is outside both the panel and the component itself\n      this.onCloseCallback();\n    }\n  }\n\n  /**\n   * Cleans up all event handlers\n   */\n  destroy(): void {\n    this.cleanupOutsideClickHandler();\n    this.panelContainer = null;\n    this.onCloseCallback = null;\n  }\n}\n\n"]}

package/dist/src/nile-floating-panel/index.d.ts

@@ -0,0 +1 @@
+export { NileFloatingPanel } from './nile-floating-panel';

package/dist/src/nile-floating-panel/index.js

@@ -0,0 +1,2 @@
+export { NileFloatingPanel } from './nile-floating-panel';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-floating-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { NileFloatingPanel } from './nile-floating-panel';\n\n"]}

package/dist/src/nile-floating-panel/nile-floating-panel.css.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Floating Panel CSS
+ */
+export declare const styles: import("lit").CSSResult;
+/**
+ * Panel container styles - applied to the dynamically appended element
+ * These styles are injected into the document head
+ */
+export declare const panelContainerStyles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-floating-panel/nile-floating-panel.css.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Floating Panel CSS
+ */
+export const styles = css `
+  :host {
+    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));
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  slot {
+    display: none;
+  }
+`;
+/**
+ * Panel container styles - applied to the dynamically appended element
+ * These styles are injected into the document head
+ */
+export const panelContainerStyles = css `
+  .nile-floating-panel__container {
+    box-sizing: border-box;
+    z-index: var(--nile-floating-panel-z-index, 9999);
+    pointer-events: auto;
+    background-color: var(--nile-floating-panel-background, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
+    border: solid 1px var(--nile-floating-panel-border-color, var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt)));
+    border-radius: var(--nile-floating-panel-border-radius, var(--nile-radius-sm, var(--ng-radius-md)));
+    box-shadow: var(--nile-floating-panel-box-shadow, var(--nile-box-shadow-2, var(--ng-shadow-lg)));
+    padding: var(--nile-floating-panel-padding, var(--nile-spacing-xl, var(--ng-spacing-xl)));
+    min-width: var(--nile-floating-panel-min-width, 200px);
+    max-width: var(--nile-floating-panel-max-width, 400px);
+    color: var(--nile-floating-panel-color, var(--nile-colors-dark-900, var(--ng-colors-text-primary-900)));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-floating-panel.css.js.map

package/dist/src/nile-floating-panel/nile-floating-panel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-floating-panel.css.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/nile-floating-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBtC,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 * Floating Panel CSS\n */\nexport const styles = css`\n  :host {\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    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  slot {\n    display: none;\n  }\n`;\n\n/**\n * Panel container styles - applied to the dynamically appended element\n * These styles are injected into the document head\n */\nexport const panelContainerStyles = css`\n  .nile-floating-panel__container {\n    box-sizing: border-box;\n    z-index: var(--nile-floating-panel-z-index, 9999);\n    pointer-events: auto;\n    background-color: var(--nile-floating-panel-background, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n    border: solid 1px var(--nile-floating-panel-border-color, var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt)));\n    border-radius: var(--nile-floating-panel-border-radius, var(--nile-radius-sm, var(--ng-radius-md)));\n    box-shadow: var(--nile-floating-panel-box-shadow, var(--nile-box-shadow-2, var(--ng-shadow-lg)));\n    padding: var(--nile-floating-panel-padding, var(--nile-spacing-xl, var(--ng-spacing-xl)));\n    min-width: var(--nile-floating-panel-min-width, 200px);\n    max-width: var(--nile-floating-panel-max-width, 400px);\n    color: var(--nile-floating-panel-color, var(--nile-colors-dark-900, var(--ng-colors-text-primary-900)));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n  }\n`;\n\nexport default [styles];\n\n"]}

package/dist/src/nile-floating-panel/nile-floating-panel.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+import type { FloatingPanelPosition, FloatingPanelAnchor } from './types';
+/**
+ * Nile floating panel component.
+ *
+ * @tag nile-floating-panel
+ *
+ */
+export declare class NileFloatingPanel extends NileElement {
+    /**
+     * The styles for nile-floating-panel
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * The anchor element where the panel will be appended. Can be an HTMLElement reference
+     * or a string selector. Defaults to document.body.
+     */
+    anchor: FloatingPanelAnchor;
+    /**
+     * The position of the panel relative to the component itself.
+     * Options: 'top', 'bottom', 'left', 'right'
+     */
+    position: FloatingPanelPosition;
+    /**
+     * Controls the visibility of the panel. When true, the panel is appended to the anchor
+     * and positioned relative to the component itself.
+     */
+    open: boolean;
+    /**
+     * Optional content provided via data attribute. Used when no slot content is provided.
+     */
+    dataContent: string;
+    /**
+     * Controls whether the panel closes when clicking outside of it.
+     * When true (default), clicking outside the panel will close it.
+     */
+    closeOnOutsideClick: boolean;
+    private panelContainer;
+    private positionManager;
+    private styleManager;
+    private eventManager;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private setupPanel;
+    private setupEventHandlers;
+    private setupPositionManager;
+    private updatePanelContent;
+    private reposition;
+    private cleanupPanel;
+    render(): TemplateResult;
+    private handleSlotChange;
+}
+export default NileFloatingPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-floating-panel': NileFloatingPanel;
+    }
+}

package/dist/src/nile-floating-panel/nile-floating-panel.js

@@ -0,0 +1,203 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var NileFloatingPanel_1;
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-floating-panel.css';
+import NileElement from '../internal/nile-element';
+import { PositionManager } from './position-manager';
+import { StyleManager } from './style-manager';
+import { ContentManager } from './content-manager';
+import { AnchorManager } from './anchor-manager';
+import { EventManager } from './event-manager';
+/**
+ * Nile floating panel component.
+ *
+ * @tag nile-floating-panel
+ *
+ */
+let NileFloatingPanel = NileFloatingPanel_1 = class NileFloatingPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The anchor element where the panel will be appended. Can be an HTMLElement reference
+         * or a string selector. Defaults to document.body.
+         */
+        this.anchor = null;
+        /**
+         * The position of the panel relative to the component itself.
+         * Options: 'top', 'bottom', 'left', 'right'
+         */
+        this.position = 'bottom';
+        /**
+         * Controls the visibility of the panel. When true, the panel is appended to the anchor
+         * and positioned relative to the component itself.
+         */
+        this.open = false;
+        /**
+         * Optional content provided via data attribute. Used when no slot content is provided.
+         */
+        this.dataContent = '';
+        /**
+         * Controls whether the panel closes when clicking outside of it.
+         * When true (default), clicking outside the panel will close it.
+         */
+        this.closeOnOutsideClick = true;
+        this.panelContainer = null;
+        this.positionManager = null;
+        this.styleManager = new StyleManager();
+        this.eventManager = new EventManager(this);
+        this.handleSlotChange = () => {
+            // Update panel content when slot content changes
+            if (this.open && this.panelContainer) {
+                this.updatePanelContent();
+            }
+        };
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-floating-panel
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupPanel();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this.setupPanel();
+            }
+            else {
+                this.cleanupPanel();
+            }
+        }
+        if (changedProperties.has('closeOnOutsideClick') && this.open && this.panelContainer) {
+            this.eventManager.updateOutsideClickHandler(this.panelContainer, this.closeOnOutsideClick, this.open);
+        }
+        if (changedProperties.has('anchor') && this.open) {
+            this.cleanupPanel();
+            this.setupPanel();
+        }
+        if (changedProperties.has('position') && this.open && this.positionManager) {
+            this.positionManager.updatePosition(this.position);
+        }
+        if ((changedProperties.has('dataContent') || changedProperties.has('open')) && this.open && this.panelContainer) {
+            this.updatePanelContent();
+        }
+    }
+    setupPanel() {
+        if (this.panelContainer) {
+            return; // Already set up
+        }
+        // Inject styles if not already injected
+        const componentStyles = this.constructor.styles;
+        if (componentStyles) {
+            this.styleManager.injectStyles(componentStyles);
+        }
+        // Create panel container
+        this.panelContainer = document.createElement('div');
+        this.panelContainer.setAttribute('part', 'panel');
+        this.panelContainer.className = 'nile-floating-panel__container';
+        // Update content
+        this.updatePanelContent();
+        // Append to anchor
+        const anchorElement = AnchorManager.resolveAnchor(this.anchor);
+        AnchorManager.appendToAnchor(anchorElement, this.panelContainer);
+        // Wait for next frame to ensure DOM is ready
+        requestAnimationFrame(() => {
+            this.setupPositionManager();
+            this.setupEventHandlers();
+        });
+    }
+    setupEventHandlers() {
+        if (!this.panelContainer) {
+            return;
+        }
+        // Setup outside click handler
+        this.eventManager.setupOutsideClickHandler(this.panelContainer, this.closeOnOutsideClick, this.open, () => {
+            this.open = false;
+        });
+    }
+    setupPositionManager() {
+        if (!this.panelContainer) {
+            return;
+        }
+        // Create position manager
+        this.positionManager = new PositionManager(this, this.panelContainer, this.position);
+        // Initial positioning
+        this.positionManager.reposition();
+        // Setup auto-update
+        this.positionManager.setupAutoUpdate();
+    }
+    updatePanelContent() {
+        if (!this.panelContainer) {
+            return;
+        }
+        const slot = this.shadowRoot?.querySelector('slot') || null;
+        ContentManager.updatePanelContent(this.panelContainer, slot, this.dataContent);
+    }
+    reposition() {
+        if (this.positionManager) {
+            this.positionManager.reposition();
+        }
+    }
+    cleanupPanel() {
+        // Cleanup event handlers
+        this.eventManager.destroy();
+        // Cleanup position manager
+        if (this.positionManager) {
+            this.positionManager.destroy();
+            this.positionManager = null;
+        }
+        // Remove panel from anchor
+        if (this.panelContainer) {
+            AnchorManager.removeFromAnchor(this.panelContainer);
+        }
+        this.panelContainer = null;
+        // Clean up styles (optional - styles are shared across instances)
+        this.styleManager.cleanupStyles();
+    }
+    render() {
+        // Component itself doesn't render visible content
+        // The panel is created and appended to anchor when open
+        return html `
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+    }
+};
+__decorate([
+    property()
+], NileFloatingPanel.prototype, "anchor", void 0);
+__decorate([
+    property()
+], NileFloatingPanel.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileFloatingPanel.prototype, "open", void 0);
+__decorate([
+    property({ attribute: 'data-content', type: String })
+], NileFloatingPanel.prototype, "dataContent", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'close-on-outside-click' })
+], NileFloatingPanel.prototype, "closeOnOutsideClick", void 0);
+NileFloatingPanel = NileFloatingPanel_1 = __decorate([
+    customElement('nile-floating-panel')
+], NileFloatingPanel);
+export { NileFloatingPanel };
+export default NileFloatingPanel;
+//# sourceMappingURL=nile-floating-panel.js.map

package/dist/src/nile-floating-panel/nile-floating-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-floating-panel.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/nile-floating-panel.ts"],"names":[],"mappings":"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","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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-floating-panel.css';\nimport NileElement from '../internal/nile-element';\nimport { PositionManager } from './position-manager';\nimport { StyleManager } from './style-manager';\nimport { ContentManager } from './content-manager';\nimport { AnchorManager } from './anchor-manager';\nimport { EventManager } from './event-manager';\nimport type { FloatingPanelPosition, FloatingPanelAnchor } from './types';\n\n/**\n * Nile floating panel component.\n *\n * @tag nile-floating-panel\n *\n */\n@customElement('nile-floating-panel')\nexport class NileFloatingPanel extends NileElement {\n  /**\n   * The styles for nile-floating-panel\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /**\n   * The anchor element where the panel will be appended. Can be an HTMLElement reference\n   * or a string selector. Defaults to document.body.\n   */\n  @property() anchor: FloatingPanelAnchor = null;\n\n  /**\n   * The position of the panel relative to the component itself.\n   * Options: 'top', 'bottom', 'left', 'right'\n   */\n  @property() position: FloatingPanelPosition = 'bottom';\n\n  /**\n   * Controls the visibility of the panel. When true, the panel is appended to the anchor\n   * and positioned relative to the component itself.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Optional content provided via data attribute. Used when no slot content is provided.\n   */\n  @property({ attribute: 'data-content', type: String }) dataContent = '';\n\n  /**\n   * Controls whether the panel closes when clicking outside of it.\n   * When true (default), clicking outside the panel will close it.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'close-on-outside-click' }) \n  closeOnOutsideClick = true;\n\n  private panelContainer: HTMLElement | null = null;\n  private positionManager: PositionManager | null = null;\n  private styleManager: StyleManager = new StyleManager();\n  private eventManager: EventManager = new EventManager(this);\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupPanel();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.setupPanel();\n      } else {\n        this.cleanupPanel();\n      }\n    }\n\n    if (changedProperties.has('closeOnOutsideClick') && this.open && this.panelContainer) {\n      this.eventManager.updateOutsideClickHandler(\n        this.panelContainer,\n        this.closeOnOutsideClick,\n        this.open\n      );\n    }\n\n    if (changedProperties.has('anchor') && this.open) {\n      this.cleanupPanel();\n      this.setupPanel();\n    }\n\n    if (changedProperties.has('position') && this.open && this.positionManager) {\n      this.positionManager.updatePosition(this.position);\n    }\n\n    if ((changedProperties.has('dataContent') || changedProperties.has('open')) && this.open && this.panelContainer) {\n      this.updatePanelContent();\n    }\n  }\n\n  private setupPanel() {\n    if (this.panelContainer) {\n      return; // Already set up\n    }\n\n    // Inject styles if not already injected\n    const componentStyles = (this.constructor as typeof NileFloatingPanel).styles;\n    if (componentStyles) {\n      this.styleManager.injectStyles(componentStyles);\n    }\n\n    // Create panel container\n    this.panelContainer = document.createElement('div');\n    this.panelContainer.setAttribute('part', 'panel');\n    this.panelContainer.className = 'nile-floating-panel__container';\n\n    // Update content\n    this.updatePanelContent();\n\n    // Append to anchor\n    const anchorElement = AnchorManager.resolveAnchor(this.anchor);\n    AnchorManager.appendToAnchor(anchorElement, this.panelContainer);\n\n    // Wait for next frame to ensure DOM is ready\n    requestAnimationFrame(() => {\n      this.setupPositionManager();\n      this.setupEventHandlers();\n    });\n  }\n\n  private setupEventHandlers() {\n    if (!this.panelContainer) {\n      return;\n    }\n\n    // Setup outside click handler\n    this.eventManager.setupOutsideClickHandler(\n      this.panelContainer,\n      this.closeOnOutsideClick,\n      this.open,\n      () => {\n        this.open = false;\n      }\n    );\n  }\n\n  private setupPositionManager() {\n    if (!this.panelContainer) {\n      return;\n    }\n\n    // Create position manager\n    this.positionManager = new PositionManager(\n      this,\n      this.panelContainer,\n      this.position\n    );\n\n    // Initial positioning\n    this.positionManager.reposition();\n\n    // Setup auto-update\n    this.positionManager.setupAutoUpdate();\n  }\n\n  private updatePanelContent() {\n    if (!this.panelContainer) {\n      return;\n    }\n\n    const slot = this.shadowRoot?.querySelector('slot') || null;\n    ContentManager.updatePanelContent(\n      this.panelContainer,\n      slot,\n      this.dataContent\n    );\n  }\n\n  private reposition() {\n    if (this.positionManager) {\n      this.positionManager.reposition();\n    }\n  }\n\n  private cleanupPanel() {\n    // Cleanup event handlers\n    this.eventManager.destroy();\n\n    // Cleanup position manager\n    if (this.positionManager) {\n      this.positionManager.destroy();\n      this.positionManager = null;\n    }\n\n    // Remove panel from anchor\n    if (this.panelContainer) {\n      AnchorManager.removeFromAnchor(this.panelContainer);\n    }\n\n    this.panelContainer = null;\n\n    // Clean up styles (optional - styles are shared across instances)\n    this.styleManager.cleanupStyles();\n  }\n\n  public render(): TemplateResult {\n    // Component itself doesn't render visible content\n    // The panel is created and appended to anchor when open\n    return html`\n      <slot @slotchange=${this.handleSlotChange}></slot>\n    `;\n  }\n\n  private handleSlotChange = () => {\n    // Update panel content when slot content changes\n    if (this.open && this.panelContainer) {\n      this.updatePanelContent();\n    }\n  };\n\n  /* #endregion */\n}\n\nexport default NileFloatingPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-floating-panel': NileFloatingPanel;\n  }\n}\n\n"]}

package/dist/src/nile-floating-panel/position-manager.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { FloatingPanelPosition } from './types';
+/**
+ * Manages positioning of the floating panel using floating-ui
+ */
+export declare class PositionManager {
+    private cleanup;
+    private referenceElement;
+    private floatingElement;
+    private position;
+    private offsetValue;
+    private shiftPadding;
+    constructor(referenceElement: HTMLElement, floatingElement: HTMLElement, position: FloatingPanelPosition, offsetValue?: number, shiftPadding?: number);
+    /**
+     * Sets up automatic position updates
+     */
+    setupAutoUpdate(): void;
+    /**
+     * Cleans up automatic position updates
+     */
+    cleanupAutoUpdate(): void;
+    /**
+     * Repositions the floating element relative to the reference element
+     */
+    reposition(): void;
+    /**
+     * Updates the position configuration
+     */
+    updatePosition(position: FloatingPanelPosition): void;
+    /**
+     * Updates the offset value
+     */
+    updateOffset(offset: number): void;
+    /**
+     * Updates the shift padding
+     */
+    updateShiftPadding(padding: number): void;
+    /**
+     * Cleans up all resources
+     */
+    destroy(): void;
+}

package/dist/src/nile-floating-panel/position-manager.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { autoUpdate, computePosition, offset, shift } from '@floating-ui/dom';
+/**
+ * Manages positioning of the floating panel using floating-ui
+ */
+export class PositionManager {
+    constructor(referenceElement, floatingElement, position, offsetValue = 8, shiftPadding = 8) {
+        this.cleanup = null;
+        this.referenceElement = referenceElement;
+        this.floatingElement = floatingElement;
+        this.position = position;
+        this.offsetValue = offsetValue;
+        this.shiftPadding = shiftPadding;
+    }
+    /**
+     * Sets up automatic position updates
+     */
+    setupAutoUpdate() {
+        this.cleanupAutoUpdate();
+        this.cleanup = autoUpdate(this.referenceElement, this.floatingElement, () => {
+            this.reposition();
+        }, {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: true,
+            layoutShift: true,
+            animationFrame: false,
+        });
+    }
+    /**
+     * Cleans up automatic position updates
+     */
+    cleanupAutoUpdate() {
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = null;
+        }
+    }
+    /**
+     * Repositions the floating element relative to the reference element
+     */
+    reposition() {
+        const placement = this.position;
+        computePosition(this.referenceElement, this.floatingElement, {
+            placement,
+            strategy: 'fixed',
+            middleware: [
+                offset(this.offsetValue),
+                shift({
+                    padding: this.shiftPadding,
+                }),
+            ],
+        }).then(({ x, y }) => {
+            Object.assign(this.floatingElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                position: 'fixed',
+            });
+        });
+    }
+    /**
+     * Updates the position configuration
+     */
+    updatePosition(position) {
+        this.position = position;
+        this.reposition();
+    }
+    /**
+     * Updates the offset value
+     */
+    updateOffset(offset) {
+        this.offsetValue = offset;
+        this.reposition();
+    }
+    /**
+     * Updates the shift padding
+     */
+    updateShiftPadding(padding) {
+        this.shiftPadding = padding;
+        this.reposition();
+    }
+    /**
+     * Cleans up all resources
+     */
+    destroy() {
+        this.cleanupAutoUpdate();
+    }
+}
+//# sourceMappingURL=position-manager.js.map

package/dist/src/nile-floating-panel/position-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-manager.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/position-manager.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI9E;;GAEG;AACH,MAAM,OAAO,eAAe;IAQ1B,YACE,gBAA6B,EAC7B,eAA4B,EAC5B,QAA+B,EAC/B,cAAsB,CAAC,EACvB,eAAuB,CAAC;QAZlB,YAAO,GAAwB,IAAI,CAAC;QAc1C,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED;;OAEG;IACH,eAAe;QACb,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,IAAI,CAAC,OAAO,GAAG,UAAU,CACvB,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,eAAe,EACpB,GAAG,EAAE;YACH,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,EACD;YACE,cAAc,EAAE,IAAI;YACpB,cAAc,EAAE,IAAI;YACpB,aAAa,EAAE,IAAI;YACnB,WAAW,EAAE,IAAI;YACjB,cAAc,EAAE,KAAK;SACtB,CACF,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC;IAED;;OAEG;IACH,UAAU;QACR,MAAM,SAAS,GAAc,IAAI,CAAC,QAAQ,CAAC;QAE3C,eAAe,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,eAAe,EAAE;YAC3D,SAAS;YACT,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE;gBACV,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;gBACxB,KAAK,CAAC;oBACJ,OAAO,EAAE,IAAI,CAAC,YAAY;iBAC3B,CAAC;aACH;SACF,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;YACnB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;gBACxC,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,GAAG,EAAE,GAAG,CAAC,IAAI;gBACb,QAAQ,EAAE,OAAO;aAClB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,QAA+B;QAC5C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;OAEG;IACH,YAAY,CAAC,MAAc;QACzB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;OAEG;IACH,kBAAkB,CAAC,OAAe;QAChC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;CACF","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 { autoUpdate, computePosition, offset, shift } from '@floating-ui/dom';\nimport type { Placement } from '@floating-ui/dom';\nimport type { FloatingPanelPosition } from './types';\n\n/**\n * Manages positioning of the floating panel using floating-ui\n */\nexport class PositionManager {\n  private cleanup: (() => void) | null = null;\n  private referenceElement: HTMLElement;\n  private floatingElement: HTMLElement;\n  private position: FloatingPanelPosition;\n  private offsetValue: number;\n  private shiftPadding: number;\n\n  constructor(\n    referenceElement: HTMLElement,\n    floatingElement: HTMLElement,\n    position: FloatingPanelPosition,\n    offsetValue: number = 8,\n    shiftPadding: number = 8\n  ) {\n    this.referenceElement = referenceElement;\n    this.floatingElement = floatingElement;\n    this.position = position;\n    this.offsetValue = offsetValue;\n    this.shiftPadding = shiftPadding;\n  }\n\n  /**\n   * Sets up automatic position updates\n   */\n  setupAutoUpdate(): void {\n    this.cleanupAutoUpdate();\n\n    this.cleanup = autoUpdate(\n      this.referenceElement,\n      this.floatingElement,\n      () => {\n        this.reposition();\n      },\n      {\n        ancestorScroll: true,\n        ancestorResize: true,\n        elementResize: true,\n        layoutShift: true,\n        animationFrame: false,\n      }\n    );\n  }\n\n  /**\n   * Cleans up automatic position updates\n   */\n  cleanupAutoUpdate(): void {\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n  }\n\n  /**\n   * Repositions the floating element relative to the reference element\n   */\n  reposition(): void {\n    const placement: Placement = this.position;\n\n    computePosition(this.referenceElement, this.floatingElement, {\n      placement,\n      strategy: 'fixed',\n      middleware: [\n        offset(this.offsetValue),\n        shift({\n          padding: this.shiftPadding,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      Object.assign(this.floatingElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n        position: 'fixed',\n      });\n    });\n  }\n\n  /**\n   * Updates the position configuration\n   */\n  updatePosition(position: FloatingPanelPosition): void {\n    this.position = position;\n    this.reposition();\n  }\n\n  /**\n   * Updates the offset value\n   */\n  updateOffset(offset: number): void {\n    this.offsetValue = offset;\n    this.reposition();\n  }\n\n  /**\n   * Updates the shift padding\n   */\n  updateShiftPadding(padding: number): void {\n    this.shiftPadding = padding;\n    this.reposition();\n  }\n\n  /**\n   * Cleans up all resources\n   */\n  destroy(): void {\n    this.cleanupAutoUpdate();\n  }\n}\n\n"]}

package/dist/src/nile-floating-panel/style-manager.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { CSSResultArray } from 'lit';
+/**
+ * Manages style injection for the floating panel
+ */
+export declare class StyleManager {
+    private injectedStyleId;
+    private static injectedStyleIds;
+    /**
+     * Injects styles into the document head
+     */
+    injectStyles(componentStyles: CSSResultArray): void;
+    /**
+     * Extracts CSS text from CSSResultArray
+     */
+    private extractCSSFromStyles;
+    /**
+     * Cleans up injected styles (only if this is the last instance)
+     * Note: In production, you might want a shared style manager
+     */
+    cleanupStyles(): void;
+    /**
+     * Gets the injected style ID
+     */
+    getInjectedStyleId(): string | null;
+}