@smilodon/core 1.3.13 → 1.4.0

package/dist/index.umd.js

@@ -1561,16 +1561,55 @@
             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) {
@@ -1579,12 +1618,13 @@
             // 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);
                 }
             }
@@ -1598,16 +1638,56 @@
                 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
@@ -1834,10 +1914,12 @@
         _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`;
@@ -1865,6 +1947,7 @@
         _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;
@@ -1896,7 +1979,7 @@
             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>
     `;
@@ -2418,6 +2501,22 @@
                 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
@@ -2990,10 +3089,12 @@
                 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) => {
@@ -3361,6 +3462,7 @@
             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;
@@ -3418,6 +3520,7 @@
                 });
                 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}"`;
@@ -3431,6 +3534,7 @@
             // 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');
@@ -3479,11 +3583,24 @@
                 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,
@@ -3499,35 +3616,71 @@
         }
         _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');
@@ -3547,6 +3700,7 @@
             }
             if (!meta.disabled) {
                 optionEl.addEventListener('click', (e) => {
+                    e.stopPropagation(); // Prevent duplicate handling by delegation
                     const mouseEvent = e;
                     this._selectOption(meta.index, {
                         shiftKey: mouseEvent.shiftKey,