secure-ui-components 0.2.3 → 0.2.4

package/dist/components/secure-select/secure-select.js

@@ -35,592 +35,4 @@
  *
  * @module secure-select
  * @license MIT
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-/**
- * Secure Select Web Component
- *
- * Provides a security-hardened select dropdown with progressive enhancement.
- * The component works as a standard form select without JavaScript and
- * enhances with security features when JavaScript is available.
- *
- * @extends SecureBaseComponent
- */
-export class SecureSelect extends SecureBaseComponent {
-    /**
-     * Select element reference
-     * @private
-     */
-    #selectElement = null;
-    /**
-     * Label element reference
-     * @private
-     */
-    #labelElement = null;
-    /**
-     * Error container element reference
-     * @private
-     */
-    #errorContainer = null;
-    /**
-     * Unique ID for this select instance
-     * @private
-     */
-    #instanceId = `secure-select-${Math.random().toString(36).substring(2, 11)}`;
-    /**
-     * Valid option values
-     * @private
-     */
-    #validOptions = new Set();
-    /**
-     * Flag to track if options have been transferred from light DOM
-     * @private
-     */
-    #optionsTransferred = false;
-    /**
-     * Whether this is a multi-select instance
-     * @private
-     */
-    #isMultiple = false;
-    /**
-     * Observed attributes for this component
-     *
-     * @static
-     */
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'name',
-            'label',
-            'required',
-            'multiple',
-            'size',
-            'value'
-        ];
-    }
-    /**
-     * Constructor
-     */
-    constructor() {
-        super();
-    }
-    /**
-     * Render the select component
-     *
-     * Security Note: We use a native <select> element wrapped in our web component
-     * to ensure progressive enhancement. The native select works without JavaScript,
-     * and we enhance it with security features when JS is available.
-     *
-     * @protected
-     */
-    render() {
-        const fragment = document.createDocumentFragment();
-        const container = document.createElement('div');
-        container.className = 'select-container';
-        container.setAttribute('part', 'container');
-        // Check if this is a multi-select
-        this.#isMultiple = this.hasAttribute('multiple');
-        // Create label
-        const label = this.getAttribute('label');
-        if (label) {
-            this.#labelElement = document.createElement('label');
-            this.#labelElement.htmlFor = this.#instanceId;
-            this.#labelElement.textContent = this.sanitizeValue(label);
-            this.#labelElement.setAttribute('part', 'label');
-            container.appendChild(this.#labelElement);
-        }
-        // Create select wrapper for progressive enhancement
-        const selectWrapper = document.createElement('div');
-        selectWrapper.className = 'select-wrapper';
-        selectWrapper.setAttribute('part', 'wrapper');
-        // Create the actual select element
-        this.#selectElement = document.createElement('select');
-        this.#selectElement.id = this.#instanceId;
-        this.#selectElement.className = 'select-field';
-        this.#selectElement.setAttribute('part', 'select');
-        // Apply attributes from web component to native select
-        this.#applySelectAttributes();
-        // Set up event listeners
-        this.#attachEventListeners();
-        // Defer transferring options to allow light DOM to be fully parsed
-        // This handles the case where the component is created before its children
-        queueMicrotask(() => {
-            this.#transferOptions();
-        });
-        selectWrapper.appendChild(this.#selectElement);
-        container.appendChild(selectWrapper);
-        // Create error container
-        // role="alert" already implies aria-live="assertive" — do not override with polite
-        this.#errorContainer = document.createElement('div');
-        this.#errorContainer.className = 'error-container hidden';
-        this.#errorContainer.setAttribute('role', 'alert');
-        this.#errorContainer.setAttribute('part', 'error');
-        this.#errorContainer.id = `${this.#instanceId}-error`;
-        container.appendChild(this.#errorContainer);
-        // Add component styles (CSP-compliant via adoptedStyleSheets)
-        this.addComponentStyles(this.#getComponentStyles());
-        fragment.appendChild(container);
-        return fragment;
-    }
-    /**
-     * Apply attributes from the web component to the native select
-     *
-     * Security Note: This is where we enforce tier-specific security controls
-     * like validation rules.
-     *
-     * @private
-     */
-    #applySelectAttributes() {
-        const config = this.config;
-        // Name attribute (required for form submission)
-        const name = this.getAttribute('name');
-        if (name) {
-            this.#selectElement.name = this.sanitizeValue(name);
-        }
-        // Accessible name fallback when no visible label is provided
-        if (!this.getAttribute('label') && name) {
-            this.#selectElement.setAttribute('aria-label', this.sanitizeValue(name));
-        }
-        // Link select to its error container for screen readers
-        this.#selectElement.setAttribute('aria-describedby', `${this.#instanceId}-error`);
-        // Required attribute
-        if (this.hasAttribute('required') || config.validation.required) {
-            this.#selectElement.required = true;
-            this.#selectElement.setAttribute('aria-required', 'true');
-        }
-        // Multiple selection
-        if (this.hasAttribute('multiple')) {
-            this.#selectElement.multiple = true;
-        }
-        // Size attribute
-        const size = this.getAttribute('size');
-        if (size) {
-            this.#selectElement.size = parseInt(size, 10);
-        }
-        // Disabled state
-        if (this.hasAttribute('disabled')) {
-            this.#selectElement.disabled = true;
-        }
-        // Autocomplete control
-        if (!config.storage.allowAutocomplete) {
-            this.#selectElement.autocomplete = 'off';
-        }
-    }
-    /**
-     * Transfer option elements from light DOM to select element
-     *
-     * Security Note: We sanitize all option values and text to prevent XSS
-     *
-     * @private
-     */
-    #transferOptions() {
-        // Only transfer once to avoid clearing programmatically-added options
-        if (this.#optionsTransferred)
-            return;
-        this.#optionsTransferred = true;
-        // Get option elements from light DOM (original content)
-        const options = Array.from(this.querySelectorAll('option'));
-        // If no light DOM options, nothing to transfer
-        if (options.length === 0)
-            return;
-        // Track selected values (supports multiple selected attributes)
-        const selectedValues = [];
-        // Transfer each option to the select element
-        options.forEach((option) => {
-            const newOption = document.createElement('option');
-            // Sanitize value
-            const value = option.getAttribute('value') || '';
-            newOption.value = this.sanitizeValue(value);
-            this.#validOptions.add(newOption.value);
-            // Sanitize text content
-            newOption.textContent = this.sanitizeValue(option.textContent || '');
-            // Copy other attributes
-            if (option.hasAttribute('selected')) {
-                newOption.selected = true;
-                selectedValues.push(newOption.value);
-            }
-            if (option.hasAttribute('disabled')) {
-                newOption.disabled = true;
-            }
-            this.#selectElement.appendChild(newOption);
-        });
-        // Set initial value - attribute takes precedence over selected option
-        if (!this.#isMultiple) {
-            const initialValue = this.getAttribute('value');
-            if (initialValue) {
-                this.#selectElement.value = initialValue;
-            }
-            else if (selectedValues.length > 0) {
-                this.#selectElement.value = selectedValues[0];
-            }
-        }
-        // For multiple, the selected attributes on individual options already applied
-    }
-    /**
-     * Attach event listeners to the select
-     *
-     * @private
-     */
-    #attachEventListeners() {
-        // Focus event - audit logging + telemetry
-        this.#selectElement.addEventListener('focus', () => {
-            this.recordTelemetryFocus();
-            this.audit('select_focused', {
-                name: this.#selectElement.name
-            });
-        });
-        // Change event - validation, audit logging + telemetry
-        this.#selectElement.addEventListener('change', (e) => {
-            this.recordTelemetryInput(e);
-            this.#handleChange(e);
-        });
-        // Blur event - final validation + telemetry
-        this.#selectElement.addEventListener('blur', () => {
-            this.recordTelemetryBlur();
-            this.#validateAndShowErrors();
-            this.audit('select_blurred', {
-                name: this.#selectElement.name,
-                hasValue: this.#isMultiple
-                    ? this.#selectElement.selectedOptions.length > 0
-                    : this.#selectElement.value.length > 0
-            });
-        });
-    }
-    /**
-     * Handle change events
-     *
-     * Security Note: We validate that the selected value is in the list of valid options
-     * to prevent value injection attacks.
-     *
-     * @private
-     */
-    #handleChange(_event) {
-        if (this.#isMultiple) {
-            // Multi-select: validate all selected values
-            const selectedValues = Array.from(this.#selectElement.selectedOptions).map(opt => opt.value);
-            const invalidValues = selectedValues.filter(v => v && !this.#validOptions.has(v));
-            if (invalidValues.length > 0) {
-                this.#showError('Invalid option selected');
-                this.audit('invalid_option_detected', {
-                    name: this.#selectElement.name,
-                    attemptedValues: invalidValues
-                });
-                return;
-            }
-            // Clear previous errors
-            this.#clearErrors();
-            // Log the change
-            this.audit('select_changed', {
-                name: this.#selectElement.name,
-                values: selectedValues
-            });
-            // Dispatch custom event for parent forms
-            this.dispatchEvent(new CustomEvent('secure-select', {
-                detail: {
-                    name: this.#selectElement.name,
-                    value: selectedValues,
-                    tier: this.securityTier
-                },
-                bubbles: true,
-                composed: true
-            }));
-        }
-        else {
-            // Single select: validate the selected value
-            const selectedValue = this.#selectElement.value;
-            if (selectedValue && !this.#validOptions.has(selectedValue)) {
-                this.#showError('Invalid option selected');
-                this.audit('invalid_option_detected', {
-                    name: this.#selectElement.name,
-                    attemptedValue: selectedValue
-                });
-                // Reset to empty value
-                this.#selectElement.value = '';
-                return;
-            }
-            // Clear previous errors
-            this.#clearErrors();
-            // Log the change
-            this.audit('select_changed', {
-                name: this.#selectElement.name,
-                value: selectedValue
-            });
-            // Dispatch custom event for parent forms
-            this.dispatchEvent(new CustomEvent('secure-select', {
-                detail: {
-                    name: this.#selectElement.name,
-                    value: selectedValue,
-                    tier: this.securityTier
-                },
-                bubbles: true,
-                composed: true
-            }));
-        }
-    }
-    /**
-     * Validate the select and show error messages
-     *
-     * @private
-     */
-    #validateAndShowErrors() {
-        // Check rate limit first
-        const rateLimitCheck = this.checkRateLimit();
-        if (!rateLimitCheck.allowed) {
-            this.#showError(`Too many attempts. Please wait ${Math.ceil(rateLimitCheck.retryAfter / 1000)} seconds.`);
-            return;
-        }
-        const required = this.hasAttribute('required') || this.config.validation.required;
-        if (this.#isMultiple) {
-            // Multi-select: check if at least one option is selected
-            const selectedValues = Array.from(this.#selectElement.selectedOptions)
-                .map(opt => opt.value)
-                .filter(v => v !== '');
-            if (required && selectedValues.length === 0) {
-                this.#showError('Please select at least one option');
-                return;
-            }
-            // Validate all selected values are in valid options
-            const invalidValues = selectedValues.filter(v => !this.#validOptions.has(v));
-            if (invalidValues.length > 0) {
-                this.#showError('Invalid option selected');
-                return;
-            }
-        }
-        else {
-            // Single select: check required and valid option
-            if (required && !this.#selectElement.value) {
-                this.#showError('Please select an option');
-                return;
-            }
-            const selectedValue = this.#selectElement.value;
-            if (selectedValue && !this.#validOptions.has(selectedValue)) {
-                this.#showError('Invalid option selected');
-                return;
-            }
-        }
-    }
-    /**
-     * Show error message
-     *
-     * @private
-     */
-    #showError(message) {
-        this.#errorContainer.textContent = message;
-        // Force reflow so browser registers the hidden state with content,
-        // then remove hidden to trigger the CSS transition
-        void this.#errorContainer.offsetHeight;
-        this.#errorContainer.classList.remove('hidden');
-        this.#selectElement.classList.add('error');
-        this.#selectElement.setAttribute('aria-invalid', 'true');
-    }
-    /**
-     * Clear error messages
-     *
-     * @private
-     */
-    #clearErrors() {
-        // Start the hide animation first, clear text only after transition ends
-        this.#errorContainer.classList.add('hidden');
-        this.#errorContainer.addEventListener('transitionend', () => {
-            if (this.#errorContainer.classList.contains('hidden')) {
-                this.#errorContainer.textContent = '';
-            }
-        }, { once: true });
-        this.#selectElement.classList.remove('error');
-        this.#selectElement.removeAttribute('aria-invalid');
-    }
-    /**
-     * Get component-specific styles
-     *
-     * @private
-     */
-    #getComponentStyles() {
-        return new URL('./secure-select.css', import.meta.url).href;
-    }
-    /**
-     * Handle attribute changes
-     *
-     * @protected
-     */
-    handleAttributeChange(name, _oldValue, newValue) {
-        if (!this.#selectElement)
-            return;
-        switch (name) {
-            case 'disabled':
-                this.#selectElement.disabled = this.hasAttribute('disabled');
-                break;
-            case 'value':
-                if (newValue !== this.#selectElement.value) {
-                    this.#selectElement.value = newValue || '';
-                }
-                break;
-        }
-    }
-    /**
-     * Get the current value
-     *
-     * @public
-     */
-    get value() {
-        if (!this.#selectElement)
-            return '';
-        // Multi-select: return comma-separated selected values
-        if (this.#isMultiple) {
-            return Array.from(this.#selectElement.selectedOptions)
-                .map(opt => opt.value)
-                .filter(v => v !== '')
-                .join(', ');
-        }
-        return this.#selectElement.value;
-    }
-    /**
-     * Set the value
-     *
-     * @public
-     */
-    set value(value) {
-        if (!this.#selectElement)
-            return;
-        if (this.#isMultiple) {
-            // Multi-select: accept comma-separated values
-            const values = value.split(',').map(v => v.trim()).filter(v => v !== '');
-            // Deselect all first
-            Array.from(this.#selectElement.options).forEach(opt => { opt.selected = false; });
-            // Select matching valid options
-            values.forEach(v => {
-                if (this.#validOptions.has(v)) {
-                    const opt = Array.from(this.#selectElement.options).find(o => o.value === v);
-                    if (opt)
-                        opt.selected = true;
-                }
-            });
-        }
-        else {
-            if (this.#validOptions.has(value)) {
-                this.#selectElement.value = value;
-            }
-        }
-    }
-    /**
-     * Get the select name
-     *
-     * @public
-     */
-    get name() {
-        return this.#selectElement ? this.#selectElement.name : '';
-    }
-    /**
-     * Get selected options (for multiple select)
-     *
-     * @public
-     */
-    get selectedOptions() {
-        if (!this.#selectElement)
-            return [];
-        return Array.from(this.#selectElement.selectedOptions).map(opt => opt.value);
-    }
-    /**
-     * Check if the select is valid
-     *
-     * @public
-     */
-    get valid() {
-        const required = this.hasAttribute('required') || this.config.validation.required;
-        if (this.#isMultiple) {
-            const selectedValues = Array.from(this.#selectElement.selectedOptions)
-                .map(opt => opt.value)
-                .filter(v => v !== '');
-            if (required && selectedValues.length === 0) {
-                return false;
-            }
-            // All selected values must be valid
-            return selectedValues.every(v => this.#validOptions.has(v));
-        }
-        // Single select
-        if (required && !this.#selectElement.value) {
-            return false;
-        }
-        const selectedValue = this.#selectElement.value;
-        if (selectedValue && !this.#validOptions.has(selectedValue)) {
-            return false;
-        }
-        return true;
-    }
-    /**
-     * Focus the select
-     *
-     * @public
-     */
-    focus() {
-        if (this.#selectElement) {
-            this.#selectElement.focus();
-        }
-    }
-    /**
-     * Blur the select
-     *
-     * @public
-     */
-    blur() {
-        if (this.#selectElement) {
-            this.#selectElement.blur();
-        }
-    }
-    /**
-     * Add an option programmatically
-     *
-     * @public
-     */
-    addOption(value, text, selected = false) {
-        if (!this.#selectElement)
-            return;
-        const option = document.createElement('option');
-        option.value = this.sanitizeValue(value);
-        option.textContent = this.sanitizeValue(text);
-        option.selected = selected;
-        this.#validOptions.add(option.value);
-        this.#selectElement.appendChild(option);
-    }
-    /**
-     * Remove an option by value
-     *
-     * @public
-     */
-    removeOption(value) {
-        if (!this.#selectElement)
-            return;
-        const options = Array.from(this.#selectElement.options);
-        const option = options.find(opt => opt.value === value);
-        if (option) {
-            this.#selectElement.removeChild(option);
-            this.#validOptions.delete(value);
-        }
-    }
-    /**
-     * Clear all options
-     *
-     * @public
-     */
-    clearOptions() {
-        if (!this.#selectElement)
-            return;
-        this.#selectElement.innerHTML = '';
-        this.#validOptions.clear();
-    }
-    /**
-     * Cleanup on disconnect
-     *
-     * Note: We intentionally do NOT clear #validOptions here.
-     * When <secure-select> is inside a <secure-form>, the form moves its children
-     * into a <form> element, which triggers disconnect/reconnect. Clearing
-     * #validOptions on disconnect would leave the set empty after reconnect,
-     * causing all subsequent selections to be rejected as "invalid option".
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
-}
-// Define the custom element
-customElements.define('secure-select', SecureSelect);
-export default SecureSelect;
-//# sourceMappingURL=secure-select.js.map
+ */import{SecureBaseComponent as n}from"../../core/base-component.js";class a extends n{#e=null;#a=null;#t=null;#n=`secure-select-${Math.random().toString(36).substring(2,11)}`;#i=new Set;#l=!1;#s=!1;static get observedAttributes(){return[...super.observedAttributes,"name","label","required","multiple","size","value"]}constructor(){super()}render(){const t=document.createDocumentFragment(),i=document.createElement("div");i.className="select-container",i.setAttribute("part","container"),this.#s=this.hasAttribute("multiple");const e=this.getAttribute("label");e&&(this.#a=document.createElement("label"),this.#a.htmlFor=this.#n,this.#a.textContent=this.sanitizeValue(e),this.#a.setAttribute("part","label"),i.appendChild(this.#a));const s=document.createElement("div");return s.className="select-wrapper",s.setAttribute("part","wrapper"),this.#e=document.createElement("select"),this.#e.id=this.#n,this.#e.className="select-field",this.#e.setAttribute("part","select"),this.#u(),this.#d(),queueMicrotask(()=>{this.#o()}),s.appendChild(this.#e),i.appendChild(s),this.#t=document.createElement("div"),this.#t.className="error-container hidden",this.#t.setAttribute("role","alert"),this.#t.setAttribute("part","error"),this.#t.id=`${this.#n}-error`,i.appendChild(this.#t),this.addComponentStyles(this.#f()),t.appendChild(i),t}#u(){const t=this.config,i=this.getAttribute("name");i&&(this.#e.name=this.sanitizeValue(i)),!this.getAttribute("label")&&i&&this.#e.setAttribute("aria-label",this.sanitizeValue(i)),this.#e.setAttribute("aria-describedby",`${this.#n}-error`),(this.hasAttribute("required")||t.validation.required)&&(this.#e.required=!0,this.#e.setAttribute("aria-required","true")),this.hasAttribute("multiple")&&(this.#e.multiple=!0);const e=this.getAttribute("size");e&&(this.#e.size=parseInt(e,10)),this.hasAttribute("disabled")&&(this.#e.disabled=!0),t.storage.allowAutocomplete||(this.#e.autocomplete="off")}#o(){if(this.#l)return;this.#l=!0;const t=Array.from(this.querySelectorAll("option"));if(t.length===0)return;const i=[];if(t.forEach(e=>{const s=document.createElement("option"),r=e.getAttribute("value")||"";s.value=this.sanitizeValue(r),this.#i.add(s.value),s.textContent=this.sanitizeValue(e.textContent||""),e.hasAttribute("selected")&&(s.selected=!0,i.push(s.value)),e.hasAttribute("disabled")&&(s.disabled=!0),this.#e.appendChild(s)}),!this.#s){const e=this.getAttribute("value");e?this.#e.value=e:i.length>0&&(this.#e.value=i[0])}}#d(){this.#e.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.audit("select_focused",{name:this.#e.name})}),this.#e.addEventListener("change",t=>{this.recordTelemetryInput(t),this.#c(t)}),this.#e.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#m(),this.audit("select_blurred",{name:this.#e.name,hasValue:this.#s?this.#e.selectedOptions.length>0:this.#e.value.length>0})})}#c(t){if(this.#s){const i=Array.from(this.#e.selectedOptions).map(s=>s.value),e=i.filter(s=>s&&!this.#i.has(s));if(e.length>0){this.#r("Invalid option selected"),this.audit("invalid_option_detected",{name:this.#e.name,attemptedValues:e});return}this.#h(),this.audit("select_changed",{name:this.#e.name,values:i}),this.dispatchEvent(new CustomEvent("secure-select",{detail:{name:this.#e.name,value:i,tier:this.securityTier},bubbles:!0,composed:!0}))}else{const i=this.#e.value;if(i&&!this.#i.has(i)){this.#r("Invalid option selected"),this.audit("invalid_option_detected",{name:this.#e.name,attemptedValue:i}),this.#e.value="";return}this.#h(),this.audit("select_changed",{name:this.#e.name,value:i}),this.dispatchEvent(new CustomEvent("secure-select",{detail:{name:this.#e.name,value:i,tier:this.securityTier},bubbles:!0,composed:!0}))}}#m(){const t=this.checkRateLimit();if(!t.allowed){this.#r(`Too many attempts. Please wait ${Math.ceil(t.retryAfter/1e3)} seconds.`);return}const i=this.hasAttribute("required")||this.config.validation.required;if(this.#s){const e=Array.from(this.#e.selectedOptions).map(r=>r.value).filter(r=>r!=="");if(i&&e.length===0){this.#r("Please select at least one option");return}if(e.filter(r=>!this.#i.has(r)).length>0){this.#r("Invalid option selected");return}}else{if(i&&!this.#e.value){this.#r("Please select an option");return}const e=this.#e.value;if(e&&!this.#i.has(e)){this.#r("Invalid option selected");return}}}#r(t){this.#t.textContent=t,this.#t.offsetHeight,this.#t.classList.remove("hidden"),this.#e.classList.add("error"),this.#e.setAttribute("aria-invalid","true")}#h(){this.#t.classList.add("hidden"),this.#t.addEventListener("transitionend",()=>{this.#t.classList.contains("hidden")&&(this.#t.textContent="")},{once:!0}),this.#e.classList.remove("error"),this.#e.removeAttribute("aria-invalid")}#f(){return new URL("./secure-select.css",import.meta.url).href}handleAttributeChange(t,i,e){if(this.#e)switch(t){case"disabled":this.#e.disabled=this.hasAttribute("disabled");break;case"value":e!==this.#e.value&&(this.#e.value=e||"");break}}get value(){return this.#e?this.#s?Array.from(this.#e.selectedOptions).map(t=>t.value).filter(t=>t!=="").join(", "):this.#e.value:""}set value(t){if(this.#e)if(this.#s){const i=t.split(",").map(e=>e.trim()).filter(e=>e!=="");Array.from(this.#e.options).forEach(e=>{e.selected=!1}),i.forEach(e=>{if(this.#i.has(e)){const s=Array.from(this.#e.options).find(r=>r.value===e);s&&(s.selected=!0)}})}else this.#i.has(t)&&(this.#e.value=t)}get name(){return this.#e?this.#e.name:""}get selectedOptions(){return this.#e?Array.from(this.#e.selectedOptions).map(t=>t.value):[]}get valid(){const t=this.hasAttribute("required")||this.config.validation.required;if(this.#s){const e=Array.from(this.#e.selectedOptions).map(s=>s.value).filter(s=>s!=="");return t&&e.length===0?!1:e.every(s=>this.#i.has(s))}if(t&&!this.#e.value)return!1;const i=this.#e.value;return!(i&&!this.#i.has(i))}focus(){this.#e&&this.#e.focus()}blur(){this.#e&&this.#e.blur()}addOption(t,i,e=!1){if(!this.#e)return;const s=document.createElement("option");s.value=this.sanitizeValue(t),s.textContent=this.sanitizeValue(i),s.selected=e,this.#i.add(s.value),this.#e.appendChild(s)}removeOption(t){if(!this.#e)return;const e=Array.from(this.#e.options).find(s=>s.value===t);e&&(this.#e.removeChild(e),this.#i.delete(t))}clearOptions(){this.#e&&(this.#e.innerHTML="",this.#i.clear())}disconnectedCallback(){super.disconnectedCallback()}}customElements.define("secure-select",a);var u=a;export{a as SecureSelect,u as default};