@nuralyui/select 0.0.4 → 0.1.0

package/select.component.js

@@ -1,209 +1,686 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { LitElement, html, nothing } from 'lit';
-import { property, state, customElement, query } from 'lit/decorators.js';
+import { property, customElement, query } from 'lit/decorators.js';
 import { styles } from './select.style.js';
 import { map } from 'lit/directives/map.js';
-import { OptionSelectionMode, OptionSize, OptionStatus, OptionType } from './select.types.js';
 import { choose } from 'lit/directives/choose.js';
-import { EMPTY_STRING, MULTIPLE_OPTIONS_SEPARATOR } from './select.constant.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-let HySelectComponent = class HySelectComponent extends LitElement {
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+// Import types
+import { SelectType, SelectSize, SelectStatus } from './select.types.js';
+// Import controllers
+import { SelectSelectionController, SelectKeyboardController, SelectDropdownController, SelectFocusController, SelectValidationController, SelectSearchController, SelectEventController } from './controllers/index.js';
+/**
+ * Advanced select component with multiple selection modes, validation, and accessibility features.
+ *
+ * Supports single and multiple selection, custom rendering, validation states, keyboard navigation,
+ * and various display types including default, inline, button, and slot-based configurations.
+ *
+ * @example
+ * ```html
+ * <!-- Basic select -->
+ * <hy-select placeholder="Choose an option">
+ *   <option value="1">Option 1</option>
+ *   <option value="2">Option 2</option>
+ * </hy-select>
+ *
+ * <!-- Multiple selection -->
+ * <hy-select multiple placeholder="Choose multiple options"></hy-select>
+ *
+ * <!-- With validation -->
+ * <hy-select required status="error"></hy-select>
+ *
+ * <!-- Button style -->
+ * <hy-select type="button"></hy-select>
+ *
+ * <!-- With search functionality -->
+ * <hy-select searchable search-placeholder="Search options..."></hy-select>
+ * ```
+ *
+ * @fires nr-change - Selection changed
+ * @fires nr-focus - Component focused
+ * @fires nr-blur - Component blurred
+ * @fires nr-dropdown-open - Dropdown opened
+ * @fires nr-dropdown-close - Dropdown closed
+ * @fires nr-validation - Validation state changed
+ *
+ * @slot label - Select label content
+ * @slot helper-text - Helper text below select
+ * @slot trigger - Custom trigger content (slot type only)
+ *
+ * @cssproperty --select-border-color - Border color
+ * @cssproperty --select-background - Background color
+ * @cssproperty --select-text-color - Text color
+ * @cssproperty --select-focus-color - Focus indicator color
+ * @cssproperty --select-dropdown-shadow - Dropdown shadow
+ * @cssproperty --select-no-options-color - No options message text color
+ * @cssproperty --select-no-options-icon-color - No options icon color
+ * @cssproperty --select-no-options-padding - Padding for no options message
+ * @cssproperty --select-no-options-gap - Gap between icon and text
+ * @cssproperty --select-search-border - Search input border
+ * @cssproperty --select-search-background - Search input background
+ * @cssproperty --select-search-padding - Search input padding
+ */
+let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
-        this.defaultSelected = [];
+        // Temporarily disable dependency validation
+        this.requiredComponents = [];
+        // === Properties ===
+        /** Array of options to display in the select dropdown */
+        this.options = [];
+        /** Default selected values (for initialization) */
+        this.defaultValue = [];
+        /** Placeholder text shown when no option is selected */
         this.placeholder = 'Select an option';
+        /** Disables the select component */
         this.disabled = false;
-        this.type = OptionType.Default;
-        this.selectionMode = OptionSelectionMode.Single;
+        /** Select display type (default, inline, button, slot) */
+        this.type = SelectType.Default;
+        /** Enables multiple option selection */
+        this.multiple = false;
+        /** Controls dropdown visibility */
         this.show = false;
