fancy-ui-ts 1.0.0

package/dist/index.js

@@ -0,0 +1,1233 @@
+var styles = `\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n    \tfont-family: var(--fc-font-family);\n\t\tmax-width: var(--fc-combobox-max-width);\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 {\n        background-color: var(--fc-combobox-error-bg);\n        border-color: var(--fc-combobox-error-color);\n    }\n\n    :host([touched]:invalid) .fc-input:focus {\n        box-shadow: 0 0 0 2px var(--fc-combobox-error-focus-ring);\n    }\n\n\t.fc-input {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\n\t\tpadding: var(--fc-combobox-padding);\n\t\tborder-radius: var(--fc-combobox-radius);\n\t\tbackground: var(--fc-combobox-bg);\n\t\tcolor: var(--fc-combobox-fg);\n\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tfont-size: var(--fc-font-size-md);\n\n\t\tbox-shadow: var(--fc-combobox-shadow);\n\t\ttransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\t}\n\n\t.fc-input::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder);\n\t}\n\n\t.fc-input:hover {\n\t\tborder-color: var(--fc-combobox-border-hover);\n\t}\n\n\t.fc-input:focus {\n\t\tborder-color: var(--fc-combobox-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-combobox-focus-ring);\n\t}\n\n\t.fc-options {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 1000;\n\t\tbackground: var(--fc-combobox-dropdown-bg, var(--fc-combobox-bg));\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tborder-radius: var(--fc-combobox-dropdown-radius, var(--fc-combobox-radius));\n\t\tpadding: var(--fc-combobox-dropdown-padding, calc(var(--fc-combobox-padding) - 5px));\n\t\tbox-shadow: var(--fc-combobox-dropdown-shadow);\n\t\tmax-height: var(--fc-combobox-dropdown-max-height, 240px);\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\t\n\t.fc-options[hidden] {\n        display: none !important;\n    }\n\n\t:host([disabled]) {\n        cursor: not-allowed;\n    }\n\n\t.fc-input:disabled {\n\t\tbackground: var(--fc-combobox-disabled-bg);\n        cursor: not-allowed;\n\t\tbox-shadow: none;\n    }\n\n\t.fc-input:disabled::placeholder {\n\t\tcolor: var(--fc-combobox-disabled-placeholder);\n    }\n\n\t.fc-input:disabled:hover {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n\n\t.fc-input:disabled:focus {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n`;
+
+var template = document.createElement("template");
+
+template.innerHTML = `\n\t<style>${styles}</style>\n\n\t<input \n\t\tid="fc-input" \n\t\tclass="fc-input"\n\t\ttype="text" \n\t\trole="combobox"\n\t\taria-autocomplete="list"\n\t\taria-expanded="false"\n\t\taria-haspopup="listbox"\n\t\taria-controls="fc-options"\n\t\tpart="input"\n\t\tautocomplete="off"\n\t/>\n\n\t<div \n\t\tid="fc-options" \n\t\tpart="options" \n\t\tclass="fc-options" \n\t\trole="listbox"\n\t\thidden\n\t>\n\t\t<slot></slot>\n\t</div>\n\t\n`;
+
+var FcCombobox = class extends HTMLElement {
+    constructor() {
+        super();
+        this._value = "";
+        this.activeIndex = -1;
+        this._validatorFunction = null;
+        const shadow = this.attachShadow({
+            mode: "open",
+            delegatesFocus: true
+        });
+        shadow.appendChild(template.content.cloneNode(true));
+        this.internals = this.attachInternals();
+        this.onInput = this.onInput.bind(this);
+        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.onFocus = this.onFocus.bind(this);
+        this.onDropdownClick = this.onDropdownClick.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);
+    }
+    static get observedAttributes() {
+        return [ "placeholder", "name", "value", "disabled", "required", "readonly", "strict" ];
+    }
+    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;
+        }
+        const options = Array.from(this.querySelectorAll("fc-option"));
+        options.forEach(option => {
+            const selected = option.value === newValue;
+            option.selected = selected;
+            option.hidden = !selected;
+            option.active = false;
+            if (selected) {
+                this.inputEl.value = option.label;
+            }
+        });
+        if (this.inputEl.value === "") {
+            this.inputEl.value = newValue;
+        }
+        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");
+    }
+    set readonly(val) {
+        if (val) {
+            this.setAttribute("readonly", "true");
+            return;
+        }
+        this.removeAttribute("readonly");
+    }
+    get strict() {
+        return this.hasAttribute("strict");
+    }
+    set strict(val) {
+        if (val) {
+            this.setAttribute("strict", "");
+            return;
+        }
+        this.removeAttribute("strict");
+    }
+    get validator() {
+        return this._validatorFunction;
+    }
+    set validator(func) {
+        this._validatorFunction = func;
+        this.syncValidity();
+    }
+    connectedCallback() {
+        this.inputEl = this.shadowRoot.getElementById("fc-input");
+        this.dropdownEl = this.shadowRoot.getElementById("fc-options");
+        if (this.hasAttribute("placeholder")) {
+            this.inputEl.placeholder = this.getAttribute("placeholder");
+        }
+        this.internals.setFormValue(this.value);
+        if (this.hasAttribute("disabled")) {
+            this.inputEl.disabled = true;
+            this.internals.ariaDisabled = "true";
+        }
+        if (this.hasAttribute("readonly")) {
+            this.inputEl.readOnly = true;
+        }
+        if (this.hasAttribute("required")) {
+            this.internals.ariaRequired = "true";
+            this.inputEl.required = true;
+        }
+        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.dropdownEl.addEventListener("mousedown", this.onDropdownClick);
+        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();
+        }
+        if (name === "readonly" && this.inputEl) {
+            this.inputEl.readOnly = this.hasAttribute("readonly");
+        }
+        if (name === "strict" && this.inputEl) {
+            this.syncValidity();
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener("click", this.onOutsideClick);
+    }
+    formResetCallback() {
+        this._value = "";
+        if (this.inputEl) {
+            this.inputEl.value = "";
+        }
+        this.internals.setFormValue("");
+        const options = Array.from(this.querySelectorAll("fc-option"));
+        options.forEach(option => {
+            option.selected = false;
+            option.hidden = 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 = Array.from(this.querySelectorAll("fc-option"));
+            const match = options.find(opt => opt.value === restoredValue);
+            if (match && this.inputEl) {
+                this.inputEl.value = match.label;
+                match.selected = true;
+            }
+            this.syncValidity();
+        }
+    }
+    onInput(e) {
+        const rawQuery = e.target.value;
+        const query = rawQuery.toLowerCase().trim();
+        const options = Array.from(this.querySelectorAll("fc-option"));
+        if (query.length === 0) {
+            options.forEach(opt => {
+                opt.hidden = false;
+                opt.selected = false;
+                opt.active = false;
+            });
+            this._value = "";
+            this.internals.setFormValue("");
+            this.inputEl.removeAttribute("aria-activedescendant");
+            this.toggleDropdown(true);
+            this.syncValidity();
+            this.dispatchEvent(new CustomEvent("fc-input", {
+                detail: {
+                    value: rawQuery,
+                    label: rawQuery
+                },
+                bubbles: true,
+                composed: true
+            }));
+            return;
+        }
+        let hasMatch = false;
+        let finalValue = "";
+        options.forEach(option => {
+            const rawLabel = option.getAttribute("label") || option.textContent || "";
+            const label = rawLabel.toLowerCase();
+            const match = label.includes(query);
+            option.hidden = !match;
+            if (match) {
+                hasMatch = true;
+            }
+            const matchExactly = rawQuery === rawLabel && query.length > 0;
+            if (matchExactly && !option.disabled) {
+                finalValue = option.value;
+                option.selected = true;
+                return;
+            }
+            option.selected = false;
+        });
+        if (finalValue == "") {
+            finalValue = rawQuery;
+        }
+        this._value = finalValue;
+        this.internals.setFormValue(finalValue);
+        this.syncValidity();
+        this.dispatchEvent(new CustomEvent("fc-input", {
+            detail: {
+                value: finalValue,
+                label: rawQuery
+            },
+            bubbles: true,
+            composed: true
+        }));
+        this.toggleDropdown(hasMatch);
+    }
+    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 = Array.from(this.querySelectorAll("fc-option"));
+        options.forEach(option => {
+            const selected = option.value === value;
+            option.selected = selected;
+            option.hidden = !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) {
+        if (!this.contains(e.relatedTarget)) {
+            this.toggleDropdown(false);
+        }
+    }
+    onDropdownClick(e) {
+        e.preventDefault();
+    }
+    onFocus(e) {
+        if (this.disabled) {
+            return;
+        }
+        const query = this.inputEl.value.toLowerCase().trim();
+        const options = Array.from(this.querySelectorAll("fc-option"));
+        const match = options.some(option => {
+            const label = (option.getAttribute("label") || option.textContent || "").toLowerCase();
+            return label.includes(query);
+        });
+        this.toggleDropdown(match);
+    }
+    onSlotChange() {
+        if (!this._value) {
+            return;
+        }
+        const options = Array.from(this.querySelectorAll("fc-option"));
+        let foundMatch = false;
+        options.forEach(option => {
+            const selected = option.value === this._value;
+            option.selected = selected;
+            option.hidden = !selected;
+            option.active = false;
+            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();
+            this.toggleDropdown(true);
+            const nextIndex = this.activeIndex >= options.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.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);
+            }
+        } else if (e.key === "Escape") {
+            e.preventDefault();
+            this.toggleDropdown(false);
+        } else if (e.key === "Tab") {
+            this.toggleDropdown(false);
+        }
+    }
+    onBlur() {
+        this.setAttribute("touched", "");
+    }
+    onInvalid(e) {
+        this.setAttribute("touched", "");
+    }
+    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.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 = Array.from(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) {
+            return;
+        }
+        if (this.disabled && show) {
+            return;
+        }
+        const dropdown = this.dropdownEl;
+        if (show) {
+            dropdown.hidden = false;
+            this.setAttribute("open", "true");
+            this.inputEl.setAttribute("aria-expanded", "true");
+            return;
+        }
+        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;
+        }
+        if (this.strict && this._value) {
+            const options = Array.from(this.querySelectorAll("fc-option"));
+            const match = options.some(opt => opt.value === this._value);
+            if (!match) {
+                this.internals.setValidity({
+                    customError: true
+                }, "Please select a valid option from the list.", this.inputEl);
+                return;
+            }
+        }
+        if (this._validatorFunction) {
+            const customErrorMessage = this._validatorFunction(this._value);
+            if (customErrorMessage) {
+                this.internals.setValidity({
+                    customError: true
+                }, customErrorMessage, 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));
+            }
+        }
+    }
+};
+
+FcCombobox.formAssociated = true;
+
+var defineCombobox = () => {
+    if (!customElements.get("fc-combobox")) {
+        customElements.define("fc-combobox", FcCombobox);
+    }
+    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-disabled-fg);\n\t\tbackground: var(--fc-option-disabled-bg);\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-disabled-bg);\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 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`;
+
+var FcOption = class extends HTMLElement {
+    static get observedAttributes() {
+        return [ "value", "label", "selected", "disabled", "active" ];
+    }
+    constructor() {
+        super();
+        const shadow = this.attachShadow({
+            mode: "open"
+        });
+        shadow.appendChild(template2.content.cloneNode(true));
+        this.onClick = this.onClick.bind(this);
+    }
+    get value() {
+        var _a;
+        return (_a = this.getAttribute("value")) != null ? _a : "";
+    }
+    set value(data) {
+        this.setAttribute("value", data);
+    }
+    get label() {
+        var _a, _b;
+        return (_b = (_a = this.getAttribute("label")) != null ? _a : this.textContent) != null ? _b : "";
+    }
+    set label(val) {
+        this.setAttribute("label", val);
+        this.textContent = val;
+    }
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+    set selected(isSelected) {
+        if (isSelected) {
+            this.setAttribute("selected", "true");
+            return;
+        }
+        this.removeAttribute("selected");
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(val) {
+        if (val) {
+            this.setAttribute("disabled", "");
+            return;
+        }
+        this.removeAttribute("disabled");
+    }
+    get active() {
+        return this.hasAttribute("active");
+    }
+    set active(isActive) {
+        if (isActive) {
+            this.setAttribute("active", "true");
+            return;
+        }
+        this.removeAttribute("active");
+    }
+    connectedCallback() {
+        if (!this.id) {
+            this.id = `fc-opt-${Math.random().toString(36).substring(2, 11)}`;
+        }
+        const btn = this.shadowRoot.querySelector("button");
+        if (this.disabled && btn) {
+            btn.disabled = true;
+            btn.setAttribute("aria-disabled", "true");
+        }
+        btn.addEventListener("click", this.onClick);
+    }
+    attributeChangedCallback(name, _oldVal, _newVal) {
+        var _a, _b;
+        if (name === "selected") {
+            this.updateSelection();
+        }
+        if (name === "disabled") {
+            const btn = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("button");
+            if (btn) {
+                const isDisabled = this.hasAttribute("disabled");
+                btn.disabled = isDisabled;
+                btn.setAttribute("aria-disabled", isDisabled.toString());
+            }
+        }
+        if (name === "active") {
+            const btn = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("button");
+            if (btn) {
+                if (this.active) {
+                    btn.setAttribute("data-active", "true");
+                    return;
+                }
+                btn.removeAttribute("data-active");
+            }
+        }
+    }
+    onClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("fc-option-select", {
+            detail: {
+                value: this.value,
+                label: this.label
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    updateSelection() {
+        const button = this.shadowRoot.querySelector("button");
+        if (!button) {
+            return;
+        }
+        button.setAttribute("aria-selected", this.selected ? "true" : "false");
+    }
+    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 defineOption = () => {
+    if (!customElements.get("fc-option")) {
+        customElements.define("fc-option", FcOption);
+    }
+    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-color: var(--fc-input-error-bg);\n\t\tborder-color: var(--fc-input-error-color);\n\t}\n\n\t:host([touched]:invalid) .fc-input-field:focus {\n\t\tbox-shadow: 0 0 0 2px var(--fc-input-error-focus-ring);\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-disabled-bg);\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-disabled-placeholder);\n    }\n\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-color: 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-color: 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-color: var(--fc-input-file-btn-bg-hover); \n\t}\n\n\n\t.fc-input-field::-webkit-file-upload-button:hover {\n\t\tbackground-color: 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 template3 = document.createElement("template");
+
+template3.innerHTML = `\n\t<style>${styles3}</style>\n\n\t<div class="fc-input-wrapper">\n\n\t\t\x3c!-- prefix slot here --\x3e\n\t\t\n\t\t<input \n\t\t\tid="fc-field" \n\t\t\tclass="fc-input-field" \n\t\t\tpart="input"\n\t\t\ttype="text"\n\t\t/>\n\n\t\t\x3c!-- password toggle button --\x3e\n\t\t<button \n\t\t\tid="btn-show-pass" \n\t\t\tclass="fc-password-toggle" \n\t\t\tpart="password-toggle" \n\t\t\ttype="button" \n\t\t\thidden \n\t\t\taria-label="Toggle password visibility"\n\t\t\taria-pressed="false"\n\t\t>\n\t\t\t<svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n\t\t\t\t<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>\n\t\t\t\t<circle cx="12" cy="12" r="3"></circle>\n\t\t\t</svg>\n\t\t\t\n\t\t\t<svg class="icon-eye-off" hidden viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n\t\t\t\t<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>\n\t\t\t\t<line x1="1" y1="1" x2="23" y2="23"></line>\n\t\t\t</svg>\n\t\t</button>\n\n\t\t\x3c!-- suffix slot here --\x3e\n\t</div>\n`;
+
+var FcInput = class extends HTMLElement {
+    constructor() {
+        super();
+        this._value = "";
+        this._validatorFunction = null;
+        this.ALLOWED_TYPES = [ "text", "email", "number", "password", "file", "url" ];
+        const shadow = this.attachShadow({
+            mode: "open",
+            delegatesFocus: true
+        });
+        shadow.appendChild(template3.content.cloneNode(true));
+        this.internals = this.attachInternals();
+        this.onInput = this.onInput.bind(this);
+        this.onChange = this.onChange.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+        this.onTogglePassword = this.onTogglePassword.bind(this);
+        this.onInvalid = this.onInvalid.bind(this);
+    }
+    static get observedAttributes() {
+        return [ "value", "placeholder", "disabled", "name", "type", "required", "readonly", "min", "max", "step", "minlength", "maxlength", "pattern" ];
+    }
+    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 value() {
+        return this._value;
+    }
+    set value(val) {
+        if (this.type === "file") {
+            return;
+        }
+        if (this.inputEl) {
+            this.inputEl.value = val;
+            this.syncValidity();
+        }
+        this._value = val;
+        this.internals.setFormValue(val);
+    }
+    get files() {
+        var _a, _b;
+        return (_b = (_a = this.inputEl) == null ? void 0 : _a.files) != null ? _b : null;
+    }
+    get placeholder() {
+        var _a;
+        return (_a = this.getAttribute("placeholder")) != null ? _a : "";
+    }
+    set placeholder(val) {
+        this.setAttribute("placeholder", val);
+    }
+    get type() {
+        var _a;
+        return (_a = this.getAttribute("type")) != null ? _a : "text";
+    }
+    set type(val) {
+        if (this.ALLOWED_TYPES.includes(val)) {
+            this.setAttribute("type", val);
+            return;
+        }
+        this.setAttribute("type", "text");
+    }
+    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 required() {
+        return this.hasAttribute("required");
+    }
+    set required(val) {
+        if (val) {
+            this.setAttribute("required", "true");
+            return;
+        }
+        this.removeAttribute("required");
+    }
+    get readonly() {
+        return this.hasAttribute("readonly");
+    }
+    set readonly(val) {
+        if (val) {
+            this.setAttribute("readonly", "true");
+            return;
+        }
+        this.removeAttribute("readonly");
+    }
+    get validator() {
+        return this._validatorFunction;
+    }
+    set validator(func) {
+        this._validatorFunction = func;
+        this.syncValidity();
+    }
+    get min() {
+        var _a;
+        return (_a = this.getAttribute("min")) != null ? _a : "";
+    }
+    set min(val) {
+        this.setAttribute("min", val);
+    }
+    get max() {
+        var _a;
+        return (_a = this.getAttribute("max")) != null ? _a : "";
+    }
+    set max(val) {
+        this.setAttribute("max", val);
+    }
+    get step() {
+        var _a;
+        return (_a = this.getAttribute("step")) != null ? _a : "";
+    }
+    set step(val) {
+        this.setAttribute("step", val);
+    }
+    get minLength() {
+        return Number(this.getAttribute("minlength")) || -1;
+    }
+    set minLength(val) {
+        this.setAttribute("minlength", String(val));
+    }
+    get maxLength() {
+        return Number(this.getAttribute("maxlength")) || -1;
+    }
+    set maxLength(val) {
+        this.setAttribute("maxlength", String(val));
+    }
+    get pattern() {
+        var _a;
+        return (_a = this.getAttribute("pattern")) != null ? _a : "";
+    }
+    set pattern(val) {
+        this.setAttribute("pattern", val);
+    }
+    connectedCallback() {
+        this.inputEl = this.shadowRoot.getElementById("fc-field");
+        this.passwordBtnEl = this.shadowRoot.getElementById("btn-show-pass");
+        this.fcPassEnableIcon = this.shadowRoot.querySelector(".icon-eye");
+        this.fcPassDisableIcon = this.shadowRoot.querySelector(".icon-eye-off");
+        if (this.hasAttribute("type")) {
+            const type = this.getAttribute("type");
+            this.ALLOWED_TYPES.includes(type) ? this.inputEl.type = type : this.inputEl.type = "text";
+            if (this.passwordBtnEl) {
+                if (type === "password") {
+                    this.passwordBtnEl.hidden = false;
+                    this.updateToggleIcon(false);
+                } else {
+                    this.passwordBtnEl.hidden = true;
+                }
+            }
+        }
+        if (this.hasAttribute("disabled")) {
+            this.inputEl.disabled = true;
+            this.internals.ariaDisabled = "true";
+        }
+        if (this.hasAttribute("readonly")) {
+            this.inputEl.readOnly = true;
+        }
+        if (this.hasAttribute("required")) {
+            this.inputEl.required = true;
+        }
+        if (this.hasAttribute("placeholder")) {
+            this.inputEl.placeholder = this.getAttribute("placeholder");
+        }
+        if (this.hasAttribute("min")) {
+            this.inputEl.min = this.getAttribute("min");
+        }
+        if (this.hasAttribute("max")) {
+            this.inputEl.max = this.getAttribute("max");
+        }
+        if (this.hasAttribute("step")) {
+            this.inputEl.step = this.getAttribute("step");
+        }
+        if (this.hasAttribute("pattern")) {
+            this.inputEl.pattern = this.getAttribute("pattern");
+        }
+        if (this.hasAttribute("minlength")) {
+            this.inputEl.minLength = Number(this.getAttribute("minlength"));
+        }
+        if (this.hasAttribute("maxlength")) {
+            this.inputEl.maxLength = Number(this.getAttribute("maxlength"));
+        }
+        if (this.type !== "file") {
+            this.inputEl.value = this._value;
+        }
+        if (this.type !== "file") {
+            this.internals.setFormValue(this._value);
+        }
+        this.inputEl.addEventListener("input", this.onInput);
+        this.inputEl.addEventListener("change", this.onChange);
+        this.inputEl.addEventListener("blur", this.onBlur);
+        this.passwordBtnEl.addEventListener("click", this.onTogglePassword);
+        this.addEventListener("invalid", this.onInvalid);
+        this.syncValidity();
+    }
+    disconnectedCallback() {
+        if (this.inputEl) {
+            this.inputEl.removeEventListener("input", this.onInput);
+            this.inputEl.removeEventListener("change", this.onChange);
+            this.inputEl.removeEventListener("blur", this.onBlur);
+        }
+    }
+    attributeChangedCallback(name, _oldVal, newVal) {
+        if (name === "value" && !(this.type === "file")) {
+            if (this.inputEl) {
+                this.inputEl.value = newVal;
+                this.syncValidity();
+            }
+            this._value = newVal;
+            this.internals.setFormValue(newVal);
+            return;
+        }
+        if (!this.inputEl) {
+            return;
+        }
+        switch (name) {
+          case "placeholder":
+            this.inputEl.placeholder = newVal;
+            break;
+
+          case "type":
+            const type = this.getAttribute("type");
+            this.ALLOWED_TYPES.includes(type) ? this.inputEl.type = type : this.inputEl.type = "text";
+            if (this.passwordBtnEl) {
+                if (type === "password") {
+                    this.passwordBtnEl.hidden = false;
+                    this.updateToggleIcon(false);
+                } else {
+                    this.passwordBtnEl.hidden = true;
+                }
+            }
+            break;
+
+          case "disabled":
+            this.inputEl.disabled = this.hasAttribute("disabled");
+            this.internals.ariaDisabled = this.hasAttribute("disabled") ? "true" : "false";
+            break;
+
+          case "readonly":
+            this.inputEl.readOnly = this.hasAttribute("readonly");
+            break;
+
+          case "required":
+            this.inputEl.required = this.hasAttribute("required");
+            this.internals.ariaRequired = this.hasAttribute("required") ? "true" : "false";
+            this.syncValidity();
+            break;
+
+          case "name":
+            this.internals.setFormValue(this.value);
+            break;
+
+          case "min":
+            this.inputEl.min = newVal;
+            this.syncValidity();
+            break;
+
+          case "max":
+            this.inputEl.max = newVal;
+            this.syncValidity();
+            break;
+
+          case "step":
+            this.inputEl.step = newVal;
+            this.syncValidity();
+            break;
+
+          case "minlength":
+            this.inputEl.minLength = Number(newVal);
+            this.syncValidity();
+            break;
+
+          case "maxlength":
+            this.inputEl.maxLength = Number(newVal);
+            this.syncValidity();
+            break;
+
+          case "pattern":
+            this.inputEl.pattern = newVal;
+            this.syncValidity();
+            break;
+        }
+    }
+    formResetCallback() {
+        if (this.inputEl) {
+            this.inputEl.value = "";
+        }
+        this._value = "";
+        this.internals.setFormValue("");
+        this.syncValidity();
+        this.removeAttribute("touched");
+        this.dispatchEvent(new CustomEvent("fc-reset", {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    formStateRestoreCallback(state, _mode) {
+        if (this.type === "file") {
+            return;
+        }
+        const restoredValue = state;
+        if (restoredValue) {
+            if (this.type === "file") {
+                return;
+            }
+            if (this.inputEl) {
+                this.inputEl.value = restoredValue;
+                this.syncValidity();
+            }
+            this._value = restoredValue;
+            this.internals.setFormValue(restoredValue);
+        }
+    }
+    onInput(e) {
+        const value = e.target.value;
+        this._value = value;
+        if (this.type !== "file") {
+            this.internals.setFormValue(value);
+        }
+        this.syncValidity();
+        this.dispatchEvent(new CustomEvent("fc-input", {
+            detail: {
+                value: value
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    onChange(e) {
+        const target = e.target;
+        this._value = target.value;
+        this.internals.setFormValue(target.value);
+        this.syncValidity();
+        this.dispatchEvent(new CustomEvent("fc-change", {
+            detail: {
+                value: target.value,
+                files: target.files
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    onBlur() {
+        this.setAttribute("touched", "");
+    }
+    onInvalid(e) {
+        this.setAttribute("touched", "");
+    }
+    onTogglePassword(e) {
+        e.preventDefault();
+        if (this.inputEl.type === "password") {
+            this.inputEl.type = "text";
+            this.updateToggleIcon(true);
+            this.passwordBtnEl.setAttribute("aria-pressed", "true");
+            this.inputEl.focus();
+            return;
+        }
+        if (this.inputEl.type === "text") {
+            this.inputEl.type = "password";
+            this.updateToggleIcon(false);
+            this.passwordBtnEl.setAttribute("aria-pressed", "false");
+            this.inputEl.focus();
+        }
+    }
+    updateToggleIcon(isVisible) {
+        if (isVisible) {
+            this.fcPassEnableIcon.setAttribute("hidden", "true");
+            this.fcPassDisableIcon.removeAttribute("hidden");
+            return;
+        }
+        this.fcPassEnableIcon.removeAttribute("hidden");
+        this.fcPassDisableIcon.setAttribute("hidden", "true");
+    }
+    syncValidity() {
+        if (!this.inputEl) {
+            return;
+        }
+        if (!this.inputEl.validity.valid) {
+            this.internals.setValidity(this.inputEl.validity, this.inputEl.validationMessage, this.inputEl);
+            return;
+        }
+        if (this._validatorFunction) {
+            const customErrorMessage = this._validatorFunction(this.value);
+            if (customErrorMessage) {
+                this.internals.setValidity({
+                    customError: true
+                }, customErrorMessage, this.inputEl);
+                return;
+            }
+        }
+        this.internals.setValidity({});
+        return;
+    }
+    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));
+            }
+        }
+    }
+};
+
+FcInput.formAssociated = true;
+
+var defineInput = () => {
+    if (!customElements.get("fc-input")) {
+        customElements.define("fc-input", FcInput);
+    }
+    return FcInput;
+};
+
+var styles4 = `\n    :host {\n        display: block;\n        width: 100%;\n\t\tbox-sizing: border-box;\n        contain: content;\n        max-width: var(--fc-error-max-width);\n    }\n\n    :host([hidden]) {\n        display: none !important;\n    }\n\n    .fc-error-text {\n        color: var(--fc-error-color);\n        font-family: var(--fc-font-family, inherit);\n        font-size: var(--fc-error-font-size);\n        display: flex;\n        align-items: center;\n        gap: 4px;\n    }\n`;
+
+var template4 = document.createElement("template");
+
+template4.innerHTML = `\n    <style>${styles4}</style>\n    <div class="fc-error-text" part="text" aria-live="polite">\n    </div>\n`;
+
+var FcError = class extends HTMLElement {
+    constructor() {
+        super();
+        this.targetEl = null;
+        const shadow = this.attachShadow({
+            mode: "open"
+        });
+        shadow.appendChild(template4.content.cloneNode(true));
+        this.errorTextEl = shadow.querySelector(".fc-error-text");
+        this.handleErrorState = this.handleErrorState.bind(this);
+    }
+    static get observedAttributes() {
+        return [ "for" ];
+    }
+    connectedCallback() {
+        this.findTarget();
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (name === "for" && oldVal !== newVal) {
+            this.findTarget();
+        }
+    }
+    handleErrorState() {
+        if (!this.targetEl) {
+            return;
+        }
+        const isTouched = this.targetEl.hasAttribute("touched");
+        const isValid = this.targetEl.validity.valid;
+        if (!isValid && isTouched) {
+            this.removeAttribute("hidden");
+            this.errorTextEl.textContent = this.targetEl.validationMessage;
+            return;
+        }
+        this.setAttribute("hidden", "");
+    }
+    findTarget() {
+        this.cleanup();
+        const targetId = this.getAttribute("for");
+        if (!targetId) {
+            return;
+        }
+        const target = document.getElementById(targetId);
+        if (target) {
+            this.targetEl = target;
+            this.bindListeners();
+        }
+    }
+    bindListeners() {
+        if (!this.targetEl) {
+            return;
+        }
+        this.targetEl.addEventListener("blur", this.handleErrorState);
+        this.targetEl.addEventListener("invalid", this.handleErrorState);
+        this.targetEl.addEventListener("fc-input", this.handleErrorState);
+        this.targetEl.addEventListener("fc-change", this.handleErrorState);
+        this.targetEl.addEventListener("fc-reset", this.handleErrorState);
+    }
+    cleanup() {
+        if (this.targetEl) {
+            this.targetEl.removeEventListener("blur", this.handleErrorState);
+            this.targetEl.removeEventListener("invalid", this.handleErrorState);
+            this.targetEl.removeEventListener("fc-input", this.handleErrorState);
+            this.targetEl.removeEventListener("fc-change", this.handleErrorState);
+            this.targetEl.removeEventListener("fc-reset", this.handleErrorState);
+            this.targetEl = null;
+        }
+    }
+};
+
+var defineError = () => {
+    if (!customElements.get("fc-error")) {
+        customElements.define("fc-error", FcError);
+    }
+    return FcError;
+};
+
+var defineAll = () => {
+    defineCombobox();
+    defineOption();
+    defineInput();
+    defineError();
+};
+
+export { FcCombobox, FcError, FcInput, FcOption, defineAll, defineCombobox, defineError, defineInput, defineOption };