@smilodon/core 1.3.13 → 1.4.1

package/dist/index.js

@@ -1555,16 +1555,55 @@ class SelectOption extends HTMLElement {
         this._shadow.appendChild(style);
     }
     _render() {
-        const { item, index, selected, disabled, active, render, showRemoveButton } = this._config;
+        const { item, index, selected, disabled, active, render, showRemoveButton, classMap } = this._config;
         // Clear container
         this._container.innerHTML = '';
-        // Apply state classes
-        this._container.classList.toggle('selected', selected);
-        this._container.classList.toggle('disabled', disabled || false);
-        this._container.classList.toggle('active', active || false);
+        // Add part attribute
+        this._container.setAttribute('part', 'option');
+        // Standard styling hook
+        this._container.classList.add('smilodon-option');
+        // Apply state classes using classMap or defaults
+        const selectedClasses = (classMap?.selected ?? 'selected sm-selected').split(' ').filter(Boolean);
+        const activeClasses = (classMap?.active ?? 'active sm-active').split(' ').filter(Boolean);
+        const disabledClasses = (classMap?.disabled ?? 'disabled sm-disabled').split(' ').filter(Boolean);
+        // Apply classes to both the container (internal styling) and the host (external styling/::part)
+        // This ensures that utility classes are visible via ::part selectors
+        const toggleClasses = (element, classes, add) => {
+            if (add) {
+                element.classList.add(...classes);
+            }
+            else {
+                element.classList.remove(...classes);
+            }
+        };
+        if (selected) {
+            toggleClasses(this._container, [...selectedClasses, 'smilodon-option--selected'], true);
+            toggleClasses(this, [...selectedClasses, 'smilodon-option--selected'], true);
+        }
+        else {
+            toggleClasses(this._container, [...selectedClasses, 'smilodon-option--selected'], false);
+            toggleClasses(this, [...selectedClasses, 'smilodon-option--selected'], false);
+        }
+        if (active) {
+            toggleClasses(this._container, [...activeClasses, 'smilodon-option--active'], true);
+            toggleClasses(this, [...activeClasses, 'smilodon-option--active'], true); // Make focus ring visible on host
+        }
+        else {
+            toggleClasses(this._container, [...activeClasses, 'smilodon-option--active'], false);
+            toggleClasses(this, [...activeClasses, 'smilodon-option--active'], false);
+        }
+        if (disabled) {
+            toggleClasses(this._container, [...disabledClasses, 'smilodon-option--disabled'], true);
+            toggleClasses(this, [...disabledClasses, 'smilodon-option--disabled'], true);
+        }
+        else {
+            toggleClasses(this._container, [...disabledClasses, 'smilodon-option--disabled'], false);
+            toggleClasses(this, [...disabledClasses, 'smilodon-option--disabled'], false);
+        }
         // Custom class name
         if (this._config.className) {
-            this._container.className += ' ' + this._config.className;
+            const classes = this._config.className.split(' ').filter(Boolean);
+            this._container.classList.add(...classes);
         }
         // Apply custom styles
         if (this._config.style) {
@@ -1573,12 +1612,13 @@ class SelectOption extends HTMLElement {
         // Render content
         const contentDiv = document.createElement('div');
         contentDiv.className = 'option-content';
+        // contentDiv.setAttribute('part', 'option-content'); // Optional
         if (render) {
             const rendered = render(item, index);
             if (typeof rendered === 'string') {
                 contentDiv.innerHTML = rendered;
             }
-            else {
+            else if (rendered instanceof HTMLElement) {
                 contentDiv.appendChild(rendered);
             }
         }
@@ -1592,16 +1632,56 @@ class SelectOption extends HTMLElement {
             this._removeButton = document.createElement('button');
             this._removeButton.className = 'remove-button';
             this._removeButton.innerHTML = '×';
+            this._removeButton.setAttribute('part', 'chip-remove');
             this._removeButton.setAttribute('aria-label', 'Remove option');
             this._removeButton.setAttribute('type', 'button');
             this._container.appendChild(this._removeButton);
         }
-        // Set ARIA attributes
+        // Set ARIA attributes and State attributes on Host
         this.setAttribute('role', 'option');
         this.setAttribute('aria-selected', String(selected));
         if (disabled)
             this.setAttribute('aria-disabled', 'true');
         this.id = this._config.id || `select-option-${index}`;
+        // Add checkmark (part="checkmark") - standard for object mode
+        // Only show if NOT showing remove button (avoid clutter)
+        if (!showRemoveButton) {
+            const checkmark = document.createElement('div');
+            checkmark.setAttribute('part', 'checkmark');
+            checkmark.className = 'checkmark-icon';
+            checkmark.innerHTML = `
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:1em;height:1em;">
+            <path d="M4 8.5L6.5 11L12 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        `;
+            // Visibility control via CSS or inline style
+            // We set it to display: none unless selected.
+            // User can override this behavior via part styling if they want transitions
+            if (!selected) {
+                checkmark.style.display = 'none';
+            }
+            else {
+                checkmark.style.marginLeft = '8px';
+                checkmark.style.color = 'currentColor';
+            }
+            this._container.appendChild(checkmark);
+        }
+        // Data Attributes Contract on Host
+        const state = [];
+        if (selected)
+            state.push('selected');
+        if (active)
+            state.push('active');
+        if (state.length) {
+            this.dataset.smState = state.join(' ');
+        }
+        else {
+            delete this.dataset.smState;
+        }
+        this.dataset.smIndex = String(index);
+        if (!this.hasAttribute('data-sm-selectable')) {
+            this.toggleAttribute('data-sm-selectable', true);
+        }
     }
     _attachEventListeners() {
         // Click handler for selection
@@ -1746,6 +1826,7 @@ class EnhancedSelect extends HTMLElement {
         this._pendingFirstRenderMark = false;
         this._pendingSearchRenderMark = false;
         this._rangeAnchorIndex = null;
+        this._customOptionBoundElements = new WeakSet();
         this._shadow = this.attachShadow({ mode: 'open' });
         this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
         this._rendererHelpers = this._buildRendererHelpers();
@@ -1828,10 +1909,12 @@ class EnhancedSelect extends HTMLElement {
     _createInputContainer() {
         const container = document.createElement('div');
         container.className = 'input-container';
+        container.setAttribute('part', 'button');
         return container;
     }
     _createInput() {
         const input = document.createElement('input');
+        input.setAttribute('part', 'input');
         input.type = 'text';
         input.className = 'select-input';
         input.id = `${this._uniqueId}-input`;
@@ -1859,6 +1942,7 @@ class EnhancedSelect extends HTMLElement {
     _createDropdown() {
         const dropdown = document.createElement('div');
         dropdown.className = 'select-dropdown';
+        dropdown.setAttribute('part', 'listbox');
         dropdown.style.display = 'none';
         if (this._config.styles.classNames?.dropdown) {
             dropdown.className += ' ' + this._config.styles.classNames.dropdown;
@@ -1890,7 +1974,7 @@ class EnhancedSelect extends HTMLElement {
         const container = document.createElement('div');
         container.className = 'dropdown-arrow-container';
         container.innerHTML = `
-      <svg class="dropdown-arrow" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg class="dropdown-arrow" part="arrow" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     `;
@@ -2412,6 +2496,22 @@ class EnhancedSelect extends HTMLElement {
             const query = e.target.value;
             this._handleSearch(query);
         });
+        // Delegated click listener for improved event handling (smart fallback)
+        this._optionsContainer.addEventListener('click', (e) => {
+            const target = e.target;
+            // Handle option clicks
+            const option = target.closest('[data-sm-selectable], [data-selectable], [data-sm-state]');
+            if (option && !option.hasAttribute('aria-disabled')) {
+                const indexStr = option.getAttribute('data-sm-index') ?? option.getAttribute('data-index');
+                const index = Number(indexStr);
+                if (!Number.isNaN(index)) {
+                    this._selectOption(index, {
+                        shiftKey: e.shiftKey,
+                        toggleKey: e.ctrlKey || e.metaKey,
+                    });
+                }
+            }
+        });
         // Keyboard navigation
         this._input.addEventListener('keydown', (e) => this._handleKeydown(e));
         // Click outside to close
@@ -2984,10 +3084,12 @@ class EnhancedSelect extends HTMLElement {
             selectedEntries.forEach(([index, item]) => {
                 const badge = document.createElement('span');
                 badge.className = 'selection-badge';
+                badge.setAttribute('part', 'chip');
                 badge.textContent = getLabel(item);
                 // Add remove button to badge
                 const removeBtn = document.createElement('button');
                 removeBtn.className = 'badge-remove';
+                removeBtn.setAttribute('part', 'chip-remove');
                 removeBtn.innerHTML = '×';
                 removeBtn.setAttribute('aria-label', `Remove ${getLabel(item)}`);
                 removeBtn.addEventListener('click', (e) => {
@@ -3355,6 +3457,7 @@ class EnhancedSelect extends HTMLElement {
         if (this._state.isSearching) {
             const searching = document.createElement('div');
             searching.className = 'searching-state';
+            searching.setAttribute('part', 'loading');
             searching.textContent = 'Searching...';
             this._optionsContainer.appendChild(searching);
             return;
@@ -3412,6 +3515,7 @@ class EnhancedSelect extends HTMLElement {
             });
             if (!hasRenderedItems && !this._state.isBusy) {
                 const empty = document.createElement('div');
+                empty.setAttribute('part', 'no-results');
                 empty.className = 'empty-state';
                 if (query) {
                     empty.textContent = `No results found for "${this._state.searchQuery}"`;
@@ -3425,6 +3529,7 @@ class EnhancedSelect extends HTMLElement {
         // Append Busy Indicator if busy
         if (this._state.isBusy && this._config.busyBucket.enabled) {
             const busyBucket = document.createElement('div');
+            busyBucket.setAttribute('part', 'loading');
             busyBucket.className = 'busy-bucket';
             if (this._config.busyBucket.showSpinner) {
                 const spinner = document.createElement('div');
@@ -3473,11 +3578,24 @@ class EnhancedSelect extends HTMLElement {
             getValue,
             getLabel,
             showRemoveButton: this._config.selection.mode === 'multi' && this._config.selection.showRemoveButton,
+            classMap: this.classMap,
         });
+        // Valid part attribute on the web component host itself
+        option.setAttribute('part', 'option');
         option.dataset.index = String(index);
         option.dataset.value = String(getValue(item));
+        // New standard attributes on Host
+        option.dataset.smIndex = String(index);
+        if (!option.hasAttribute('data-sm-selectable')) {
+            option.toggleAttribute('data-sm-selectable', true);
+        }
+        const val = getValue(item);
+        if (val != null) {
+            option.dataset.smValue = String(val);
+        }
         option.id = option.id || optionId;
         option.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent duplicate handling by delegation
             const mouseEvent = e;
             this._selectOption(index, {
                 shiftKey: mouseEvent.shiftKey,
@@ -3493,35 +3611,71 @@ class EnhancedSelect extends HTMLElement {
     }
     _normalizeCustomOptionElement(element, meta) {
         const optionEl = element instanceof HTMLElement ? element : document.createElement('div');
+        // Add part attribute for styling
+        if (!optionEl.hasAttribute('part')) {
+            optionEl.setAttribute('part', 'option');
+        }
         // Add both semantic namespaced classes and the legacy internal classes that CSS uses
         optionEl.classList.add('smilodon-option', 'option');
-        // Toggle state classes
+        // Toggle state classes using classMap if available
         const isSelected = meta.selected;
         const isActive = meta.active;
         const isDisabled = meta.disabled;
+        // Resolve classes from classMap or defaults
+        const selectedClasses = (this.classMap?.selected ?? 'selected sm-selected').split(' ').filter(Boolean);
+        const activeClasses = (this.classMap?.active ?? 'active sm-active').split(' ').filter(Boolean);
+        const disabledClasses = (this.classMap?.disabled ?? 'disabled sm-disabled').split(' ').filter(Boolean);
         if (isSelected) {
-            optionEl.classList.add('smilodon-option--selected', 'selected');
+            optionEl.classList.add(...selectedClasses);
+            optionEl.classList.add('smilodon-option--selected');
         }
         else {
-            optionEl.classList.remove('smilodon-option--selected', 'selected');
+            optionEl.classList.remove(...selectedClasses);
+            optionEl.classList.remove('smilodon-option--selected');
         }
         if (isActive) {
-            optionEl.classList.add('smilodon-option--active', 'active');
+            optionEl.classList.add(...activeClasses);
+            optionEl.classList.add('smilodon-option--active');
         }
         else {
-            optionEl.classList.remove('smilodon-option--active', 'active');
+            optionEl.classList.remove(...activeClasses);
+            optionEl.classList.remove('smilodon-option--active');
         }
         if (isDisabled) {
-            optionEl.classList.add('smilodon-option--disabled', 'disabled');
+            optionEl.classList.add(...disabledClasses);
+            optionEl.classList.add('smilodon-option--disabled');
         }
         else {
-            optionEl.classList.remove('smilodon-option--disabled', 'disabled');
+            optionEl.classList.remove(...disabledClasses);
+            optionEl.classList.remove('smilodon-option--disabled');
         }
+        // Data Attributes Contract
+        const state = [];
+        if (isSelected)
+            state.push('selected');
+        if (isActive)
+            state.push('active');
+        if (state.length) {
+            optionEl.dataset.smState = state.join(' ');
+        }
+        else {
+            delete optionEl.dataset.smState;
+        }
+        // Legacy data attribute support
         if (!optionEl.hasAttribute('data-selectable')) {
             optionEl.setAttribute('data-selectable', '');
         }
+        // New delegation attribute
+        if (!optionEl.hasAttribute('data-sm-selectable')) {
+            optionEl.setAttribute('data-sm-selectable', '');
+        }
         optionEl.dataset.index = String(meta.index);
         optionEl.dataset.value = String(meta.value);
+        // New standard attributes
+        optionEl.dataset.smIndex = String(meta.index);
+        if (meta.value != null) {
+            optionEl.dataset.smValue = String(meta.value);
+        }
         optionEl.id = optionEl.id || meta.id;
         if (!optionEl.getAttribute('role')) {
             optionEl.setAttribute('role', 'option');
@@ -3539,23 +3693,37 @@ class EnhancedSelect extends HTMLElement {
         if (!optionEl.hasAttribute('tabindex')) {
             optionEl.tabIndex = -1;
         }
-        if (!meta.disabled) {
+        if (!this._customOptionBoundElements.has(optionEl)) {
             optionEl.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const current = e.currentTarget;
+                if (current.getAttribute('aria-disabled') === 'true')
+                    return;
+                const parsedIndex = Number(current.dataset.index);
+                if (!Number.isFinite(parsedIndex))
+                    return;
                 const mouseEvent = e;
-                this._selectOption(meta.index, {
+                this._selectOption(parsedIndex, {
                     shiftKey: mouseEvent.shiftKey,
                     toggleKey: mouseEvent.ctrlKey || mouseEvent.metaKey,
                 });
             });
             optionEl.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this._selectOption(meta.index, {
-                        shiftKey: e.shiftKey,
-                        toggleKey: e.ctrlKey || e.metaKey,
-                    });
-                }
+                if (e.key !== 'Enter' && e.key !== ' ')
+                    return;
+                const current = e.currentTarget;
+                if (current.getAttribute('aria-disabled') === 'true')
+                    return;
+                const parsedIndex = Number(current.dataset.index);
+                if (!Number.isFinite(parsedIndex))
+                    return;
+                e.preventDefault();
+                this._selectOption(parsedIndex, {
+                    shiftKey: e.shiftKey,
+                    toggleKey: e.ctrlKey || e.metaKey,
+                });
             });
+            this._customOptionBoundElements.add(optionEl);
         }
         return optionEl;
     }