@smilodon/core 1.4.1 → 1.4.2

package/dist/index.umd.js

@@ -1833,6 +1833,9 @@
             this._pendingSearchRenderMark = false;
             this._rangeAnchorIndex = null;
             this._customOptionBoundElements = new WeakSet();
+            this._mirrorGlobalStylesForCustomOptions = false;
+            this._globalStylesObserver = null;
+            this._globalStylesContainer = null;
             this._shadow = this.attachShadow({ mode: 'open' });
             this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
             this._rendererHelpers = this._buildRendererHelpers();
@@ -1877,6 +1880,9 @@
             // Must be done in connectedCallback when element is attached to DOM
             this.style.display = 'block';
             this.style.width = '100%';
+            if (this._optionRenderer) {
+                this._setGlobalStylesMirroring(true);
+            }
             // Load initial data if server-side is enabled
             if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
                 this._loadInitialSelectedItems();
@@ -1900,6 +1906,92 @@
             if (this._boundArrowClick && this._arrowContainer) {
                 this._arrowContainer.removeEventListener('click', this._boundArrowClick);
             }
+            this._teardownGlobalStylesMirroring();
+        }
+        _setGlobalStylesMirroring(enabled) {
+            if (this._mirrorGlobalStylesForCustomOptions === enabled) {
+                if (enabled) {
+                    this._mirrorDocumentStylesIntoShadow();
+                }
+                return;
+            }
+            this._mirrorGlobalStylesForCustomOptions = enabled;
+            if (enabled) {
+                this._setupGlobalStylesMirroring();
+            }
+            else {
+                this._teardownGlobalStylesMirroring();
+            }
+        }
+        _setupGlobalStylesMirroring() {
+            if (typeof document === 'undefined')
+                return;
+            if (!this._mirrorGlobalStylesForCustomOptions)
+                return;
+            this._mirrorDocumentStylesIntoShadow();
+            if (this._globalStylesObserver)
+                return;
+            this._globalStylesObserver = new MutationObserver(() => {
+                this._mirrorDocumentStylesIntoShadow();
+            });
+            this._globalStylesObserver.observe(document.head, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                characterData: true,
+            });
+        }
+        _teardownGlobalStylesMirroring() {
+            if (this._globalStylesObserver) {
+                this._globalStylesObserver.disconnect();
+                this._globalStylesObserver = null;
+            }
+            if (this._globalStylesContainer) {
+                this._globalStylesContainer.remove();
+                this._globalStylesContainer = null;
+            }
+        }
+        _mirrorDocumentStylesIntoShadow() {
+            if (typeof document === 'undefined')
+                return;
+            if (!this._mirrorGlobalStylesForCustomOptions)
+                return;
+            if (!this._globalStylesContainer) {
+                this._globalStylesContainer = document.createElement('div');
+                this._globalStylesContainer.setAttribute('data-smilodon-global-styles', '');
+                this._shadow.appendChild(this._globalStylesContainer);
+            }
+            const container = this._globalStylesContainer;
+            container.innerHTML = '';
+            const styleNodes = Array.from(document.querySelectorAll('style,link[rel="stylesheet"]'));
+            styleNodes.forEach((node, index) => {
+                if (node instanceof HTMLStyleElement) {
+                    const clonedStyle = document.createElement('style');
+                    clonedStyle.setAttribute('data-smilodon-global-style', String(index));
+                    clonedStyle.textContent = node.textContent || '';
+                    container.appendChild(clonedStyle);
+                    return;
+                }
+                if (node instanceof HTMLLinkElement && node.href) {
+                    const clonedLink = document.createElement('link');
+                    clonedLink.rel = 'stylesheet';
+                    clonedLink.href = node.href;
+                    if (node.media)
+                        clonedLink.media = node.media;
+                    if (node.crossOrigin)
+                        clonedLink.crossOrigin = node.crossOrigin;
+                    if (node.referrerPolicy)
+                        clonedLink.referrerPolicy = node.referrerPolicy;
+                    if (node.integrity)
+                        clonedLink.integrity = node.integrity;
+                    if (node.type)
+                        clonedLink.type = node.type;
+                    if (node.nonce)
+                        clonedLink.nonce = node.nonce;
+                    clonedLink.setAttribute('data-smilodon-global-link', String(index));
+                    container.appendChild(clonedLink);
+                }
+            });
         }
         _createContainer() {
             const container = document.createElement('div');
@@ -2030,15 +2122,15 @@
         max-height: var(--select-input-max-height, 160px);
         overflow-y: var(--select-input-overflow-y, auto);
         align-content: flex-start;
-        background: var(--select-input-bg, white);
-        border: var(--select-input-border, 1px solid #d1d5db);
+        background: var(--select-input-bg, var(--select-bg, white));
+        border: var(--select-input-border, 1px solid var(--select-border-color, #d1d5db));
         border-radius: var(--select-input-border-radius, 6px);
         box-sizing: border-box;
         transition: all 0.2s ease;
       }
       
       .input-container:focus-within {
-        border-color: var(--select-input-focus-border, #667eea);
+        border-color: var(--select-input-focus-border, var(--select-border-focus-color, #667eea));
         box-shadow: var(--select-input-focus-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
       }
       
@@ -2108,7 +2200,7 @@
         border: none;
         font-size: var(--select-input-font-size, 14px);
         line-height: var(--select-input-line-height, 1.5);
-        color: var(--select-input-color, #1f2937);
+        color: var(--select-input-color, var(--select-text-color, #1f2937));
         background: transparent;
         box-sizing: border-box;
         outline: none;
@@ -2116,7 +2208,7 @@
       }
       
       .select-input::placeholder {
-        color: var(--select-input-placeholder-color, #9ca3af);
+        color: var(--select-input-placeholder-color, var(--select-placeholder-color, #9ca3af));
       }
       
       .selection-badge {
@@ -2177,8 +2269,8 @@
         margin-top: var(--select-dropdown-margin-top, 4px);
         max-height: var(--select-dropdown-max-height, 300px);
         overflow: hidden;
-        background: var(--select-dropdown-bg, white);
-        border: var(--select-dropdown-border, 1px solid #ccc);
+        background: var(--select-dropdown-bg, var(--select-bg, white));
+        border: 1px solid var(--select-dropdown-border, #ccc);
         border-radius: var(--select-dropdown-border-radius, 4px);
         box-shadow: var(--select-dropdown-shadow, 0 4px 6px rgba(0,0,0,0.1));
         z-index: var(--select-dropdown-z-index, 1000);
@@ -2189,14 +2281,14 @@
         max-height: var(--select-options-max-height, 300px);
         overflow: auto;
         transition: opacity 0.2s ease-in-out;
-        background: var(--select-options-bg, white);
+        background: var(--select-options-bg, var(--select-dropdown-bg, var(--select-bg, white)));
       }
 
       .option {
         padding: var(--select-option-padding, 8px 12px);
         cursor: pointer;
-        color: var(--select-option-color, #1f2937);
-        background: var(--select-option-bg, white);
+        color: var(--select-option-color, var(--select-text-color, #1f2937));
+        background: var(--select-option-bg, var(--select-dropdown-bg, var(--select-bg, white)));
         transition: var(--select-option-transition, background-color 0.15s ease);
         user-select: none;
         font-size: var(--select-option-font-size, 14px);
@@ -3225,6 +3317,7 @@
         }
         set optionRenderer(renderer) {
             this._optionRenderer = renderer;
+            this._setGlobalStylesMirroring(Boolean(renderer));
             this._renderOptions();
         }
         /**