Hue Scene Stylizer: Automatic Dropdown Color Styling for Philips Hue Scenes

[epinethrone]

Module post template

Hue Scene Stylizer

Version: 1.0
Creator: epinethrone

Important

Supported cards:

• Bubble cards with ha-select dropdowns

Automatically styles Bubble Card dropdown items by matching scene values to a built-in Philips Hue scene map. Applies labels, circle icons, and representative colors, supports case-insensitive matching, allows manual overrides, and preserves the original closed sub-button icon after selection.

Configure this module via the editor or in YAML, for example:

modules:
  - Hue Scene Stylizer

That's it! Plug and play.

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into a /www/bubble/modules/hue_scene_stylizer.yaml file.

Hue Scene Stylizer:
    name: "Hue Scene Stylizer"
    version: "1.0"
    creator: "epinethrone"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    description: |
        description: >
          Automatically styles dropdown items in Bubble card selects by matching their
          values to a built-in scene map. Applies custom labels, circle icons, and
          representative colors to known Philips Hue scenes and selected custom scenes.
          Matching is case-insensitive, manual per-card overrides still take precedence,
          and optional navigation or service actions can be attached to individual
          dropdown entries. Also preserves the original closed sub-button icon after a
          selection is made.
        <br><br>
        <code-block><pre>
        Hue Scene Stylizer: 
            # Your configuration here
        </pre></code-block>

    code: |
        custom_select: |
          ${(() => {
            const config = this.config.custom_select || {};
            const LIST_ITEM_SELECTOR = 'mwc-list-item, ha-dropdown-item';
        
            // Auto-style map for official Hue gallery scenes plus your custom extras.
            // Keys are lowercase so dropdown matching is case-insensitive.
            const AUTO_VALUE_STYLES = {
              "auto": { value: "Auto", name: "Auto", icon: "mdi:lightbulb-auto" },
              "rest": { value: "Rest", name: "Rest", icon: "mdi:circle", color: "#d7861e" },
              "relax": { value: "Relax", name: "Relax", icon: "mdi:circle", color: "#f3b450" },
              "read": { value: "Read", name: "Read", icon: "mdi:circle", color: "#ffd483" },
              "concentrate": { value: "Concentrate", name: "Concentrate", icon: "mdi:circle", color: "#fff1c7" },
              "energize": { value: "Energize", name: "Energize", icon: "mdi:circle", color: "#f7ffff" },
              "cool bright": { value: "Cool bright", name: "Cool bright", icon: "mdi:circle", color: "#ffedbb" },
              "bright": { value: "Bright", name: "Bright", icon: "mdi:circle", color: "#ffce77" },
              "dimmed": { value: "Dimmed", name: "Dimmed", icon: "mdi:circle", color: "#af8d4f" },
              "nightlight": { value: "Nightlight", name: "Nightlight", icon: "mdi:circle", color: "#261401" },
              "blossom": { value: "Blossom", name: "Blossom", icon: "mdi:circle", color: "#f0e5ce" },
              "crocus": { value: "Crocus", name: "Crocus", icon: "mdi:circle", color: "#dfcbff" },
              "precious": { value: "Precious", name: "Precious", icon: "mdi:circle", color: "#ffc8dc" },
              "narcissa": { value: "Narcissa", name: "Narcissa", icon: "mdi:circle", color: "#ffbe40" },
              "rolling hills": { value: "Rolling hills", name: "Rolling hills", icon: "mdi:circle", color: "#ea9a49" },
              "warm embrace": { value: "Warm embrace", name: "Warm embrace", icon: "mdi:circle", color: "#f0834b" },
              "dreamy dusk": { value: "Dreamy Dusk", name: "Dreamy Dusk", icon: "mdi:circle", color: "#7f6bd9" },
              "honolulu": { value: "Honolulu", name: "Honolulu", icon: "mdi:circle", color: "#f27d4a" },
              "savanna sunset": { value: "Savanna sunset", name: "Savanna sunset", icon: "mdi:circle", color: "#ffa051" },
              "golden pond": { value: "Golden pond", name: "Golden pond", icon: "mdi:circle", color: "#ffb933" },
              "ruby glow": { value: "Ruby glow", name: "Ruby glow", icon: "mdi:circle", color: "#e8859b" },
              "tropical twilight": { value: "Tropical twilight", name: "Tropical twilight", icon: "mdi:circle", color: "#e48df3" },
              "miami": { value: "Miami", name: "Miami", icon: "mdi:circle", color: "#b173ff" },
              "cancun": { value: "Cancun", name: "Cancun", icon: "mdi:circle", color: "#ffaa00" },
              "rio": { value: "Rio", name: "Rio", icon: "mdi:circle", color: "#ff88cd" },
              "chinatown": { value: "Chinatown", name: "Chinatown", icon: "mdi:circle", color: "#b51a00" },
              "ibiza": { value: "Ibiza", name: "Ibiza", icon: "mdi:circle", color: "#efa341" },
              "osaka": { value: "Osaka", name: "Osaka", icon: "mdi:circle", color: "#f16f6f" },
              "tokyo": { value: "Tokyo", name: "Tokyo", icon: "mdi:circle", color: "#a552ff" },
              "motown": { value: "Motown", name: "Motown", icon: "mdi:circle", color: "#0061ff" },
              "fairfax": { value: "Fairfax", name: "Fairfax", icon: "mdi:circle", color: "#ffa9d3" },
              "galaxy": { value: "Galaxy", name: "Galaxy", icon: "mdi:circle", color: "#c5618f" },
              "starlight": { value: "Starlight", name: "Starlight", icon: "mdi:circle", color: "#a176b5" },
              "blood moon": { value: "Blood moon", name: "Blood moon", icon: "mdi:circle", color: "#866bea" },
              "arctic aurora": { value: "Arctic aurora", name: "Arctic aurora", icon: "mdi:circle", color: "#4d95f1" },
              "moonlight": { value: "Moonlight", name: "Moonlight", icon: "mdi:circle", color: "#5962ff" },
              "nebula": { value: "Nebula", name: "Nebula", icon: "mdi:circle", color: "#9c6dfe" },
              "still waters": { value: "Still waters", name: "Still waters", icon: "mdi:circle", color: "#eaacff" },
              "adrift": { value: "Adrift", name: "Adrift", icon: "mdi:circle", color: "#8b81ff" },
              "pensive": { value: "Pensive", name: "Pensive", icon: "mdi:circle", color: "#fea5d5" },
              "majestic morning": { value: "Majestic morning", name: "Majestic morning", icon: "mdi:circle", color: "#cc89ff" },
              "sundown": { value: "Sundown", name: "Sundown", icon: "mdi:circle", color: "#e1a8ce" },
              "blue lagoon": { value: "Blue lagoon", name: "Blue lagoon", icon: "mdi:circle", color: "#abc4ad" },
              "palm beach": { value: "Palm Beach", name: "Palm Beach", icon: "mdi:circle", color: "#bd9c9a" },
              "lake placid": { value: "Lake Placid", name: "Lake Placid", icon: "mdi:circle", color: "#f4a4c0" },
              "mountain breeze": { value: "Mountain breeze", name: "Mountain breeze", icon: "mdi:circle", color: "#cac4ff" },
              "lake mist": { value: "Lake mist", name: "Lake mist", icon: "mdi:circle", color: "#e0cbee" },
              "ocean dawn": { value: "Ocean dawn", name: "Ocean dawn", icon: "mdi:circle", color: "#ffd3d2" },
              "frosty dawn": { value: "Frosty dawn", name: "Frosty dawn", icon: "mdi:circle", color: "#ffda94" },
              "sunday morning": { value: "Sunday morning", name: "Sunday morning", icon: "mdi:circle", color: "#e6d591" },
              "emerald isle": { value: "Emerald isle", name: "Emerald isle", icon: "mdi:circle", color: "#d4e9b5" },
              "spring blossom": { value: "Spring Blossom", name: "Spring Blossom", icon: "mdi:circle", color: "#ffb7d5" },
              "beginnings": { value: "Beginnings", name: "Beginnings", icon: "mdi:circle", color: "#7077e0" },
              "first light": { value: "First light", name: "First light", icon: "mdi:circle", color: "#a08cca" },
              "horizon": { value: "Horizon", name: "Horizon", icon: "mdi:circle", color: "#c1b5f2" },
              "valley dawn": { value: "Valley dawn", name: "Valley dawn", icon: "mdi:circle", color: "#e6d2f4" },
              "sunflare": { value: "Sunflare", name: "Sunflare", icon: "mdi:circle", color: "#f7e0e7" },
              "emerald flutter": { value: "Emerald flutter", name: "Emerald flutter", icon: "mdi:circle", color: "#60bbdf" },
              "memento": { value: "Memento", name: "Memento", icon: "mdi:circle", color: "#6764ff" },
              "resplendent": { value: "Resplendent", name: "Resplendent", icon: "mdi:circle", color: "#c970d0" },
              "scarlet dream": { value: "Scarlet Dream", name: "Scarlet Dream", icon: "mdi:circle", color: "#ff3b5c" },
              "amethyst valley": { value: "Amethyst valley", name: "Amethyst valley", icon: "mdi:circle", color: "#af92ff" },
              "misty ridge": { value: "Misty ridge", name: "Misty ridge", icon: "mdi:circle", color: "#ffd1d2" },
              "hazy days": { value: "Hazy days", name: "Hazy days", icon: "mdi:circle", color: "#ffd16f" },
              "midsummer sun": { value: "Midsummer sun", name: "Midsummer sun", icon: "mdi:circle", color: "#ffd667" },
              "autumn gold": { value: "Autumn gold", name: "Autumn gold", icon: "mdi:circle", color: "#ffd177" },
              "spring lake": { value: "Spring lake", name: "Spring lake", icon: "mdi:circle", color: "#ebffca" },
              "winter mountain": { value: "Winter mountain", name: "Winter mountain", icon: "mdi:circle", color: "#bfeeff" },
              "midwinter": { value: "Midwinter", name: "Midwinter", icon: "mdi:circle", color: "#9eb6ff" },
              "amber bloom": { value: "Amber Bloom", name: "Amber Bloom", icon: "mdi:circle", color: "#d58400" },
              "lily": { value: "Lily", name: "Lily", icon: "mdi:circle", color: "#ff8973" },
              "painted sky": { value: "Painted sky", name: "Painted sky", icon: "mdi:circle", color: "#f493ff" },
              "winter beauty": { value: "Winter beauty", name: "Winter beauty", icon: "mdi:circle", color: "#d1f3af" },
              "orange fields": { value: "Orange fields", name: "Orange fields", icon: "mdi:circle", color: "#ffc442" },
              "forest adventure": { value: "Forest adventure", name: "Forest adventure", icon: "mdi:circle", color: "#7dcfff" },
              "blue planet": { value: "Blue Planet", name: "Blue Planet", icon: "mdi:circle", color: "#008cb4" },
              "meriete": { value: "Meriete", name: "Meriete", icon: "mdi:circle", color: "#5e30eb" },
              "soho": { value: "Soho", name: "Soho", icon: "mdi:circle", color: "#f084ff" },
              "vapor wave": { value: "Vapor Wave", name: "Vapor Wave", icon: "mdi:circle", color: "#7c4dff" },
              "magneto": { value: "Magneto", name: "Magneto", icon: "mdi:circle", color: "#9ac7ff" },
              "tyrell": { value: "Tyrell", name: "Tyrell", icon: "mdi:circle", color: "#b271ff" },
              "disturbia": { value: "Disturbia", name: "Disturbia", icon: "mdi:circle", color: "#ffa1d2" },
              "hal": { value: "Hal", name: "Hal", icon: "mdi:circle", color: "#ffc8d6" },
              "crimson": { value: "Crimson", name: "Crimson", icon: "mdi:circle", color: "#e32400" },
              "dreamcore": { value: "Dreamcore", name: "Dreamcore", icon: "mdi:circle", color: "#be38f3" },
              "natural light": { value: "Natural Light", name: "Natural Light", icon: "mdi:circle", color: "#fff1c7" },
              "ruby romance": { value: "Ruby Romance", name: "Ruby Romance", icon: "mdi:circle", color: "#c2185b" },
              "silverstone": { value: "Silverstone", name: "Silverstone", icon: "mdi:circle", color: "#cfd8dc" },
              "smitten": { value: "Smitten", name: "Smitten", icon: "mdi:circle", color: "#ff7aa2" },
        
              // Guest bedroom / additional scenes that were missing in use
              "baby's breath": { value: "Baby's Breath", name: "Baby's Breath", icon: "mdi:circle", color: "#f3e7d4" },
              "cool": { value: "Cool", name: "Cool", icon: "mdi:circle", color: "#9fd6ff" },
              "midnight": { value: "Midnight", name: "Midnight", icon: "mdi:circle", color: "#3949ab" },
              "nature's colors": { value: "Nature's Colors", name: "Nature's Colors", icon: "mdi:circle", color: "#5fa86b" },
              "nighttime": { value: "Nighttime", name: "Nighttime", icon: "mdi:circle", color: "#5c6bc0" }
            };
        
            if (!card._customSelectInitialized) {
              card._customSelectInitialized = true;
              card._customSelectActions = new Map();
              card._customSelectNavigate = new Map();
              card._customSelectObservers = new Map();
            }
        
            const normalizeValue = (value) => String(value ?? '').trim().toLowerCase();
        
            const getDropdownItems = (dropdown) => {
              if (!dropdown) return [];
              return Array.from(dropdown.querySelectorAll(LIST_ITEM_SELECTOR));
            };
        
            const getItemValue = (item) => {
              if (!item) return undefined;
              return item.dataset?.bubbleValue ?? item.value ?? item.getAttribute('value');
            };
        
            const findItemByValue = (items, value) => {
              if (!Array.isArray(items) || value === undefined || value === null) return null;
              const wanted = normalizeValue(value);
              return items.find((item) => normalizeValue(getItemValue(item)) === wanted) || null;
            };
        
            const findItemByConfiguredValue = (items, configuredValue) => {
              if (!Array.isArray(items)) return null;
              const wanted = normalizeValue(configuredValue);
              return items.find((item) => normalizeValue(getItemValue(item)) === wanted) || null;
            };
        
            const getClickedDropdownItem = (event) => {
              const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
              return path.find((el) => {
                const tagName = el?.tagName?.toLowerCase?.();
                return tagName === 'mwc-list-item' || tagName === 'ha-dropdown-item';
              }) || null;
            };
        
            const applyModificationToItem = (item, mod) => {
              const isNewDropdownItem = item.tagName === 'HA-DROPDOWN-ITEM';
              const iconSlot = isNewDropdownItem ? 'icon' : 'graphic';
        
              if (!item.dataset.customSelectOriginalValue) {
                item.dataset.customSelectOriginalValue = String(getItemValue(item) ?? '').trim();
              }
        
              const childrenToRemove = Array.from(item.children).filter(child =>
                child.tagName === 'HA-ICON' || child.slot === 'graphic' || child.slot === 'icon'
              );
              childrenToRemove.forEach(child => child.remove());
        
              const textNodes = Array.from(item.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
              textNodes.forEach(node => node.remove());
        
              item.removeAttribute('graphic');
              if ('graphic' in item) {
                item.graphic = '';
              }
        
              const labelText =
                mod.name ??
                item.dataset.customSelectOriginalValue ??
                String(getItemValue(item) ?? '').trim();
        
              if (labelText) {
                item.appendChild(document.createTextNode(labelText));
              }
        
              if (mod.icon) {
                const haIcon = document.createElement('ha-icon');
                haIcon.icon = mod.icon;
                haIcon.slot = iconSlot;
        
                if (mod.color) {
                  haIcon.style.color = mod.color;
                }
        
                item.appendChild(haIcon);
                if (!isNewDropdownItem) {
                  item.graphic = 'icon';
                  item.setAttribute('graphic', 'icon');
                }
              }
        
              item.dataset.customSelectModified = 'true';
            };
        
            const getAutoModificationForItem = (item) => {
              const rawValue = normalizeValue(getItemValue(item));
              return AUTO_VALUE_STYLES[rawValue] || null;
            };
        
            const mergeModifications = (autoMod, manualMod) => {
              if (autoMod && manualMod) {
                return { ...autoMod, ...manualMod };
              }
              return manualMod || autoMod || null;
            };
        
            const buildEffectiveModificationsForDropdown = (dropdown, manualMods) => {
              const items = getDropdownItems(dropdown);
              const effectiveMods = [];
        
              items.forEach((item, index) => {
                const rawValue = normalizeValue(getItemValue(item));
                const autoMod = getAutoModificationForItem(item);
        
                let manualMod = null;
                if (Array.isArray(manualMods) && manualMods.length) {
                  manualMod =
                    manualMods.find((mod) =>
                      mod &&
                      mod.value !== undefined &&
                      mod.value !== null &&
                      normalizeValue(mod.value) === rawValue
                    ) || null;
        
                  if (!manualMod) {
                    manualMod =
                      manualMods.find((mod) =>
                        mod &&
                        mod.position &&
                        Number(mod.position) === index + 1
                      ) || null;
                  }
                }
        
                const merged = mergeModifications(autoMod, manualMod);
                if (merged) {
                  effectiveMods.push(merged);
                }
              });
        
              return effectiveMods;
            };
        
            const applyModifications = (dropdown, manualMods, dropdownId) => {
              if (!dropdown) return;
        
              const checkAndApply = () => {
                const items = getDropdownItems(dropdown);
                if (items.length === 0) {
                  setTimeout(checkAndApply, 50);
                  return;
                }
        
                const effectiveMods = buildEffectiveModificationsForDropdown(dropdown, manualMods);
        
                effectiveMods.forEach((mod) => {
                  if (!mod) return;
        
                  let item = null;
                  let targetIndex = -1;
        
                  if (mod.value !== undefined && mod.value !== null && mod.value !== '') {
                    item = findItemByConfiguredValue(items, mod.value);
                    targetIndex = items.indexOf(item);
                  } else if (mod.position) {
                    targetIndex = mod.position - 1;
                    item = items[targetIndex];
                  }
        
                  if (item) {
                    const key =
                      mod.value !== undefined && mod.value !== null && mod.value !== ''
                        ? `${dropdownId}::${normalizeValue(mod.value)}`
                        : `${dropdownId}#${targetIndex}`;
        
                    item.dataset.customSelectKey = key;
        
                    if (mod.navigate) {
                      card._customSelectNavigate.set(key, mod.navigate);
                    }
                    if (mod.action) {
                      const normalizedActions = Array.isArray(mod.action) ? mod.action : [mod.action];
                      card._customSelectActions.set(key, normalizedActions);
                    }
        
                    const hasUIChanges = Boolean(mod.name || mod.icon || mod.color);
                    if (hasUIChanges) {
                      const expectedLabel =
                        mod.name ??
                        item.dataset.customSelectOriginalValue ??
                        String(getItemValue(item) ?? '').trim();
        
                      const needsModification =
                        !item.dataset.customSelectModified ||
                        (expectedLabel && !item.textContent.includes(expectedLabel)) ||
                        (mod.icon && !item.querySelector(`ha-icon[icon="${mod.icon}"]`)) ||
                        (mod.color && !item.querySelector(`ha-icon[style*="${mod.color}"]`));
        
                      if (needsModification) {
                        applyModificationToItem(item, mod);
                      }
                    }
                  }
                });
              };
        
              checkAndApply();
            };
        
            const observeDropdown = (dropdown, manualMods, dropdownId) => {
              if (!dropdown) return;
        
              const observerKey = `${dropdownId}_observer`;
        
              if (card._customSelectObservers.has(observerKey)) {
                card._customSelectObservers.get(observerKey).disconnect();
              }
        
              const observer = new MutationObserver((mutations) => {
                let shouldReapply = false;
        
                mutations.forEach((mutation) => {
                  if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach((node) => {
                      if (
                        node.nodeType === Node.ELEMENT_NODE &&
                        (
                          node.tagName === 'MWC-LIST-ITEM' ||
                          node.tagName === 'HA-DROPDOWN-ITEM' ||
                          node.querySelector?.(LIST_ITEM_SELECTOR)
                        )
                      ) {
                        shouldReapply = true;
                      }
                    });
                  }
                });
        
                if (shouldReapply) {
                  setTimeout(() => {
                    applyModifications(dropdown, manualMods, dropdownId);
                  }, 10);
                }
              });
        
              observer.observe(dropdown, {
                childList: true,
                subtree: true
              });
        
              card._customSelectObservers.set(observerKey, observer);
            };
        
            const executeNavigation = (path) => {
              if (!path) return;
        
              if (typeof history !== 'undefined' && history.pushState) {
                history.pushState(null, null, path);
                window.dispatchEvent(new PopStateEvent('popstate'));
              } else {
                window.location.href = path;
              }
            };
        
            const executeCallServiceAction = (action, hass) => {
              if (!action || !hass) return;
        
              const service = action.action;
              const serviceData = action.data || {};
              const target = action.target || {};
        
              if (service && service.includes('.')) {
                const [domain, serviceName] = service.split('.');
                hass.callService(domain, serviceName, serviceData, target);
              }
            };
        
            const executeCustomActions = (actions, hass) => {
              if (!actions || !Array.isArray(actions) || !hass) return;
        
              actions.forEach((action, index) => {
                setTimeout(() => {
                  executeCallServiceAction(action, hass);
                }, index * 50);
              });
            };
        
            const addCustomActionListeners = (dropdown, dropdownId) => {
              if (!dropdown) return;
        
              if (dropdown.dataset.customSelectListeners) {
                return;
              }
              dropdown.dataset.customSelectListeners = 'true';
        
              let lastHandledKey = null;
              let lastHandledAt = 0;
        
              const runCustomActionForItem = (item) => {
                const items = getDropdownItems(dropdown);
                const idx = items.indexOf(item);
                if (idx < 0) return;
        
                const fallbackValue = getItemValue(item);
                const key =
                  item.dataset?.customSelectKey ||
                  (
                    fallbackValue !== undefined &&
                    fallbackValue !== null &&
                    fallbackValue !== ''
                      ? `${dropdownId}::${normalizeValue(fallbackValue)}`
                      : `${dropdownId}#${idx}`
                  );
        
                const now = Date.now();
        
                if (lastHandledKey === key && (now - lastHandledAt) < 200) {
                  return;
                }
                lastHandledKey = key;
                lastHandledAt = now;
        
                const customNavigation = card._customSelectNavigate.get(key);
                const customActions = card._customSelectActions.get(key);
        
                if (customNavigation) {
                  setTimeout(() => executeNavigation(customNavigation), 50);
                }
                if (customActions) {
                  setTimeout(() => executeCustomActions(customActions, this._hass), 100);
                }
              };
        
              const handleItemClick = (event) => {
                const clickedItem = getClickedDropdownItem(event);
                if (!clickedItem) return;
                runCustomActionForItem(clickedItem);
              };
        
              const handleItemSelected = (event) => {
                if (!event.isTrusted) return;
                const selectedValue = event.detail?.value;
                if (selectedValue === undefined || selectedValue === null) return;
        
                const items = getDropdownItems(dropdown);
                const selectedItem = findItemByValue(items, selectedValue);
                if (!selectedItem) return;
        
                runCustomActionForItem(selectedItem);
              };
        
              dropdown.addEventListener('click', handleItemClick);
              dropdown.addEventListener('selected', handleItemSelected);
            };
        
            if (config.main_card !== undefined) {
              const allDropdowns = card.querySelectorAll('ha-select');
              const subButtonDropdowns = card.querySelectorAll('.bubble-sub-button ha-select');
        
              const mainDropdown = Array.from(allDropdowns).find(
                (dropdown) => !Array.from(subButtonDropdowns).includes(dropdown)
              );
        
              if (mainDropdown) {
                applyModifications(mainDropdown, config.main_card, 'main_card');
                observeDropdown(mainDropdown, config.main_card, 'main_card');
                addCustomActionListeners(mainDropdown, 'main_card');
              }
            }
        
            const subButtons = card.querySelectorAll('.bubble-sub-button');
            for (let i = 1; i <= 4; i++) {
              const manualMods = config[`sub_button_${i}`] || [];
              const subButtonIndex = i - 1;
              const targetSubButton = subButtons[subButtonIndex];
        
              if (targetSubButton) {
                const targetDropdown = targetSubButton.querySelector('ha-select');
                if (targetDropdown) {
                  const dropdownId = `sub_button_${i}`;
                  applyModifications(targetDropdown, manualMods, dropdownId);
                  observeDropdown(targetDropdown, manualMods, dropdownId);
                  addCustomActionListeners(targetDropdown, dropdownId);
        
                  const subBtnIconEl = this.subButtonIcon?.[subButtonIndex];
        
                  if (subBtnIconEl && !subBtnIconEl.dataset.defaultIconStored) {
                    subBtnIconEl.dataset.defaultIconStored = 'true';
                    subBtnIconEl.dataset.defaultIcon = subBtnIconEl.icon || '';
                    subBtnIconEl.dataset.defaultColor = subBtnIconEl.style.color || '';
                  }
        
                  const resetSubButtonIcon = () => {
                    if (!subBtnIconEl) return;
                    subBtnIconEl.icon = subBtnIconEl.dataset.defaultIcon || '';
                    subBtnIconEl.style.color = subBtnIconEl.dataset.defaultColor || '';
                  };
        
                  if (!targetDropdown.dataset.customSelectIconReset) {
                    targetDropdown.dataset.customSelectIconReset = 'true';
        
                    targetDropdown.addEventListener('change', () => {
                      setTimeout(() => resetSubButtonIcon(), 0);
                    });
        
                    targetDropdown.addEventListener('selected', () => {
                      setTimeout(() => resetSubButtonIcon(), 0);
                    });
                  }
                }
              }
            }
          })()}
        

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️