@smilodon/core 1.0.13 → 1.0.15

package/dist/index.cjs

@@ -962,11 +962,6 @@ class EnhancedSelect extends HTMLElement {
         this._errorMessage = '';
         this._boundArrowClick = null;
         console.log('[EnhancedSelect] Constructor called');
-        // WORKAROUND: Force display style on host element for Angular compatibility
-        // Angular's rendering seems to not apply :host styles correctly in some cases
-        this.style.display = 'block';
-        this.style.width = '100%';
-        console.log('[EnhancedSelect] Forced host display styles');
         this._shadow = this.attachShadow({ mode: 'open' });
         console.log('[EnhancedSelect] Shadow root attached:', this._shadow);
         this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
@@ -1008,10 +1003,11 @@ class EnhancedSelect extends HTMLElement {
         console.log('[EnhancedSelect] Options container created');
         this._liveRegion = this._createLiveRegion();
         console.log('[EnhancedSelect] Live region created');
-        this._assembleDOM();
-        console.log('[EnhancedSelect] DOM assembled');
+        // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
         this._initializeStyles();
         console.log('[EnhancedSelect] Styles initialized');
+        this._assembleDOM();
+        console.log('[EnhancedSelect] DOM assembled');
         this._attachEventListeners();
         console.log('[EnhancedSelect] Event listeners attached');
         this._initializeObservers();
@@ -1020,6 +1016,12 @@ class EnhancedSelect extends HTMLElement {
     }
     connectedCallback() {
         console.log('[EnhancedSelect] connectedCallback called');
+        // WORKAROUND: Force display style on host element for Angular compatibility
+        // Angular's rendering seems to not apply :host styles correctly in some cases
+        // Must be done in connectedCallback when element is attached to DOM
+        this.style.display = 'block';
+        this.style.width = '100%';
+        console.log('[EnhancedSelect] Forced host display styles');
         // Load initial data if server-side is enabled
         if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
             this._loadInitialSelectedItems();