fancy-ui-ts 1.1.1 → 1.3.0

package/dist/index.css

@@ -94,13 +94,13 @@
   --fc-option-bg: var(--fc-white);
   --fc-option-bg-disabled: var(--fc-gray-50);
   --fc-option-bg-hover: var(--fc-gray-100);
-  --fc-option-bg-selected: var(--fc-primary-200);
   --fc-option-bg-active: var(--fc-primary-100);
   --fc-option-fg: var(--fc-gray-900);
   --fc-option-fg-disabled: var(--fc-gray-300);
-  --fc-option-fg-selected: var(--fc-primary-700);
   --fc-option-padding: var(--fc-space-3);
   --fc-option-radius: var(--fc-radius-md);
+  --fc-option-icon-width: calc(var(--fc-font-size-md) + 1px);
+  --fc-option-icon-height: calc(var(--fc-font-size-md) + 1px);
   --fc-input-bg: var(--fc-white);
   --fc-input-bg-disabled: var(--fc-gray-50);
   --fc-input-fg: var(--fc-gray-900);
@@ -115,6 +115,8 @@
   --fc-input-focus-ring-error: var(--fc-focus-ring-danger);
   --fc-input-password-icon-color: var(--fc-gray-400);
   --fc-input-password-icon-color-hover: var(--fc-gray-500);
+  --fc-input-password-icon-width: calc(var(--fc-font-size-md) + 2px);
+  --fc-input-password-icon-height: calc(var(--fc-font-size-md) + 2px);
   --fc-input-file-border: var(--fc-gray-400);
   --fc-input-file-border-hover: var(--fc-gray-400);
   --fc-input-file-btn-bg: var(--fc-gray-400);
@@ -129,6 +131,11 @@
   --fc-error-fg: var(--fc-danger-300);
   --fc-error-max-width: fit-content;
   --fc-error-font-size: var(--fc-font-size-sm);
+  --fc-label-font-size: var(--fc-font-size-md);
+  --fc-label-font-weight: var(--fc-font-weight-bold);
+  --fc-label-fg: var(--fc-gray-900);
+  --fc-select-dropdown-icon-width: calc(var(--fc-font-size-md) + 4px);
+  --fc-select-dropdown-icon-height: calc(var(--fc-font-size-md) + 4px);
 }
 
 /* src/styles/themes/fc-theme-light.css */
@@ -149,11 +156,9 @@
   --fc-option-bg: var(--fc-white);
   --fc-option-bg-disabled: var(--fc-gray-50);
   --fc-option-bg-hover: var(--fc-gray-100);
-  --fc-option-bg-selected: var(--fc-primary-200);
   --fc-option-bg-active: var(--fc-primary-100);
   --fc-option-fg: var(--fc-gray-900);
   --fc-option-fg-disabled: var(--fc-gray-300);
-  --fc-option-fg-selected: var(--fc-primary-700);
   --fc-input-bg: var(--fc-white);
   --fc-input-bg-disabled: var(--fc-gray-50);
   --fc-input-fg: var(--fc-gray-900);
@@ -180,6 +185,9 @@
   --fc-input-radius: var(--fc-radius-md);
   --fc-input-shadow: var(--fc-shadow-none);
   --fc-error-fg: var(--fc-danger-300);
+  --fc-label-font-size: var(--fc-font-size-md);
+  --fc-label-font-weight: var(--fc-font-weight-bold);
+  --fc-label-fg: var(--fc-gray-900);
 }
 
 /* src/styles/themes/fc-theme-dark.css */
@@ -201,10 +209,8 @@
   --fc-option-bg-disabled: var(--fc-gray-900);
   --fc-option-bg-hover: var(--fc-gray-700);
   --fc-option-bg-active: var(--fc-primary-500);
-  --fc-option-bg-selected: var(--fc-primary-600);
   --fc-option-fg: var(--fc-gray-200);
   --fc-option-fg-disabled: var(--fc-gray-700);
-  --fc-option-fg-selected: var(--fc-primary-50);
   --fc-input-bg: var(--fc-gray-800);
   --fc-input-bg-disabled: var(--fc-gray-900);
   --fc-input-fg: var(--fc-gray-200);
@@ -231,4 +237,7 @@
   --fc-input-radius: var(--fc-radius-md);
   --fc-input-shadow: var(--fc-shadow-none);
   --fc-error-fg: var(--fc-danger-700);
+  --fc-label-font-size: var(--fc-font-size-md);
+  --fc-label-font-weight: var(--fc-font-weight-bold);
+  --fc-label-fg: var(--fc-gray-200);
 }

package/dist/index.d.ts

@@ -57,9 +57,8 @@ declare class FcCombobox extends HTMLElement {
     private onBlur;
     private onInvalid;
     private setActiveOption;
-    private getVisibleOptions;
-    private selectOption;
-    private toggleDropdown;
+    private showDropdown;
+    private hideDropdown;
     private syncValidity;
     setProps(props: Record<string, any>): void;
 }
@@ -168,6 +167,83 @@ declare class FcError extends HTMLElement {
 
 declare const defineError: () => typeof FcError;
 
+declare class FcLabel extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldVal: string, newVal: string): void;
+    get htmlFor(): string;
+    set htmlFor(val: string);
+    private onClick;
+    setProps(props: Record<string, any>): void;
+}
+
+declare const defineLabel: () => typeof FcLabel;
+
+declare class FcSelect extends HTMLElement {
+    static get observedAttributes(): string[];
+    private inputEl;
+    private dropdownEl;
+    static formAssociated: boolean;
+    private internals;
+    private _value;
+    private activeIndex;
+    private searchBuffer;
+    private searchTimeout;
+    constructor();
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    get placeholder(): string;
+    set placeholder(val: string);
+    get name(): string;
+    set name(val: string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get value(): string;
+    set value(newValue: string);
+    get label(): string;
+    get options(): {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    set options(data: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[]);
+    get required(): boolean;
+    set required(val: boolean);
+    get readonly(): boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string, newVal: string): void;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, mode: 'restore' | 'autocomplete'): void;
+    private onClick;
+    private onChange;
+    private onOptionSelect;
+    private onOutsideClick;
+    private onFocusOut;
+    private onSlotChange;
+    private onKeyDown;
+    private handleTypeAhead;
+    private onBlur;
+    private onInvalid;
+    private setActiveOption;
+    private getVisibleOptions;
+    private selectOption;
+    private toggleDropdown;
+    private syncValidity;
+    setProps(props: Record<string, any>): void;
+}
+
+declare const defineSelect: () => typeof FcSelect;
+
 declare const defineAll: () => void;
 
