@melodicdev/components 1.0.7 → 1.0.9

package/lib/components/forms/select/select.component.d.ts

@@ -64,8 +64,10 @@ export declare class SelectComponent implements IElementRef, OnCreate, OnDestroy
     /** Currently focused option index for keyboard navigation */
     focusedIndex: number;
     /** Bound event handlers for cleanup */
-    private readonly _handleDocumentClick;
     private readonly _handleKeyDown;
+    private readonly _handlePopoverToggle;
+    private _handleScroll;
+    private _lastCloseTime;
     private _syncingValues;
     onCreate(): void;
     onDestroy(): void;
@@ -93,8 +95,14 @@ export declare class SelectComponent implements IElementRef, OnCreate, OnDestroy
     handleTagRemove: (event: Event, value: string) => void;
     handleSearchInput: (event: Event) => void;
     handleSearchClick: (event: Event) => void;
-    /** Handle clicks outside to close dropdown */
-    private onDocumentClick;
+    /** Handle popover toggle events (open/close via Popover API) */
+    private onPopoverToggle;
+    /** Position the dropdown relative to the trigger using fixed positioning */
+    private positionDropdown;
+    /** Close dropdown when any ancestor scrolls */
+    private addScrollListener;
+    private removeScrollListener;
+    private getDropdownEl;
     /** Handle keyboard navigation */
     private onKeyDown;
     /** Move focus to next enabled option */

package/lib/components/forms/select/select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAMa,eAAgB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACvE,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,KAAK,SAAM;IAEX,yCAAyC;IACzC,WAAW,SAAsB;IAEjC,mCAAmC;IACnC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,kBAAkB;IAClB,IAAI,EAAE,IAAI,CAAQ;IAElB,yBAAyB;IACzB,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,+BAA+B;IAC/B,QAAQ,UAAS;IAEjB,+BAA+B;IAC/B,KAAK,SAAM;IAEX,+CAA+C;IAC/C,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtB,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAM;IAE7B,wCAAwC;IACxC,MAAM,SAAM;IAEZ,+BAA+B;IAC/B,MAAM,UAAS;IAEf,6DAA6D;IAC7D,YAAY,SAAM;IAElB,uCAAuC;IACvC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAmC;IACxE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA6B;IAC5D,OAAO,CAAC,cAAc,CAAS;IAE/B,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKjB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAsDpC,wCAAwC;IACxC,IAAI,cAAc,IAAI,YAAY,GAAG,SAAS,CAE7C;IAED,wDAAwD;IACxD,IAAI,eAAe,IAAI,YAAY,EAAE,CAMpC;IAED,mCAAmC;IACnC,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,IAAI,eAAe,IAAI,YAAY,EAAE,CASpC;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,iCAAiC;IACjC,MAAM,QAAO,IAAI,CAgBf;IAEF,wBAAwB;IACxB,IAAI,QAAO,IAAI,CAYb;IAEF,yBAAyB;IACzB,KAAK,QAAO,IAAI,CAad;IAEF,uBAAuB;IACvB,YAAY,GAAI,QAAQ,YAAY,KAAG,IAAI,CAkBzC;IAEF,0CAA0C;IAC1C,OAAO,CAAC,YAAY;IAapB,6BAA6B;IAC7B,iBAAiB,GAAI,OAAO,KAAK,EAAE,QAAQ,YAAY,KAAG,IAAI,CAG5D;IAEF,eAAe,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,IAAI,CAYnD;IAEF,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAQtC;IAEF,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAKtC;IAEF,8CAA8C;IAC9C,OAAO,CAAC,eAAe;IAOvB,iCAAiC;IACjC,OAAO,CAAC,SAAS;IAiEjB,wCAAwC;IACxC,OAAO,CAAC,eAAe;IAcvB,4CAA4C;IAC5C,OAAO,CAAC,mBAAmB;IAc3B,sCAAsC;IACtC,OAAO,CAAC,qBAAqB;IAI7B,qCAAqC;IACrC,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;CAOtB"}
+{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.component.ts"],"names":[],"mappings":"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"}

package/lib/components/forms/select/select.component.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { computePosition, offset, flip, shift } from '../../../utils/positioning/index.js';
 import { selectTemplate } from './select.template.js';
 import { selectStyles } from './select.styles.js';
 /**
@@ -70,8 +71,10 @@ let SelectComponent = class SelectComponent {
         /** Currently focused option index for keyboard navigation */
         this.focusedIndex = -1;
         /** Bound event handlers for cleanup */
-        this._handleDocumentClick = this.onDocumentClick.bind(this);
         this._handleKeyDown = this.onKeyDown.bind(this);
+        this._handlePopoverToggle = this.onPopoverToggle.bind(this);
+        this._handleScroll = null;
+        this._lastCloseTime = 0;
         this._syncingValues = false;
         /** Toggle dropdown open/close */
         this.toggle = () => {
@@ -85,32 +88,22 @@ let SelectComponent = class SelectComponent {
             }
             if (this.isOpen) {
                 this.close();
-                return;
             }
-            this.open();
+            else if (Date.now() - this._lastCloseTime > 150) {
+                this.open();
+            }
         };
         /** Open the dropdown */
         this.open = () => {
             if (this.disabled || this.isOpen)
                 return;
-            this.isOpen = true;
-            this.focusedIndex = this.getInitialFocusIndex();
-            this.elementRef.dispatchEvent(new CustomEvent('ml:open', {
-                bubbles: true,
-                composed: true
-            }));
+            this.getDropdownEl()?.showPopover();
         };
         /** Close the dropdown */
         this.close = () => {
             if (!this.isOpen)
                 return;
-            this.isOpen = false;
-            this.focusedIndex = -1;
-            this.search = '';
-            this.elementRef.dispatchEvent(new CustomEvent('ml:close', {
-                bubbles: true,
-                composed: true
-            }));
+            this.getDropdownEl()?.hidePopover();
         };
         /** Select an option */
         this.selectOption = (option) => {
@@ -162,12 +155,13 @@ let SelectComponent = class SelectComponent {
         };
     }
     onCreate() {
-        document.addEventListener('click', this._handleDocumentClick);
         this.elementRef.addEventListener('keydown', this._handleKeyDown);
+        this.getDropdownEl()?.addEventListener('toggle', this._handlePopoverToggle);
     }
     onDestroy() {
-        document.removeEventListener('click', this._handleDocumentClick);
         this.elementRef.removeEventListener('keydown', this._handleKeyDown);
+        this.removeScrollListener();
+        this.getDropdownEl()?.removeEventListener('toggle', this._handlePopoverToggle);
     }
     onPropertyChange(name) {
         if (this._syncingValues) {
@@ -259,13 +253,58 @@ let SelectComponent = class SelectComponent {
             detail: { values: [...this.values], options: this.selectedOptions, option }
         }));
     }