-        this.status = OptionStatus.Default;
-        this.size = OptionSize.Medium;
-        this.selected = [];
-    }
-    updated(_changedProperties) {
-        if (_changedProperties.has('defaultSelected') && JSON.stringify(_changedProperties.get('defaultSelected')) != JSON.stringify(this.defaultSelected)) {
-            let defaultOptions = [];
-            this.defaultSelected.forEach((value) => {
-                const option = this.options.find((option) => option.value == value);
-                if (option)
-                    defaultOptions.push(option);
-            });
-            this.selected = [...defaultOptions];
-        }
+        /** Validation status (default, warning, error, success) */
+        this.status = SelectStatus.Default;
+        /** Select size (small, medium, large) */
+        this.size = SelectSize.Medium;
+        /** Makes the select required for form validation */
+        this.required = false;
+        /** Form field name */
+        this.name = '';
+        /** Current selected value(s) */
+        this.value = '';
+        /** Message to display when no options are available */
+        this.noOptionsMessage = 'No options available';
+        /** Icon to display with the no options message */
+        this.noOptionsIcon = 'circle-info';
+        /** Enable search/filter functionality */
+        this.searchable = false;
+        /** Placeholder text for the search input */
+        this.searchPlaceholder = 'Search options...';
+        /** Current search query */
+        this.searchQuery = '';
+        // === Controller instances ===
+        /** Handles option selection logic */
+        this.selectionController = new SelectSelectionController(this);
+        /** Manages dropdown visibility and positioning */
+        this.dropdownController = new SelectDropdownController(this);
+        /** Handles keyboard navigation */
+        this.keyboardController = new SelectKeyboardController(this, this.selectionController, this.dropdownController);
+        /** Manages focus states */
+        this.focusController = new SelectFocusController(this);
+        /** Handles validation logic */
+        this.validationController = new SelectValidationController(this, this.selectionController);
+        /** Handles search/filter functionality */
+        this.searchController = new SelectSearchController(this);
+        /** Handles all event management */
+        this.eventController = new SelectEventController(this);
+        // === Private Event Handlers ===
+        // Note: Event handling logic has been extracted to SelectEventController
+        // These methods serve as thin wrappers for template bindings
+        /**
+         * Handles clicks on the select trigger element
+         */
+        this.handleTriggerClick = (event) => {
+            this.eventController.handleTriggerClick(event);
+        };
+        /**
+         * Handles clicks on individual options
+         */
+        this.handleOptionClick = (event, option) => {
+            this.eventController.handleOptionClick(event, option);
+        };
+        /**
+         * Handles removal of selected tags in multiple selection mode
+         */
+        this.handleTagRemove = (event, option) => {
+            this.eventController.handleTagRemove(event, option);
+        };
+        /**
+         * Handles the clear all selections button
+         */
+        this.handleClearAll = (event) => {
+            this.eventController.handleClearAll(event);
+        };
+        /**
+         * Handles keyboard navigation and interactions
+         */
+        this.handleKeyDown = (event) => {
+            this.eventController.handleKeyDown(event);
+        };
+        /**
+         * Handles focus events
+         */
+        this.handleFocus = () => {
+            this.eventController.handleFocus();
+        };
+        /**
+         * Handles blur events
+         */
+        this.handleBlur = () => {
+            this.eventController.handleBlur();
+        };
     }
-    toggleOptions() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.show = !this.show;
-            yield this.updateComplete;
-            if (this.show)
-                this.calculateOptionsPosition();
-            else
-                this.initOptionsPosition();
-        });
+    // === Lifecycle methods ===
+    /**
+     * Component connected to DOM - initialize base functionality
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        // Window click listener is setup only when dropdown opens for better performance
     }
-    calculateOptionsPosition() {
-        const wrapperBorderBottomWidth = +getComputedStyle(this.wrapper).borderBottomWidth.split('px')[0];
-        const wrapperBorderTopWidth = +getComputedStyle(this.wrapper).borderTopWidth.split('px')[0];
-        const clientRect = this.optionsElement.getBoundingClientRect();
-        const availableBottomSpace = window.visualViewport.height -
-            clientRect.bottom +
-            clientRect.height -
-            this.wrapper.getBoundingClientRect().height;
-        const availableTopSpace = clientRect.top;
-        if (clientRect.height > availableBottomSpace && availableTopSpace > clientRect.height) {
-            this.optionsElement.style.top = `${-clientRect.height - wrapperBorderTopWidth}px`;
+    /**
+     * Component disconnected from DOM - cleanup event listeners
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Event cleanup is now handled by EventController
+    }
+    /**
+     * First render complete - setup controllers and initialize state
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // Configure dropdown controller with DOM element references
+        if (this.optionsElement && this.wrapper) {
+            this.dropdownController.setElements(this.optionsElement, this.wrapper);
         }
         else {
-            this.optionsElement.style.top = `calc(100% + ${wrapperBorderBottomWidth}px)`;
+            // Retry element setup if DOM isn't ready yet
+            setTimeout(() => {
+                if (this.optionsElement && this.wrapper) {
+                    this.dropdownController.setElements(this.optionsElement, this.wrapper);
+                }
+            }, 100);
+        }
+        // Apply default selection if specified
+        if (this.defaultValue.length > 0) {
+            this.selectionController.initializeFromDefaultValue();
         }
     }
-    initOptionsPosition() {
-        this.optionsElement.style.removeProperty('top');
+    // === Public API Methods ===
+    /**
+     * Gets the currently selected options
+     * @returns Array of selected options
+     */
+    get selectedOptions() {
+        return this.selectionController.getSelectedOptions();
     }