-export { FcCombobox, FcError, FcInput, FcOption, defineAll, defineCombobox, defineError, defineInput, defineOption };
+export { FcCombobox, FcError, FcInput, FcLabel, FcOption, FcSelect, defineAll, defineCombobox, defineError, defineInput, defineLabel, defineOption, defineSelect };

package/dist/index.js

@@ -185,7 +185,6 @@ var FcCombobox = class extends HTMLElement {
         this.inputEl.addEventListener("input", this.onInput);
         this.inputEl.addEventListener("change", this.onChange);
         this.addEventListener("fc-option-select", this.onOptionSelect);
-        document.addEventListener("click", this.onOutsideClick);
         this.addEventListener("focusout", this.onFocusOut);
         this.inputEl.addEventListener("focus", this.onFocus);
         this.inputEl.addEventListener("blur", this.onBlur);
@@ -210,7 +209,7 @@ var FcCombobox = class extends HTMLElement {
             this.inputEl.disabled = isDisabled;
             this.internals.ariaDisabled = isDisabled ? "true" : "false";
             if (isDisabled) {
-                this.toggleDropdown(false);
+                this.hideDropdown();
             }
         }
         if (name === "required" && this.inputEl) {
@@ -240,7 +239,7 @@ var FcCombobox = class extends HTMLElement {
             option.selected = false;
             option.hidden = false;
         });
-        this.toggleDropdown(false);
+        this.hideDropdown();
         this.removeAttribute("touched");
         this.syncValidity();
         this.dispatchEvent(new CustomEvent("fc-reset", {
@@ -287,7 +286,7 @@ var FcCombobox = class extends HTMLElement {
             this._value = "";
             this.internals.setFormValue("");
             this.inputEl.removeAttribute("aria-activedescendant");
-            this.toggleDropdown(true);
+            this.showDropdown();
             this.syncValidity();
             this.dispatchEvent(new CustomEvent("fc-input", {
                 detail: {
@@ -331,7 +330,7 @@ var FcCombobox = class extends HTMLElement {
             bubbles: true,
             composed: true
         }));
-        this.toggleDropdown(hasMatch);
+        hasMatch ? this.showDropdown() : this.hideDropdown();
     }
     onChange(e) {
         e.stopPropagation();
@@ -359,7 +358,7 @@ var FcCombobox = class extends HTMLElement {
             option.hidden = !selected;
             option.active = false;
         });
-        this.toggleDropdown(false);
+        this.hideDropdown();
         this.syncValidity();
         this.dispatchEvent(new CustomEvent("fc-change", {
             detail: {
@@ -372,12 +371,13 @@ var FcCombobox = class extends HTMLElement {
     }
     onOutsideClick(e) {
         if (!this.contains(e.target)) {
-            this.toggleDropdown(false);
+            this.hideDropdown();
         }
     }
     onFocusOut(e) {
-        if (!this.contains(e.relatedTarget)) {
-            this.toggleDropdown(false);
+        const target = e.relatedTarget;
+        if (!target || !this.contains(target)) {
+            this.hideDropdown();
         }
     }
     onFocus(e) {
@@ -390,7 +390,7 @@ var FcCombobox = class extends HTMLElement {
             const label = (option.getAttribute("label") || option.textContent || "").toLowerCase();
             return label.includes(query);
         });
-        this.toggleDropdown(match);
+        match ? this.showDropdown() : this.hideDropdown();
     }
     onSlotChange() {
         if (!this._value) {
@@ -410,7 +410,7 @@ var FcCombobox = class extends HTMLElement {
         if (!foundMatch && this.inputEl.value === "") {
             this.inputEl.value = this._value;
             options.forEach(option => {
-                const match = option.label.includes(this._value);
+                const match = option.label.toLowerCase().includes(this._value.toLowerCase());
                 option.hidden = !match;
             });
         }
@@ -420,31 +420,50 @@ var FcCombobox = class extends HTMLElement {
         if (this.disabled) {
             return;
         }
-        const options = this.getVisibleOptions();
-        if (options.length === 0) {
+        const options = this.querySelectorAll("fc-option");
+        const visibleOptions = Array.from(options).filter(opt => !opt.hidden && !opt.disabled);
+        if (visibleOptions.length === 0) {
             return;
         }
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            this.toggleDropdown(true);
-            const nextIndex = this.activeIndex >= options.length - 1 ? 0 : this.activeIndex + 1;
+            this.showDropdown();
+            const nextIndex = this.activeIndex >= visibleOptions.length - 1 ? 0 : this.activeIndex + 1;
             this.setActiveOption(nextIndex, options);
         } else if (e.key === "ArrowUp") {
             e.preventDefault();
-            this.toggleDropdown(true);
-            const prevIndex = this.activeIndex <= 0 ? options.length - 1 : this.activeIndex - 1;
+            this.showDropdown();
+            const prevIndex = this.activeIndex <= 0 ? visibleOptions.length - 1 : this.activeIndex - 1;
             this.setActiveOption(prevIndex, options);
         } else if (e.key === "Enter") {
             e.preventDefault();
-            if (this.activeIndex > -1 && options[this.activeIndex]) {
-                const target = options[this.activeIndex];
-                this.selectOption(target);
+            if (this.activeIndex > -1 && visibleOptions[this.activeIndex]) {
+                const target = visibleOptions[this.activeIndex];
+                this.inputEl.value = target.label;
+                this._value = target.value;
+                this.internals.setFormValue(target.value);
+                options.forEach(option => {
+                    const selected = option.value === target.value;
+                    option.selected = selected;
+                    option.hidden = !selected;
+                    option.active = false;
+                });
+                this.hideDropdown();
+                this.syncValidity();
+                this.dispatchEvent(new CustomEvent("fc-change", {
+                    detail: {
+                        value: target.value,
+                        label: target.label
+                    },
+                    bubbles: true,
+                    composed: true
+                }));
             }
         } else if (e.key === "Escape") {
             e.preventDefault();
-            this.toggleDropdown(false);
+            this.hideDropdown();
         } else if (e.key === "Tab") {
-            this.toggleDropdown(false);
+            this.hideDropdown();
         }
     }
     onBlur() {
@@ -452,10 +471,18 @@ var FcCombobox = class extends HTMLElement {
     }
     onInvalid(e) {
         this.setAttribute("touched", "");
+        this.dispatchEvent(new CustomEvent("fc-invalid", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                originalEvent: e
+            }
+        }));
     }
-    setActiveOption(index, visibleOptions) {
-        this.querySelectorAll("fc-option").forEach(opt => opt.active = false);
+    setActiveOption(index, allOptions) {
+        allOptions.forEach(opt => opt.active = false);
         this.activeIndex = index;
+        const visibleOptions = Array.from(allOptions).filter(opt => !opt.hidden && !opt.disabled);
         const target = visibleOptions[index];
         if (target) {
             target.active = true;
@@ -468,51 +495,43 @@ var FcCombobox = class extends HTMLElement {
         }
         this.inputEl.removeAttribute("aria-activedescendant");
     }
-    getVisibleOptions() {
-        return Array.from(this.querySelectorAll("fc-option")).filter(opt => !opt.hidden && !opt.disabled);
-    }
-    selectOption(option) {
-        const value = option.value;
-        const label = option.label;
-        this.inputEl.value = label;
-        this._value = value;
-        this.internals.setFormValue(value);
-        const allOptions = this.querySelectorAll("fc-option");
-        allOptions.forEach(opt => {
-            const selected = opt.value === value;
-            opt.selected = selected;
-            opt.hidden = !selected;
-            opt.active = false;
-        });
-        this.toggleDropdown(false);
-        this.syncValidity();
-        this.dispatchEvent(new CustomEvent("fc-change", {
-            detail: {
-                value: value,
-                label: label
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    toggleDropdown(show) {
-        if (!this.dropdownEl) {
+    showDropdown() {
+        if (!this.dropdownEl || this.disabled) {
             return;
         }
-        if (this.disabled && show) {
+        const dropdown = this.dropdownEl;
+        const showEvent = new CustomEvent("fc-show", {
+            bubbles: true,
+            composed: true,
+            cancelable: true
+        });
+        this.dispatchEvent(showEvent);
+        if (showEvent.defaultPrevented) {
             return;
         }
-        const dropdown = this.dropdownEl;
-        if (show) {
-            const spaceBelow = calculateBottomAvaliableSpace(this.inputEl);
-            const spaceAbove = calculateTopAvaliableSpace(this.inputEl);
-            dropdown.hidden = false;
-            this.setAttribute("open", "true");
-            this.inputEl.setAttribute("aria-expanded", "true");
-            const shouldOpenUp = spaceBelow < dropdown.clientHeight && spaceAbove > spaceBelow;
-            dropdown.classList.toggle("opens-up", shouldOpenUp);
+        const spaceBelow = calculateBottomAvaliableSpace(this.inputEl);
+        const spaceAbove = calculateTopAvaliableSpace(this.inputEl);
+        dropdown.hidden = false;
+        this.setAttribute("open", "true");
+        this.inputEl.setAttribute("aria-expanded", "true");
+        const shouldOpenUp = spaceBelow < dropdown.clientHeight && spaceAbove > spaceBelow;
+        dropdown.classList.toggle("opens-up", shouldOpenUp);
+        setTimeout(() => {
+            document.addEventListener("click", this.onOutsideClick);
+        }, 0);
+        return;
+    }
+    hideDropdown() {
+        if (!this.dropdownEl) {
             return;
         }
+        if (!this.dropdownEl.hidden) {
+            this.dispatchEvent(new CustomEvent("fc-hide", {
+                bubbles: true,
+                composed: true
+            }));
+        }
+        document.removeEventListener("click", this.onOutsideClick);
         this.dropdownEl.hidden = true;
         this.removeAttribute("open");
         this.inputEl.setAttribute("aria-expanded", "false");
@@ -577,11 +596,11 @@ var defineCombobox = () => {
     return FcCombobox;
 };
 
-var styles2 = `\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n    \tfont-family: var(--fc-font-family);\n\t}\n\n\t:host([hidden]) {\n        display: none !important;\n    }\n\n\t:host([disabled]) {\n        cursor: not-allowed;\n    }\n\t\t\n\t\t\n\tbutton.fc-option {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\ttext-align: left;\n\t\tbackground: var(--fc-option-bg);\n\t\tcolor: var(--fc-option-fg);\n\t\tpadding: var(--fc-option-padding);\n\t\tborder-radius: var(--fc-option-radius);\n\t\tborder: none;\n\t\tfont: inherit;\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\tbutton.fc-option:hover {\n\t\tbackground: var(--fc-option-bg-hover);\n\t\ttransition: background 0.15s ease-in-out, color 0.15s ease-in-out;\n\t}\n\n\tbutton.fc-option[data-active="true"] { \n        background: var(--fc-option-bg-active);\n    }\n\n\tbutton.fc-option:disabled {\n\t\tcolor: var(--fc-option-fg-disabled);\n\t\tbackground: var(--fc-option-bg-disabled);\n\t\tpointer-events: none; // this prevents disabled attribute on button to move focus out of the fc-combobox\n\t\tbox-shadow: none;\n\t}\n\n    button.fc-option:disabled:hover {\n\t\tbackground: var(--fc-option-bg-disabled);\n\t}\n\n\tbutton.fc-option[aria-selected="true"] {\n\t\tbackground: var(--fc-option-bg-selected);\n\t\tcolor: var(--fc-option-fg-selected);\n\t}\n\n`;
+var styles2 = `\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n    \tfont-family: var(--fc-font-family);\n\t}\n\n\t:host([hidden]) {\n        display: none !important;\n    }\n\n\t:host([disabled]) {\n        cursor: not-allowed;\n    }\n\t\t\n\tbutton.fc-option {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\ttext-align: left;\n\t\tbackground: var(--fc-option-bg);\n\t\tcolor: var(--fc-option-fg);\n\t\tpadding: var(--fc-option-padding);\n\t\tborder-radius: var(--fc-option-radius);\n\t\tborder: none;\n\t\tfont: inherit;\n\t\tcursor: pointer;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\n\t\tdisplay: flex;\n        justify-content: space-between;\n        align-items: center;\n\t}\n\n\t.fc-option-text {\n        flex-grow: 1;\n\t\tfont-size: var(--fc-font-size-md);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin-right: 12px;\n    }\n\n    .fc-option-icon {\n        display: none;\n        align-items: center;\n\t\tjustify-content: center;\n        color: inherit; \n    }\n\t\n\t.fc-option-icon svg {\n\t\twidth: var(--fc-option-icon-width);\n\t\theight: var(--fc-option-icon-height);\n    }\n\n\tbutton.fc-option:hover {\n\t\tbackground: var(--fc-option-bg-hover);\n\t\ttransition: background 0.15s ease-in-out, color 0.15s ease-in-out;\n\t}\n\n\tbutton.fc-option[data-active="true"] { \n        background: var(--fc-option-bg-active);\n    }\n\n\tbutton.fc-option:disabled {\n\t\tcolor: var(--fc-option-fg-disabled);\n\t\tbackground: var(--fc-option-bg-disabled);\n\t\tpointer-events: none; // this prevents disabled attribute on button to move focus out of the fc-combobox\n\t\tbox-shadow: none;\n\t}\n\n    button.fc-option:disabled:hover {\n\t\tbackground: var(--fc-option-bg-disabled);\n\t}\n\n\tbutton.fc-option[aria-selected="true"] .fc-option-icon {\n       display: flex;\n    }\n\n`;
 
 var template2 = document.createElement("template");
 
-template2.innerHTML = `\n\t<style>${styles2}</style>\n\t<button part="base" class="fc-option" role="option">\n\t\t<slot></slot>\n\t</button>\n`;
+template2.innerHTML = `\n    <style>${styles2}</style>\n    \n    <button part="container" class="fc-option" role="option">\n        \n        <span class="fc-option-text" part="text">\n            <slot></slot>\n        </span>\n\n        <span class="fc-option-icon" part="icon" aria-hidden="true">\n            <slot name="checked-icon">\n\t\t\t\t<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n                    <polyline points="20 6.5 9 17.5 4 12.5"></polyline>\n                </svg>\n            </slot>\n        </span>\n\n    </button>\n`;
 
 var FcOption = class extends HTMLElement {
     static get observedAttributes() {
@@ -717,7 +736,7 @@ var defineOption = () => {
     return FcOption;
 };
 
-var styles3 = `\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n    \tfont-family: var(--fc-font-family);\n\t\tmax-width: var(--fc-input-max-width);\n\t}\n\n\t:host([disabled]) {\n\t\tcursor: not-allowed;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none !important;\n\t}\n\n\t/* only show invalid style if the user has touched the field (blurred). the :invalid pseudo-class comes from \n\tinternals.setValidity() logic. */\n\n\t:host([touched]:invalid) .fc-input-field {\n\t\tbackground: var(--fc-input-bg-error);\n\t\tborder-color: var(--fc-input-border-error);\n\t}\n\n\t:host([touched]:invalid) .fc-input-field:focus {\n\t\tbox-shadow: 0 0 0 2px var(--fc-input-focus-ring-error);\n\t}\n\n\t.fc-input-wrapper {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t}\n\n\t.fc-input-field {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\n\t\tpadding: var(--fc-input-padding);\n\t\tborder-radius: var(--fc-input-radius);\n\t\tbackground: var(--fc-input-bg);\n\t\tcolor: var(--fc-input-fg);\n\n\t\tborder: var(--fc-input-border-width) solid var(--fc-input-border);\n\n\t\tfont-size: var(--fc-font-size-md);\n\n\t\tbox-shadow: var(--fc-input-shadow);\n\t\ttransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\t\tfont-family: inherit;\n\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t}\n\n\t.fc-input-field::placeholder {\n\t\tcolor: var(--fc-input-placeholder);\n\t}\n\n\t.fc-input-field:hover {\n\t\tborder-color: var(--fc-input-border-hover);\n\t}\n\n\t.fc-input-field:focus {\n\t\tborder-color: var(--fc-input-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-input-focus-ring);\n\t}\n\n\t.fc-input-field:disabled {\n\t\tbackground: var(--fc-input-bg-disabled);\n\t\tcursor: not-allowed;\n\t\tbox-shadow: none;\n\t}\n\n\t.fc-input-field:disabled::placeholder {\n\t\tcolor: var(--fc-input-placeholder-disabled);\n    }\n\n\t.fc-input-field:disabled:hover {\n\t\tborder-color: var(--fc-input-border);\n\t}\n\n\t.fc-input-field:disabled:focus {\n\t\tborder-color: var(--fc-input-border);\n\t}\n\t\t\n\t/* FILE type specific CSS */\n\n\t.fc-input-field[type="file"] {\n\t\tpadding: calc(var(--fc-input-padding));\n\t\tcursor: pointer;\n\t\tdisplay: flex; \n    \talign-items: center;\n\t\tborder-color: var(--fc-input-file-border);\n\t\ttransition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\t}\n\n\t.fc-input-field[type="file"]:focus {\n\t\tborder-color: var(--fc-input-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-input-focus-ring);\n\t}\n\n\t/* target the button inside type="file" */\n\n\t.fc-input-field::file-selector-button {\n\t\tpadding: 4px 10px;\n\t\tborder-radius: var(--fc-input-radius);\n\t\tbackground: var(--fc-input-btn-bg);\n\t\tcolor: var(--fc-input-file-btn-fg);\n\t\tborder: 1px solid var(--fc-input-file-border);\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\ttransition: background-color 0.15s ease;\n\t}\n\n\t/* legacy browsers */\n\t.fc-input-field::-webkit-file-upload-button {\n\t\tmargin-right: 12px;\n\t\tpadding: 4px 10px;\n\t\tborder-radius: var(--fc-input-radius);\n\t\tbackground: var(--fc-input-file-btn-bg);\n\t\tcolor: var(--fc-input-file-btn-fg);\n\t\tborder: 1px solid var(--fc-input-file-border);\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\tfont-size: 0.9em;\n\t}\n\n\t/* Hover effects for the button */\n\n\t.fc-input-field::file-selector-button:hover {\n\t\tbackground: var(--fc-input-file-btn-bg-hover); \n\t}\n\n\n\t.fc-input-field::-webkit-file-upload-button:hover {\n\t\tbackground: var(--fc-input-file-btn-bg-hover);\n\t}\n\n\t/* PASSWORD type specific CSS */\n\n\t/* when password toggle is visible, add padding to input so text doesn't overlap icon */\n\t:host([type="password"]) .fc-input-field {\n\t\tpadding-right: 40px; \n\t}\n\n\t.fc-password-toggle {\n\t\tposition: absolute;\n\t\tright: 8px; /* position inside the input */\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tcolor: var(--fc-input-password-icon-color);\n\t\ttransition: color 0.15s ease-in-out;\n\t\tz-index: 2; /* above input */\n\t}\n\t\n\t.fc-password-toggle[hidden] {\n        display: none !important;\n    }\n\n\t.fc-password-toggle:hover {\n\t\tcolor: var(--fc-input-password-icon-color-hover);\n\t}\n\t\n\t.fc-password-toggle svg {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t}\n\n\t.fc-password-toggle svg[hidden] {\n        display: none !important;\n    }\n\n`;
+var styles3 = `\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n    \tfont-family: var(--fc-font-family);\n\t\tmax-width: var(--fc-input-max-width);\n\t}\n\n\t:host([disabled]) {\n\t\tcursor: not-allowed;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none !important;\n\t}\n\n\t/* only show invalid style if the user has touched the field (blurred). the :invalid pseudo-class comes from \n\tinternals.setValidity() logic. */\n\n\t:host([touched]:invalid) .fc-input-field {\n\t\tbackground: var(--fc-input-bg-error);\n\t\tborder-color: var(--fc-input-border-error);\n\t}\n\n\t:host([touched]:invalid) .fc-input-field:focus {\n\t\tbox-shadow: 0 0 0 2px var(--fc-input-focus-ring-error);\n\t}\n\n\t.fc-input-wrapper {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t}\n\n\t.fc-input-field {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\n\t\tpadding: var(--fc-input-padding);\n\t\tborder-radius: var(--fc-input-radius);\n\t\tbackground: var(--fc-input-bg);\n\t\tcolor: var(--fc-input-fg);\n\n\t\tborder: var(--fc-input-border-width) solid var(--fc-input-border);\n\n\t\tfont-size: var(--fc-font-size-md);\n\n\t\tbox-shadow: var(--fc-input-shadow);\n\t\ttransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\t\tfont-family: inherit;\n\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t}\n\n\t.fc-input-field::placeholder {\n\t\tcolor: var(--fc-input-placeholder);\n\t}\n\n\t.fc-input-field:hover {\n\t\tborder-color: var(--fc-input-border-hover);\n\t}\n\n\t.fc-input-field:focus {\n\t\tborder-color: var(--fc-input-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-input-focus-ring);\n\t}\n\n\t.fc-input-field:disabled {\n\t\tbackground: var(--fc-input-bg-disabled);\n\t\tcursor: not-allowed;\n\t\tbox-shadow: none;\n\t}\n\n\t.fc-input-field:disabled::placeholder {\n\t\tcolor: var(--fc-input-placeholder-disabled);\n    }\n\n\t.fc-input-field:disabled:hover {\n\t\tborder-color: var(--fc-input-border);\n\t}\n\n\t.fc-input-field:disabled:focus {\n\t\tborder-color: var(--fc-input-border);\n\t}\n\t\t\n\t/* FILE type specific CSS */\n\n\t.fc-input-field[type="file"] {\n\t\tpadding: calc(var(--fc-input-padding));\n\t\tcursor: pointer;\n\t\tdisplay: flex; \n    \talign-items: center;\n\t\tborder-color: var(--fc-input-file-border);\n\t\ttransition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\t}\n\n\t.fc-input-field[type="file"]:focus {\n\t\tborder-color: var(--fc-input-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-input-focus-ring);\n\t}\n\n\t/* target the button inside type="file" */\n\n\t.fc-input-field::file-selector-button {\n\t\tpadding: 4px 10px;\n\t\tborder-radius: var(--fc-input-radius);\n\t\tbackground: var(--fc-input-btn-bg);\n\t\tcolor: var(--fc-input-file-btn-fg);\n\t\tborder: 1px solid var(--fc-input-file-border);\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\ttransition: background-color 0.15s ease;\n\t}\n\n\t/* legacy browsers */\n\t.fc-input-field::-webkit-file-upload-button {\n\t\tmargin-right: 12px;\n\t\tpadding: 4px 10px;\n\t\tborder-radius: var(--fc-input-radius);\n\t\tbackground: var(--fc-input-file-btn-bg);\n\t\tcolor: var(--fc-input-file-btn-fg);\n\t\tborder: 1px solid var(--fc-input-file-border);\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\tfont-size: 0.9em;\n\t}\n\n\t/* Hover effects for the button */\n\n\t.fc-input-field::file-selector-button:hover {\n\t\tbackground: var(--fc-input-file-btn-bg-hover); \n\t}\n\n\n\t.fc-input-field::-webkit-file-upload-button:hover {\n\t\tbackground: var(--fc-input-file-btn-bg-hover);\n\t}\n\n\t/* PASSWORD type specific CSS */\n\n\t/* when password toggle is visible, add padding to input so text doesn't overlap icon */\n\t:host([type="password"]) .fc-input-field {\n\t\tpadding-right: 40px; \n\t}\n\n\t.fc-password-toggle {\n\t\tposition: absolute;\n\t\tright: 8px; /* position inside the input */\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\tbackground: transparent;\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tcolor: var(--fc-input-password-icon-color);\n\t\ttransition: color 0.15s ease-in-out;\n\t\tz-index: 2; /* above input */\n\t}\n\t\n\t.fc-password-toggle[hidden] {\n        display: none !important;\n    }\n\n\t.fc-password-toggle:hover {\n\t\tcolor: var(--fc-input-password-icon-color-hover);\n\t}\n\t\n\t.fc-password-toggle svg {\n\t\twidth: var(--fc-input-password-icon-width);\n\t\theight: var(--fc-input-password-icon-height);\n\t}\n\n\t.fc-password-toggle svg[hidden] {\n        display: none !important;\n    }\n\n`;
 
 var template3 = document.createElement("template");
 
@@ -1098,6 +1117,13 @@ var FcInput = class extends HTMLElement {
     }
     onInvalid(e) {
         this.setAttribute("touched", "");
+        this.dispatchEvent(new CustomEvent("fc-invalid", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                originalEvent: e
+            }
+        }));
     }
     onTogglePassword(e) {
         e.preventDefault();
@@ -1252,11 +1278,581 @@ var defineError = () => {
     return FcError;
 };
 
+var styles5 = `\n    :host {\n        display: block;\n        width: 100%;\n        box-sizing: border-box;\n        font-family: var(--fc-font-family, inherit);\n        font-size: var(--fc-label-font-size);\n        font-weight: var(--fc-label-font-weight);\n        color: var(--fc-label-fg);\n        cursor: pointer;\n        line-height: 1.5;\n    }\n\n    :host([hidden]) {\n        display: none !important;\n    }\n\n    .fc-label-text {\n        display: flex;\n        align-items: center;\n    }\n`;
+
+var template5 = document.createElement("template");
+
+template5.innerHTML = `\n    <style>${styles5}</style>\n    <div class="fc-label-text" part="text">\n        <slot></slot>\n    </div>\n`;
+
+var FcLabel = class extends HTMLElement {
+    static get observedAttributes() {
+        return [ "for" ];
+    }
+    constructor() {
+        super();
+        const shadow = this.attachShadow({
+            mode: "open"
+        });
+        shadow.appendChild(template5.content.cloneNode(true));
+        this.onClick = this.onClick.bind(this);
+    }
+    connectedCallback() {
+        this.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+    }
+    attributeChangedCallback(name, _oldVal, newVal) {}
+    get htmlFor() {
+        var _a;
+        return (_a = this.getAttribute("for")) != null ? _a : "";
+    }
+    set htmlFor(val) {
+        this.setAttribute("for", val);
+    }
+    onClick(e) {
+        e.preventDefault();
+        const targetId = this.getAttribute("for");
+        if (!targetId) {
+            return;
+        }
+        const targetEl = document.getElementById(targetId);
+        if (targetEl) {
+            targetEl.focus();
+            targetEl.click();
+        }
+    }
+    setProps(props) {
+        for (const property in props) {
+            const value = props[property];
+            if (property in this) {
+                this[property] = value;
+                continue;
+            }
+            if ([ "string", "number", "boolean" ].includes(typeof value)) {
+                this.setAttribute(property, String(value));
+            }
+        }
+    }
+};
+
+var defineLabel = () => {
+    if (!customElements.get("fc-label")) {
+        customElements.define("fc-label", FcLabel);
+    }
+    return FcLabel;
+};
+
+var styles6 = `\n    :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        box-sizing: border-box;\n        font-family: var(--fc-font-family);\n        max-width: var(--fc-combobox-max-width);\n        cursor: pointer; \n    }\n\n    \n    .fc-input {\n        width: 100%;\n        box-sizing: border-box;\n        padding: var(--fc-combobox-padding);\n        padding-right: 36px;\n        \n        border-radius: var(--fc-combobox-radius);\n        background: var(--fc-combobox-bg);\n        color: var(--fc-combobox-fg);\n        border: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n        font-size: var(--fc-font-size-md);\n        box-shadow: var(--fc-combobox-shadow);\n        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n        \n        cursor: pointer; \n        caret-color: transparent; \n        user-select: none;\n    }\n\n    \n    :host([touched]:invalid) .fc-input {\n        background-color: var(--fc-combobox-bg-error);\n        border-color: var(--fc-combobox-border-error);\n    }\n\n    :host([touched]:invalid) .fc-input:focus {\n        box-shadow: 0 0 0 2px var(--fc-combobox-focus-ring-error);\n    }\n\n    .fc-input::placeholder {\n        color: var(--fc-combobox-placeholder);\n    }\n\n    .fc-input:hover {\n        border-color: var(--fc-combobox-border-hover);\n    }\n\n    .fc-input:focus {\n        border-color: var(--fc-combobox-border-focus);\n        outline: none;\n        box-shadow: var(--fc-combobox-focus-ring);\n    }\n\n    \n    .fc-chevron {\n        position: absolute;\n        right: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: var(--fc-select-dropdown-icon-width);\n        height: var(--fc-select-dropdown-icon-height);\n        pointer-events: none;\n        color: var(--fc-combobox-fg);\n        transition: transform 0.2s ease;\n    }\n\n    \n    :host([open]) .fc-chevron {\n        transform: translateY(-50%) rotate(180deg);\n    }\n\n    :host([disabled]) {\n        cursor: not-allowed;\n    }\n\n    .fc-input:disabled {\n        background: var(--fc-combobox-bg-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n        color: var(--fc-combobox-placeholder-disabled);\n    }\n\n    :host([disabled]) .fc-chevron {\n        color: var(--fc-combobox-placeholder-disabled);\n    }\n\n    .fc-options {\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\n        right: 0;\n        z-index: 1000;\n        background: var(--fc-combobox-dropdown-bg, var(--fc-combobox-bg));\n        border: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n        border-radius: var(--fc-combobox-dropdown-radius, var(--fc-combobox-radius));\n        padding: var(--fc-combobox-dropdown-padding, calc(var(--fc-combobox-padding) - 5px));\n        box-shadow: var(--fc-combobox-dropdown-shadow);\n        max-height: var(--fc-combobox-dropdown-max-height, 240px);\n        overflow-y: auto;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    }\n\n    .fc-options.opens-up {\n        top: auto;\n        bottom: calc(100% + 6px);\n    }\n    \n    .fc-options[hidden] {\n        display: none !important;\n    }\n`;
+
+var template6 = document.createElement("template");
+
+template6.innerHTML = `\n    <style>${styles6}</style>\n\n    <input \n        class="fc-input"\n        type="text" \n        role="combobox"\n        aria-autocomplete="none" \n        aria-expanded="false"\n        aria-haspopup="listbox"\n        aria-controls="fc-options"\n        part="input"\n        autocomplete="off"\n        readonly\n    />\n\n    <svg class="fc-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n        <polyline points="6 9 12 15 18 9"></polyline>\n    </svg>\n\n    <div \n        part="options" \n        class="fc-options" \n        role="listbox"\n        hidden\n    >\n        <slot></slot>\n    </div>\n`;
+
+var FcSelect = class extends HTMLElement {
+    constructor() {
+        super();
+        this._value = "";
+        this.activeIndex = -1;
+        this.searchBuffer = "";
+        this.searchTimeout = null;
+        const shadow = this.attachShadow({
+            mode: "open",
+            delegatesFocus: true
+        });
+        shadow.appendChild(template6.content.cloneNode(true));
+        this.internals = this.attachInternals();
+        this.inputEl = shadow.querySelector(".fc-input");
+        this.dropdownEl = shadow.querySelector(".fc-options");
+        const randomId = Math.random().toString(36).substring(2, 9);
+        const inputId = `fc-input-${randomId}`;
+        const dropdownId = `fc-options-${randomId}`;
+        this.inputEl.id = inputId;
+        this.dropdownEl.id = dropdownId;
+        this.inputEl.setAttribute("aria-controls", dropdownId);
+        this.onChange = this.onChange.bind(this);
+        this.onOptionSelect = this.onOptionSelect.bind(this);
+        this.onOutsideClick = this.onOutsideClick.bind(this);
+        this.onFocusOut = this.onFocusOut.bind(this);
+        this.onSlotChange = this.onSlotChange.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+        this.onInvalid = this.onInvalid.bind(this);
+        this.onClick = this.onClick.bind(this);
+    }
+    static get observedAttributes() {
+        return [ "placeholder", "name", "value", "disabled", "required" ];
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    get placeholder() {
+        var _a;
+        return (_a = this.getAttribute("placeholder")) != null ? _a : "";
+    }
+    set placeholder(val) {
+        this.setAttribute("placeholder", val);
+    }
+    get name() {
+        var _a;
+        return (_a = this.getAttribute("name")) != null ? _a : "";
+    }
+    set name(val) {
+        this.setAttribute("name", val);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(val) {
+        if (val) {
+            this.setAttribute("disabled", "true");
+            return;
+        }
+        this.removeAttribute("disabled");
+    }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        if (this._value === newValue) return;
+        this._value = newValue;
+        this.internals.setFormValue(newValue);
+        if (!this.inputEl) return;
+        this.syncValidity();
+    }
+    get label() {
+        var _a, _b;
+        return (_b = (_a = this.inputEl) == null ? void 0 : _a.value) != null ? _b : "";
+    }
+    get options() {
+        const slot = this.shadowRoot.querySelector("slot");
+        const optionElements = slot.assignedElements().filter(el => el.tagName === "FC-OPTION");
+        return optionElements.map(opt => ({
+            label: opt.label,
+            value: opt.value
+        }));
+    }
+    set options(data) {
+        const oldOptions = this.querySelectorAll("fc-option");
+        oldOptions.forEach(opt => opt.remove());
+        data.forEach(element => {
+            const optEl = document.createElement("fc-option");
+            optEl.setAttribute("value", element.value);
+            optEl.setAttribute("label", element.label);
+            optEl.textContent = element.label;
+            if (element.disabled) optEl.setAttribute("disabled", "");
+            this.appendChild(optEl);
+        });
+        this.syncValidity();
+    }
+    get required() {
+        return this.hasAttribute("required");
+    }
+    set required(val) {
+        if (val) {
+            this.setAttribute("required", "true");
+            return;
+        }
+        this.removeAttribute("required");
+    }
+    get readonly() {
+        return this.hasAttribute("readonly");
+    }
+    connectedCallback() {
+        this.internals.setFormValue(this.value);
+        if (this.hasAttribute("placeholder")) {
+            this.inputEl.placeholder = this.getAttribute("placeholder");
+        }
+        if (this.hasAttribute("disabled")) {
+            this.inputEl.disabled = true;
+            this.internals.ariaDisabled = "true";
+        }
+        if (this.hasAttribute("required")) {
+            this.internals.ariaRequired = "true";
+            this.inputEl.required = true;
+        }
+        this.inputEl.addEventListener("click", this.onClick);
+        this.inputEl.addEventListener("change", this.onChange);
+        this.addEventListener("fc-option-select", this.onOptionSelect);
+        this.addEventListener("focusout", this.onFocusOut);
+        this.inputEl.addEventListener("blur", this.onBlur);
+        this.addEventListener("invalid", this.onInvalid);
+        const slot = this.shadowRoot.querySelector("slot");
+        slot == null ? void 0 : slot.addEventListener("slotchange", this.onSlotChange);
+        this.inputEl.addEventListener("keydown", this.onKeyDown);
+        this.syncValidity();
+    }
+    attributeChangedCallback(name, _old, newVal) {
+        if (name === "placeholder" && this.inputEl) {
+            this.inputEl.placeholder = newVal;
+        }
+        if (name === "name") {
+            this.internals.setFormValue(this.value);
+        }
+        if (name === "value") {
+            this.value = newVal;
+        }
+        if (name === "disabled" && this.inputEl) {
+            const isDisabled = this.hasAttribute("disabled");
+            this.inputEl.disabled = isDisabled;
+            this.internals.ariaDisabled = isDisabled ? "true" : "false";
+            if (isDisabled) {
+                this.toggleDropdown(false);
+            }
+        }
+        if (name === "required" && this.inputEl) {
+            const isRequired = this.hasAttribute("required");
+            this.internals.ariaRequired = isRequired ? "true" : "false";
+            this.inputEl.required = isRequired;
+            this.syncValidity();
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener("click", this.onOutsideClick);
+    }
+    formResetCallback() {
+        this._value = "";
+        if (this.inputEl) {
+            this.inputEl.value = "";
+        }
+        this.internals.setFormValue("");
+        const options = this.querySelectorAll("fc-option");
+        options.forEach(option => {
+            option.selected = false;
+        });
+        this.toggleDropdown(false);
+        this.removeAttribute("touched");
+        this.syncValidity();
+        this.dispatchEvent(new CustomEvent("fc-reset", {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    formStateRestoreCallback(state, mode) {
+        const restoredValue = state;
+        if (restoredValue) {
+            this._value = restoredValue;
+            this.internals.setFormValue(restoredValue);
+            const options = this.querySelectorAll("fc-option");
+            let foundMatch = false;
+            options.forEach(option => {
+                const selected = option.value === this._value;
+                option.selected = selected;
+                if (selected) {
+                    this.inputEl.value = option.label;
+                    foundMatch = true;
+                }
+            });
+            if (!foundMatch && this.inputEl.value === "") {
+                this.inputEl.value = this._value;
+            }
+            this.syncValidity();
+        }
+    }
+    onClick(e) {
+        if (this.disabled) {
+            return;
+        }
+        this.toggleDropdown(this.dropdownEl.hidden);
+    }
+    onChange(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent("fc-change", {
+            detail: {
+                value: this._value,
+                label: this.inputEl.value
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    onOptionSelect(e) {
+        const {value: value, label: label} = e.detail;
+        if (this.disabled) {
+            return;
+        }
+        this.inputEl.value = label;
+        this._value = value;
+        this.internals.setFormValue(value);
+        const options = this.querySelectorAll("fc-option");
+        options.forEach(option => {
+            const selected = option.value === value;
+            option.selected = selected;
+            option.active = false;
+        });
+        this.toggleDropdown(false);
+        this.syncValidity();
+        this.dispatchEvent(new CustomEvent("fc-change", {
+            detail: {
+                value: value,
+                label: label
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    onOutsideClick(e) {
+        if (!this.contains(e.target)) {
+            this.toggleDropdown(false);
+        }
+    }
+    onFocusOut(e) {
+        const target = e.relatedTarget;
+        if (!target || !this.contains(target)) {
+            this.toggleDropdown(false);
+        }
+    }
+    onSlotChange() {
+        if (!this._value) return;
+        const options = this.querySelectorAll("fc-option");
+        let foundMatch = false;
+        options.forEach(option => {
+            const selected = option.value === this._value;
+            option.selected = selected;
+            if (selected) {
+                this.inputEl.value = option.label;
+                foundMatch = true;
+            }
+        });
+        if (!foundMatch && this.inputEl.value === "") {
+            this.inputEl.value = this._value;
+        }
+        this.syncValidity();
+    }
+    onKeyDown(e) {
+        if (this.disabled) {
+            return;
+        }
+        const options = this.getVisibleOptions();
+        if (options.length === 0) return;
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            if (this.dropdownEl.hidden) {
+                this.toggleDropdown(true);
+                return;
+            }
+            const nextIndex = this.activeIndex >= options.length - 1 ? 0 : this.activeIndex + 1;
+            this.setActiveOption(nextIndex, options);
+        } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            if (this.dropdownEl.hidden) {
+                this.toggleDropdown(true);
+                return;
+            }
+            const prevIndex = this.activeIndex <= 0 ? options.length - 1 : this.activeIndex - 1;
+            this.setActiveOption(prevIndex, options);
+        } else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (this.dropdownEl.hidden) {
+                this.toggleDropdown(true);
+            } else {
+                if (this.activeIndex > -1 && options[this.activeIndex]) {
+                    const target = options[this.activeIndex];
+                    this.selectOption(target);
+                } else {
+                    this.toggleDropdown(false);
+                }
+            }
+        } else if (e.key === "Escape") {
+            e.preventDefault();
+            this.toggleDropdown(false);
+        } else if (e.key === "Tab") {
+            this.toggleDropdown(false);
+        } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            this.handleTypeAhead(e.key);
+        }
+    }
+    handleTypeAhead(char) {
+        if (this.searchTimeout) clearTimeout(this.searchTimeout);
+        this.searchBuffer += char.toLowerCase();
+        this.searchTimeout = setTimeout(() => {
+            this.searchBuffer = "";
+        }, 500);
+        const options = this.getVisibleOptions();
+        const matchIndex = options.findIndex(opt => {
+            const label = (opt.getAttribute("label") || opt.textContent || "").toLowerCase();
+            return label.startsWith(this.searchBuffer);
+        });
+        if (matchIndex !== -1) {
+            const match = options[matchIndex];
+            if (!this.dropdownEl.hidden) {
+                this.setActiveOption(matchIndex, options);
+            } else {
+                this.selectOption(match);
+            }
+        }
+    }
+    onBlur() {
+        this.setAttribute("touched", "");
+    }
+    onInvalid(e) {
+        this.setAttribute("touched", "");
+        this.dispatchEvent(new CustomEvent("fc-invalid", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                originalEvent: e
+            }
+        }));
+    }
+    setActiveOption(index, visibleOptions) {
+        this.querySelectorAll("fc-option").forEach(opt => opt.active = false);
+        this.activeIndex = index;
+        const target = visibleOptions[index];
+        if (target) {
+            target.active = true;
+            this.inputEl.setAttribute("aria-activedescendant", target.id);
+            target.scrollIntoView({
+                block: "nearest",
+                behavior: "smooth"
+            });
+            return;
+        }
+        this.inputEl.removeAttribute("aria-activedescendant");
+    }
+    getVisibleOptions() {
+        return Array.from(this.querySelectorAll("fc-option")).filter(opt => !opt.disabled);
+    }
+    selectOption(option) {
+        const value = option.value;
+        const label = option.label;
+        this.inputEl.value = label;
+        this._value = value;
+        this.internals.setFormValue(value);
+        const allOptions = this.querySelectorAll("fc-option");
+        allOptions.forEach(opt => {
+            const selected = opt.value === value;
+            opt.selected = selected;
+            opt.active = false;
+        });
+        this.toggleDropdown(false);
+        this.syncValidity();
+        this.dispatchEvent(new CustomEvent("fc-change", {
+            detail: {
+                value: value,
+                label: label
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    toggleDropdown(show) {
+        if (!this.dropdownEl) {
+            return;
+        }
+        if (this.disabled && show) {
+            return;
+        }
+        const dropdown = this.dropdownEl;
+        if (show) {
+            const showEvent = new CustomEvent("fc-show", {
+                bubbles: true,
+                composed: true,
+                cancelable: true
+            });
+            this.dispatchEvent(showEvent);
+            if (showEvent.defaultPrevented) {
+                return;
+            }
+            const spaceBelow = calculateBottomAvaliableSpace(this.inputEl);
+            const spaceAbove = calculateTopAvaliableSpace(this.inputEl);
+            dropdown.hidden = false;
+            this.setAttribute("open", "true");
+            this.inputEl.setAttribute("aria-expanded", "true");
+            const shouldOpenUp = spaceBelow < dropdown.clientHeight && spaceAbove > spaceBelow;
+            dropdown.classList.toggle("opens-up", shouldOpenUp);
+            const options = this.getVisibleOptions();
+            const selectedIndex = options.findIndex(opt => opt.value === this._value);
+            if (selectedIndex >= 0) {
+                this.setActiveOption(selectedIndex, options);
+            } else {
+                this.activeIndex = -1;
+            }
+            setTimeout(() => {
+                document.addEventListener("click", this.onOutsideClick);
+            }, 0);
+            return;
+        }
+        if (!this.dropdownEl.hidden) {
+            this.dispatchEvent(new CustomEvent("fc-hide", {
+                bubbles: true,
+                composed: true
+            }));
+        }
+        document.removeEventListener("click", this.onOutsideClick);
+        this.dropdownEl.hidden = true;
+        this.removeAttribute("open");
+        this.inputEl.setAttribute("aria-expanded", "false");
+        this.activeIndex = -1;
+        this.querySelectorAll("fc-option").forEach(opt => opt.active = false);
+        this.inputEl.removeAttribute("aria-activedescendant");
+    }
+    syncValidity() {
+        if (!this.inputEl) {
+            return;
+        }
+        if (!this.inputEl.validity.valid) {
+            this.internals.setValidity(this.inputEl.validity, this.inputEl.validationMessage, this.inputEl);
+            return;
+        }
+        const options = this.querySelectorAll("fc-option");
+        let match = false;
+        options.forEach(option => {
+            if (option.value === this._value) {
+                match = true;
+            }
+        });
+        if (!match) {
+            this.internals.setValidity({
+                customError: true
+            }, "Please select a valid option from the list.", this.inputEl);
+            return;
+        }
+        this.internals.setValidity({});
+    }
+    setProps(props) {
+        for (const property in props) {
+            const value = props[property];
+            if (property in this) {
+                this[property] = value;
+                continue;
+            }
+            if ([ "string", "number", "boolean" ].includes(typeof value)) {
+                this.setAttribute(property, String(value));
+            }
+        }
+    }
+};
+
+FcSelect.formAssociated = true;
+
+var defineSelect = () => {
+    if (!customElements.get("fc-select")) {
+        customElements.define("fc-select", FcSelect);
+    }
+    return FcSelect;
+};
+
 var defineAll = () => {
     defineCombobox();
     defineOption();
     defineInput();
     defineError();
+    defineLabel();
+    defineSelect();
 };
 
-export { FcCombobox, FcError, FcInput, FcOption, defineAll, defineCombobox, defineError, defineInput, defineOption };
+export { FcCombobox, FcError, FcInput, FcLabel, FcOption, FcSelect, defineAll, defineCombobox, defineError, defineInput, defineLabel, defineOption, defineSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancy-ui-ts",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "type": "module",
   "description": "A library to easily create cool and customizable webcomponents.",
   "main": "dist/index.js",
@@ -26,6 +26,20 @@
     "build": "tsup",
     "build:watch": "tsup --watch"
   },
+  "keywords": [
+    "web-components",
+    "components",
+    "custom-elements",
+    "typescript",
+    "ui-library",
+    "design-system",
+    "combobox",
+    "input",
+    "label",
+    "html",
+    "react",
+    "vue"
+  ],
   "author": "Luan Peixoto",
   "license": "MIT",
   "devDependencies": {