-    /** Handle clicks outside to close dropdown */
-    onDocumentClick(event) {
-        const path = event.composedPath();
-        if (!path.includes(this.elementRef)) {
+    /** Handle popover toggle events (open/close via Popover API) */
+    onPopoverToggle(event) {
+        const toggleEvent = event;
+        if (toggleEvent.newState === 'open') {
+            this.isOpen = true;
+            this.focusedIndex = this.getInitialFocusIndex();
+            this.positionDropdown();
+            this.addScrollListener();
+            this.elementRef.dispatchEvent(new CustomEvent('ml:open', { bubbles: true, composed: true }));
+        }
+        else {
+            this.isOpen = false;
+            this.focusedIndex = -1;
+            this.search = '';
+            this._lastCloseTime = Date.now();
+            this.removeScrollListener();
+            this.elementRef.dispatchEvent(new CustomEvent('ml:close', { bubbles: true, composed: true }));
+        }
+    }
+    /** Position the dropdown relative to the trigger using fixed positioning */
+    positionDropdown() {
+        const triggerEl = this.elementRef.shadowRoot?.querySelector('.ml-select__trigger');
+        const dropdownEl = this.getDropdownEl();
+        if (!triggerEl || !dropdownEl)
+            return;
+        dropdownEl.style.width = `${triggerEl.offsetWidth}px`;
+        const { x, y } = computePosition(triggerEl, dropdownEl, {
+            placement: 'bottom-start',
+            middleware: [offset(4), flip(), shift({ padding: 8 })]
+        });
+        dropdownEl.style.left = `${x}px`;
+        dropdownEl.style.top = `${y}px`;
+    }
+    /** Close dropdown when any ancestor scrolls */
+    addScrollListener() {
+        this._handleScroll = (event) => {
+            const dropdownEl = this.getDropdownEl();
+            if (dropdownEl?.contains(event.target))
+                return;
             this.close();
+        };
+        window.addEventListener('scroll', this._handleScroll, true);
+    }
+    removeScrollListener() {
+        if (this._handleScroll) {
+            window.removeEventListener('scroll', this._handleScroll, true);
+            this._handleScroll = null;
         }
     }
+    getDropdownEl() {
+        return this.elementRef.shadowRoot?.querySelector('.ml-select__dropdown');
+    }
     /** Handle keyboard navigation */
     onKeyDown(event) {
         if (this.disabled)

package/lib/components/forms/select/select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAgWxB,CAAC"}
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA0VxB,CAAC"}

package/lib/components/forms/select/select.styles.js

@@ -25,10 +25,6 @@ export const selectStyles = () => css `
 		max-width: 100%;
 	}
 
-	.ml-select--open .ml-select__control {
-		z-index: 100;
-	}
-
 	.ml-select__label {
 		font-size: var(--ml-text-sm);
 		font-weight: var(--ml-font-medium);
@@ -216,12 +212,10 @@ export const selectStyles = () => css `
 	}
 
 	.ml-select__dropdown {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		right: 0;
+		position: fixed;
+		inset: unset;
+		margin: 0;
 		z-index: 50;
-		margin-top: var(--ml-space-1);
 		background-color: var(--ml-color-surface);
 		border: var(--ml-border) solid var(--ml-color-border);
 		border-radius: var(--ml-radius);
@@ -229,13 +223,13 @@ export const selectStyles = () => css `
 		max-height: 280px;
 		overflow-y: auto;
 		padding: var(--ml-space-1-5);
-		display: none;
+		display: flex;
 		flex-direction: column;
 		gap: var(--ml-space-1);
 	}
 
-	.ml-select__dropdown--open {
-		display: flex;
+	.ml-select__dropdown:not(:popover-open) {
+		display: none;
 	}
 
 	.ml-select__empty {

package/lib/components/forms/select/select.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7D,wBAAgB,cAAc,CAAC,CAAC,EAAE,eAAe,6CAoEhD"}
+{"version":3,"file":"select.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7D,wBAAgB,cAAc,CAAC,CAAC,EAAE,eAAe,6CAkEhD"}

package/lib/components/forms/select/select.template.js

@@ -36,11 +36,9 @@ export function selectTemplate(c) {
 				</div>
 
 				<div
-					class=${classMap({
-        'ml-select__dropdown': true,
-        'ml-select__dropdown--open': c.isOpen
-    })}
+					class="ml-select__dropdown"
 					role="listbox"
+					popover="auto"
 					aria-multiselectable=${c.multiple || false}
 				>
 					${c.filteredOptions.length

package/lib/components/overlays/dialog/dialog.component.d.ts

@@ -1,11 +1,14 @@
-import type { OnCreate, OnDestroy, IElementRef } from '@melodicdev/core';
-export declare class DialogComponent implements IElementRef, OnCreate, OnDestroy {
+import type { OnCreate, OnDestroy, OnRender, IElementRef } from '@melodicdev/core';
+export declare class DialogComponent implements IElementRef, OnCreate, OnDestroy, OnRender {
     elementRef: HTMLElement;
     private readonly _dialogService;
     private _dialogID;
     private _dialogEl;
     private _dialogRef;
+    private _registered;
     onCreate(): void;
+    onRender(): void;
+    private registerDialog;
     onDestroy(): void;
     open(): void;
     close<T = unknown>(result?: T): void;

package/lib/components/overlays/dialog/dialog.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.component.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKzE,qBAMa,eAAgB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAChE,UAAU,EAAG,WAAW,CAAC;IAGhC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEhD,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,UAAU,CAAa;IAE/B,QAAQ,IAAI,IAAI;IAQhB,SAAS,IAAI,IAAI;IAIjB,IAAI,IAAI,IAAI;IAIZ,KAAK,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI;IAIpC,OAAO,CAAC,cAAc;CAQtB"}
+{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.component.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKnF,qBAMa,eAAgB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAC1E,UAAU,EAAG,WAAW,CAAC;IAGhC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEhD,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAS;IAE5B,QAAQ,IAAI,IAAI;IAIhB,QAAQ,IAAI,IAAI;IAIhB,OAAO,CAAC,cAAc;IAatB,SAAS,IAAI,IAAI;IAIjB,IAAI,IAAI,IAAI;IAIZ,KAAK,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI;IAIpC,OAAO,CAAC,cAAc;CAQtB"}

package/lib/components/overlays/dialog/dialog.component.js

@@ -15,12 +15,25 @@ import { DialogService } from './dialog.service';
 let DialogComponent = class DialogComponent {
     constructor() {
         this._dialogID = newID();
+        this._registered = false;
     }
     onCreate() {
-        this._dialogEl = this.elementRef.shadowRoot?.querySelector('dialog');
+        this.registerDialog();
+    }
+    onRender() {
+        this.registerDialog();
+    }
+    registerDialog() {
+        if (this._registered)
+            return;
+        const dialogEl = this.elementRef.shadowRoot?.querySelector('dialog');
+        if (!dialogEl)
+            return;
+        this._dialogEl = dialogEl;
         this._dialogID = this.createDialogID();
         this._dialogEl.id = this._dialogID;
         this._dialogRef = this._dialogService.addDialog(this._dialogID, this._dialogEl);
+        this._registered = true;
     }
     onDestroy() {
         this._dialogService.removeDialog(this._dialogID);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.0.7",
+	"version": "1.0.9",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",