-    selectOption(selectOptionEvent, selectedOption) {
-        selectOptionEvent.stopPropagation();
-        if (this.selectionMode == OptionSelectionMode.Single) {
-            this.selected = this.selected.length && this.selected[0].label == selectedOption.label ? [] : [selectedOption];
-            this.toggleOptions();
-        }
-        else {
-            if (this.selected.includes(selectedOption)) {
-                this.selected = this.selected.filter((previousSelectedOption) => previousSelectedOption.label != selectedOption.label);
-            }
-            else {
-                this.selected = [...this.selected, selectedOption];
-            }
-        }
-        this.dispatchChangeEvent();
+    /**
+     * Gets the first selected option (for single selection mode)
+     * @returns Selected option or undefined if none selected
+     */
+    get selectedOption() {
+        return this.selectionController.getSelectedOption();
     }
-    unselectAll(unselectAllEvent) {
-        unselectAllEvent.stopPropagation();
-        this.selected = [];
-        this.dispatchChangeEvent();
+    /**
+     * Selects an option programmatically
+     * @param option - The option to select
+     */
+    selectOption(option) {
+        this.selectionController.selectOption(option);
     }
-    unselectOne(unselectOneEvent, selectedIndex) {
-        unselectOneEvent.stopPropagation();
-        this.selected = this.selected.filter((_, index) => index != selectedIndex);
-        this.dispatchChangeEvent();
+    /**
+     * Unselects an option programmatically
+     * @param option - The option to unselect
+     */
+    unselectOption(option) {
+        this.selectionController.unselectOption(option);
     }
-    dispatchChangeEvent() {
-        let result = this.selectionMode == OptionSelectionMode.Single ? this.selected[0] : this.selected;
-        this.dispatchEvent(new CustomEvent('changed', { detail: { value: result }, bubbles: true, composed: true }));
+    /**
+     * Clears all current selections
+     */
+    clearSelection() {
+        this.selectionController.clearSelection();
     }
-    onBlur() {
-        this.show = false;
-        this.initOptionsPosition();
+    /**
+     * Checks if a specific option is currently selected
+     * @param option - The option to check
+     * @returns True if the option is selected
+     */
+    isOptionSelected(option) {
+        return this.selectionController.isOptionSelected(option);
+    }
+    /**
+     * Toggles the dropdown visibility
+     */
+    toggleDropdown() {
+        this.dropdownController.toggle();
+    }
+    /**
+     * Opens the dropdown programmatically
+     */
+    openDropdown() {
+        this.dropdownController.open();
+    }
+    /**
+     * Closes the dropdown programmatically
+     */
+    closeDropdown() {
+        this.dropdownController.close();
+    }
+    /**
+     * Focuses the select component
+     */
+    focus() {
+        this.focusController.focus();
+    }
+    /**
+     * Removes focus from the select component
+     */
+    blur() {
+        this.focusController.blur();
+    }
+    /**
+     * Validates the current selection according to component rules
+     * @returns True if valid, false otherwise
+     */
+    validate() {
+        return this.validationController.validate();
+    }
+    /**
+     * Checks if the current selection is valid without showing validation UI
+     * @returns True if valid, false otherwise
+     */
+    checkValidity() {
+        return this.validationController.checkValidity();
+    }
+    /**
+     * Reports the current validation state and shows validation UI if invalid
+     * @returns True if valid, false otherwise
+     */
+    reportValidity() {
+        return this.validationController.reportValidity();
+    }
+    /**
+     * Sets a custom validation message
+     * @param message - Custom validation message (empty string to clear)
+     */
+    setCustomValidity(message) {
+        this.validationController.setCustomValidity(message);
+    }
+    /**
+     * Searches for options with the given query
+     * @param query - Search query string
+     */
+    searchOptions(query) {
+        this.searchController.search(query);
     }
+    /**
+     * Clears the current search query
+     */
+    clearSearch() {
+        this.searchController.clearSearch();
+    }
+    /**
+     * Gets the filtered options based on current search
+     * @returns Array of filtered options
+     */
+    getSearchFilteredOptions() {
+        return this.searchController.getFilteredOptions(this.options);
+    }
+    /**
+     * Gets the current search query
+     * @returns Current search query string
+     */
+    getCurrentSearchQuery() {
+        return this.searchController.searchQuery;
+    }
+    /**
+     * Manually trigger setup of global event listeners
+     */
+    setupGlobalEventListeners() {
+        this.eventController.setupEventListeners();
+    }
+    /**
+     * Manually trigger removal of global event listeners
+     */
+    removeGlobalEventListeners() {
+        this.eventController.removeEventListeners();
+    }
+    /**
+     * Filters options based on search query
+     */
+    getFilteredOptions() {
+        return this.searchController.getFilteredOptions(this.options);
+    }
+    ;
+    // === Event Listener Management ===
+    /**
+     * Sets up global event listeners (called when dropdown opens)
+     */
+    setupEventListeners() {
+        this.eventController.setupEventListeners();
+    }
+    /**
+     * Removes global event listeners (called on disconnect or dropdown close)
+     */
+    removeEventListeners() {
+        this.eventController.removeEventListeners();
+    }
+    // === Main Render Method ===
+    /**
+     * Main render method that delegates to specific type renderers
+     */
     render() {
+        return html `${choose(this.type, [
+            [SelectType.Default, () => this.renderDefault()],
+            [SelectType.Inline, () => this.renderInline()],
+            [SelectType.Button, () => this.renderButton()],
+            [SelectType.Slot, () => this.renderSlot()],
+        ])}`;
+    }
+    // === Type-Specific Render Methods ===
+    /**
+     * Renders the default select appearance with full features
+     */
+    renderDefault() {
+        const selectedOptions = this.selectedOptions;
+        const validationClasses = this.validationController.getValidationClasses();
         return html `
       <slot name="label"></slot>
-      <div class="wrapper" tabindex="0" @click="${!this.disabled ? this.toggleOptions : nothing}" @blur=${this.onBlur}>
+      <div 
+        class="${classMap(Object.assign({ 'wrapper': true }, validationClasses))}"
+        tabindex="0"
+        role="combobox"
+        aria-expanded="${this.show}"
+        aria-haspopup="listbox"
+        aria-labelledby="select-label"
+
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleKeyDown}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
         <div class="select">
           <div class="select-trigger">
-            ${choose(this.selectionMode, [
-            [
-                OptionSelectionMode.Single,
-                () => html `${this.selected.length ? this.selected[0].label : this.placeholder}`,
-            ],
-            [
-                OptionSelectionMode.Multiple,
-                () => html `${this.selected.length
-                    ? map(this.selected, (option, index) => html `<span class="label">
-                              <hy-icon
-                                name="remove"
-                                id="unselect-one"
-                                @click=${(e) => this.unselectOne(e, index)}
-                              ></hy-icon
-                              >${option.label}</span
-                            >${this.selected.length - 1 != index ? MULTIPLE_OPTIONS_SEPARATOR : EMPTY_STRING}`)
-                    : this.placeholder}`,
-            ],
-        ])}
+            ${this.renderSelectedContent(selectedOptions)}
           </div>
+          
           <div class="icons-container">
-            ${choose(this.status, [
-            [OptionStatus.Default, () => undefined],
-            [OptionStatus.Warning, () => html `<hy-icon name="warning" id="warning-icon"></hy-icon>`],
-            [OptionStatus.Error, () => html `<hy-icon name="exclamation-circle" id="error-icon"></hy-icon>`],
-        ])}
-            ${this.selected.length
-            ? html `<hy-icon
-                  name="remove"
-                  id="unselect-multiple"
-                  @click=${(e) => this.unselectAll(e)}
-                ></hy-icon>`
-            : nothing}
-            <hy-icon name="angle-down" id="arrow-icon"></hy-icon>
+            ${this.renderStatusIcon()}
+            ${this.renderClearButton(selectedOptions)}
+            <hy-icon 
+              name="angle-down" 
+              class="arrow-icon"
+              aria-hidden="true"
+            ></hy-icon>
           </div>
-          <div class="options">
-            ${map(this.options, (option) => {
-            var _a;
-            return html `<div class="option" @click="${(e) => this.selectOption(e, option)}">
-                  ${this.selected.includes(option) ? html `<hy-icon name="check" id="check-icon"></hy-icon>` : nothing}
-                  <span class="option-text" 
-                  style=${styleMap(Object.assign({}, (_a = option.additionalStyle) !== null && _a !== void 0 ? _a : []))}
-                  >${option.label}</span>
-                </div>`;
-        })}
+          
+          <div 
+            class="options"
+            role="listbox"
+            aria-multiselectable="${this.multiple}"
+          >
+            ${this.searchable ? this.renderSearchInput() : nothing}
+            ${this.renderSelectOptions()}
           </div>
         </div>
       </div>
+      
+      ${this.renderValidationMessage()}
       <slot name="helper-text"></slot>
     `;
     }
+    /**
+     * Renders inline select with integrated label and helper text
+     */
+    renderInline() {
+        return html `
+      <slot name="label"></slot>
+      ${this.renderDefault()}
+      <slot name="helper-text"></slot>
+    `;
+    }
+    /**
+     * Renders select as a button-style component
+     */
+    renderButton() {
+        const selectedOptions = this.selectedOptions;
+        return html `
+      <button
+        class="select-button"
+        ?disabled=${this.disabled}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleKeyDown}
+      >
+        ${selectedOptions.length > 0 ? selectedOptions[0].label : this.placeholder}
+        <hy-icon name="angle-down" class="arrow-icon"></hy-icon>
+      </button>
+      
+      <div class="options" role="listbox">
+        ${this.searchable ? this.renderSearchInput() : nothing}
+        ${this.renderSelectOptions()}
+      </div>
+    `;
+    }
+    /**
+     * Renders select with custom trigger content via slots
+     */
+    renderSlot() {
+        return html `
+      <slot name="trigger" @click=${this.handleTriggerClick}></slot>
+      <div class="options" role="listbox">
+        ${this.searchable ? this.renderSearchInput() : nothing}
+        ${this.renderSelectOptions()}
+      </div>
+    `;
+    }
+    // === Helper Render Methods ===
+    /**
+     * Renders the selected content in the trigger area
+     */
+    renderSelectedContent(selectedOptions) {
+        if (selectedOptions.length === 0) {
+            return html `<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`;
+        }
+        if (this.multiple) {
+            return map(selectedOptions, (option) => html `
+        <span class="tag">
+          <span class="tag-label">${option.label}</span>
+          <hy-icon 
+            name="remove"
+            class="tag-close"
+            @click=${(e) => this.handleTagRemove(e, option)}
+            aria-label="Remove ${option.label}"
+          ></hy-icon>
+        </span>
+      `);
+        }
+        else {
+            return html `${selectedOptions[0].label}`;
+        }
+    }
+    /**
+     * Renders status/validation icons based on current status
+     */
+    renderStatusIcon() {
+        switch (this.status) {
+            case SelectStatus.Warning:
+                return html `<hy-icon name="warning" class="status-icon warning"></hy-icon>`;
+            case SelectStatus.Error:
+                return html `<hy-icon name="exclamation-circle" class="status-icon error"></hy-icon>`;
+            case SelectStatus.Success:
+                return html `<hy-icon name="check-circle" class="status-icon success"></hy-icon>`;
+            default:
+                return nothing;
+        }
+    }
+    /**
+     * Renders the clear all selections button when applicable
+     */
+    renderClearButton(selectedOptions) {
+        if (selectedOptions.length === 0 || this.disabled) {
+            return nothing;
+        }
+        return html `
+      <hy-icon
+        name="remove"
+        class="clear-icon"
+        @click=${this.handleClearAll}
+        aria-label="Clear selection"
+        tabindex="-1"
+      ></hy-icon>
+    `;
+    }
+    /**
+     * Renders all available options in the dropdown
+     */
+    renderSelectOptions() {
+        const filteredOptions = this.getFilteredOptions();
+        // Show "no options" message when no options are available (original array empty)
+        if (!this.options || this.options.length === 0) {
+            return html `
+        <div class="no-options" role="option" aria-disabled="true">
+          <div class="no-options-content">
+            <hy-icon 
+              name="${this.noOptionsIcon}" 
+              class="no-options-icon"
+              aria-hidden="true">
+            </hy-icon>
+            <span class="no-options-text">${this.noOptionsMessage}</span>
+          </div>
+        </div>
+      `;
+        }
+        // Show "no results" message when search returns no results
+        if (this.searchController.hasNoResults(this.options)) {
+            return this.searchController.renderNoResults();
+        }
+        // Cache the focused option to avoid multiple controller accesses
+        const focusedOption = this.keyboardController.focusedOption;
+        return map(filteredOptions, (option) => {
+            const isSelected = this.isOptionSelected(option);
+            const isFocused = focusedOption && focusedOption.value === option.value;
+            return html `
+        <div
+          class="${classMap({
+                'option': true,
+                'selected': isSelected,
+                'focused': isFocused,
+                'disabled': Boolean(option.disabled)
+            })}"
+          role="option"
+          aria-selected="${isSelected}"
+          aria-disabled="${Boolean(option.disabled)}"
+          data-value="${option.value}"
+          @click=${(e) => this.handleOptionClick(e, option)}
+          style=${styleMap(option.style ? { style: option.style } : {})}
+          title="${option.title || ''}"
+        >
+          <div class="option-content">
+            ${option.icon ? html `<hy-icon name="${option.icon}" class="option-icon"></hy-icon>` : nothing}
+            <div class="option-text">
+              ${option.htmlContent ? html `<div .innerHTML=${option.htmlContent}></div>` : option.label}
+              ${option.description ? html `<div class="option-description">${option.description}</div>` : nothing}
+            </div>
+          </div>
+          
+          ${isSelected ? html `<hy-icon name="check" class="check-icon" aria-hidden="true"></hy-icon>` : nothing}
+          
+          ${option.state && option.message ? html `
+            <div class="option-message ${option.state}">
+              <hy-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}"></hy-icon>
+              <span>${option.message}</span>
+            </div>
+          ` : nothing}
+        </div>
+      `;
+        });
+    }
+    /**
+     * Renders the search input when searchable is enabled
+     */
+    renderSearchInput() {
+        return this.searchController.renderSearchInput();
+    }
+    /**
+     * Renders validation message when present
+     */
+    renderValidationMessage() {
+        const validationMessage = this.validationController.validationMessage;
+        if (!validationMessage)
+            return nothing;
+        return html `
+      <div class="validation-message ${this.status}" id="validation-message">
+        ${validationMessage}
+      </div>
+    `;
+    }
 };
 HySelectComponent.styles = styles;
 __decorate([
-    property()
+    property({ type: Array })
 ], HySelectComponent.prototype, "options", void 0);
 __decorate([
-    property()
-], HySelectComponent.prototype, "defaultSelected", void 0);
+    property({ type: Array, attribute: 'default-value' })
+], HySelectComponent.prototype, "defaultValue", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], HySelectComponent.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], HySelectComponent.prototype, "disabled", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ type: String, reflect: true })
 ], HySelectComponent.prototype, "type", void 0);
 __decorate([
-    property()
-], HySelectComponent.prototype, "selectionMode", void 0);
+    property({ type: Boolean, attribute: 'multiple' })
+], HySelectComponent.prototype, "multiple", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], HySelectComponent.prototype, "show", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ type: String, reflect: true })
 ], HySelectComponent.prototype, "status", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ type: String, reflect: true })
 ], HySelectComponent.prototype, "size", void 0);
 __decorate([
-    state()
-], HySelectComponent.prototype, "selected", void 0);
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], HySelectComponent.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], HySelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'no-options-message' })
+], HySelectComponent.prototype, "noOptionsMessage", void 0);
+__decorate([
+    property({ type: String, attribute: 'no-options-icon' })
+], HySelectComponent.prototype, "noOptionsIcon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "searchable", void 0);
+__decorate([
+    property({ type: String, attribute: 'search-placeholder' })
+], HySelectComponent.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: String })
+], HySelectComponent.prototype, "searchQuery", void 0);
 __decorate([
     query('.options')
 ], HySelectComponent.prototype, "optionsElement", void 0);
 __decorate([
     query('.wrapper')
 ], HySelectComponent.prototype, "wrapper", void 0);
+__decorate([
+    query('.search-input')
+], HySelectComponent.prototype, "searchInput", void 0);
 HySelectComponent = __decorate([
     customElement('hy-select')
 ], HySelectComponent);