@dropi/ui 0.1.19 → 0.1.21

package/dist/collection/components/dropi-input/dropi-input.js

@@ -17,8 +17,8 @@ import { h } from "@stencil/core";
 export class DropiInput {
     internals;
     // ── Identification ──────────────────────────────────────────
-    /** Input id. Defaults to label value. */
-    inputId = '';
+    /** Input id. Defaults to label label. */
+    id = '';
     /** Name attribute for native form submission */
     name = '';
     // ── Content ─────────────────────────────────────────────────
@@ -29,31 +29,31 @@ export class DropiInput {
     /** Current value (controlled) */
     value = '';
     /** Max character length */
-    maxlength;
+    maxLength;
     // ── Behavior ────────────────────────────────────────────────
     /** Disable the input */
     disabled = false;
-    /** Mark as required (shows asterisk when showAsterisk is true) */
+    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
     required = false;
     /** Show the required asterisk on the label */
-    showAsterisk = true;
+    showObligatoryAsterisk = true;
     /** Show label above the input (fixed), instead of floating inside */
     fixedLabel = false;
     /** Keyboard input mode hint */
     inputMode = 'text';
     // ── Input type modifiers ────────────────────────────────────
     /** Show password visibility toggle (renders as password field) */
-    passwordInput = false;
+    isPasswordInput = false;
     /** Apply thousand separator formatting (e.g. 1,000,000) */
-    moneyFormat = false;
+    isMoneyInput = false;
     /** Apply thousand separator without currency symbol */
-    thousandSeparator = false;
+    isThousandSeparator = false;
     /** Only allow numeric characters */
-    onlyNumbers = false;
-    /** Allow decimal point when onlyNumbers is true */
+    isNumericInput = false;
+    /** Allow decimal point when isNumericInput is true */
     allowDecimals = false;
     /** Only allow letter characters */
-    onlyLetters = false;
+    isLettersOnly = false;
     // ── Icon ────────────────────────────────────────────────────
     /** Icon name shown inside the input (only visible when value is not empty) */
     icon = '';
@@ -61,23 +61,69 @@ export class DropiInput {
     iconColor = 'Gray-Gray-400';
     // ── Validation ──────────────────────────────────────────────
     /** Mark the field as invalid (consumer-controlled) */
-    invalid = false;
+    hasError = false;
     /** Helper / error text shown below the field */
-    helperText = '';
-    /** Only show helperText when the field is invalid */
+    textHelper = '';
+    /** Only show textHelper when the field is invalid */
     showHelperOnlyOnError = false;
+    // ── Angular-parity ──────────────────────────────────────────
+    /**
+     * Convenience object prop — matches Angular `inputProperties: InputProperties`.
+     * Fields: id, label, placeholder, maxLength, textHelper, isPasswordInput,
+     * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
+     * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
+     * isLettersOnly, inputMode.
+     * Note: `formControl` is not supported; use `value` + onInput event instead.
+     */
+    inputProperties = null;
     // ── Internal state ──────────────────────────────────────────
     showPassword = false;
     touched = false;
     // ── Events ──────────────────────────────────────────────────
     /** Emitted on every keystroke with the current value */
-    dropiInput;
+    onInput;
     /** Emitted on blur with the final value */
-    dropiChange;
+    onChange;
     /** Emitted on focus */
-    dropiFocus;
+    onFocus;
     /** Emitted on blur */
-    dropiBlur;
+    onBlur;
+    inputPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.id !== undefined)
+            this.id = val.id;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.maxLength !== undefined)
+            this.maxLength = val.maxLength;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.isPasswordInput !== undefined)
+            this.isPasswordInput = val.isPasswordInput;
+        if (val.icon !== undefined)
+            this.icon = val.icon;
+        if (val.iconColor !== undefined)
+            this.iconColor = val.iconColor;
+        if (val.isMoneyInput !== undefined)
+            this.isMoneyInput = val.isMoneyInput;
+        if (val.showObligatoryAsterisk !== undefined)
+            this.showObligatoryAsterisk = val.showObligatoryAsterisk;
+        if (val.isNumericInput !== undefined)
+            this.isNumericInput = val.isNumericInput;
+        if (val.allowDecimals !== undefined)
+            this.allowDecimals = val.allowDecimals;
+        if (val.isThousandSeparator !== undefined)
+            this.isThousandSeparator = val.isThousandSeparator;
+        if (val.showHelperOnlyOnError !== undefined)
+            this.showHelperOnlyOnError = val.showHelperOnlyOnError;
+        if (val.isLettersOnly !== undefined)
+            this.isLettersOnly = val.isLettersOnly;
+        if (val.inputMode !== undefined)
+            this.inputMode = val.inputMode;
+    }
     valueChanged(val) {
         this.internals.setFormValue(val);
     }
@@ -86,35 +132,37 @@ export class DropiInput {
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value ?? '');
+        if (this.inputProperties)
+            this.inputPropertiesChanged(this.inputProperties);
     }
     // ── Handlers ────────────────────────────────────────────────
     handleInput(e) {
         let val = e.target.value;
-        if (this.onlyNumbers)
+        if (this.isNumericInput)
             val = this.filterNumbers(val);
-        if (this.onlyLetters)
+        if (this.isLettersOnly)
             val = this.filterLetters(val);
-        if (this.moneyFormat || this.thousandSeparator)
-            val = this.formatThousands(val, this.moneyFormat);
+        if (this.isMoneyInput || this.isThousandSeparator)
+            val = this.formatThousands(val, this.isMoneyInput);
         this.value = val;
         this.internals.setFormValue(val);
-        this.dropiInput.emit(val);
+        this.onInput.emit(val);
     }
     handleKeyDown(e) {
-        if ((this.onlyNumbers || this.moneyFormat || this.thousandSeparator) && !this.isAllowedNumberKey(e)) {
+        if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
             e.preventDefault();
         }
-        if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
+        if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {
             e.preventDefault();
         }
     }
     handleFocus() {
-        this.dropiFocus.emit();
+        this.onFocus.emit();
     }
     handleBlur() {
         this.touched = true;
-        this.dropiChange.emit(this.value);
-        this.dropiBlur.emit();
+        this.onChange.emit(this.value);
+        this.onBlur.emit();
     }
     togglePassword() {
         if (this.disabled)
@@ -158,38 +206,38 @@ export class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.id || this.label;
     }
     get inputType() {
-        if (this.passwordInput)
+        if (this.isPasswordInput)
             return this.showPassword ? 'text' : 'password';
         return 'text';
     }
     get showHelper() {
-        if (!this.helperText)
+        if (!this.textHelper)
             return false;
         if (this.showHelperOnlyOnError)
-            return this.invalid && this.touched;
+            return this.hasError && this.touched;
         return true;
     }
     get isInvalid() {
-        return this.invalid && this.touched;
+        return this.hasError && this.touched;
     }
     // ── Render ───────────────────────────────────────────────────
     render() {
-        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
+        const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '444e873dc4175e75a5c85814499e28afb3f80b37', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'a501500f872b87ad701f5c18e0e3b532005c3fcb', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '1ca3afb47b67cfb61cd8bceb8657c9f061462064', class: "asterisk" }, " *"))), h("div", { key: 'eb31110de652f6db7c5fdd747046280b0e81e2b6', class: "form-group" }, h("div", { key: 'b0bb2cac1e8d7f20d927437e4ba6327e333d1fdb', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '604a369b358b1c95a19cc23dd4bc4f9c77e4b050', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'b1b3b979d172ada0c3fe616f795c7cd5b2bf45cb', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'b5488711765a12b6e9fea7b0f8d5a23ae95de925', id: this.resolvedId, class: {
+        return (h("div", { key: '2156d42c9c108aabf2089c0c786c1fb520457c05', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '6ccd102fe2873bb2c338a0e5e63b3622a2be1812', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'd7057cd87b711e9b158ac847b5e85cb5058736a8', class: "asterisk" }, " *"))), h("div", { key: 'b91973d056acf1c25bd220868a12d9d3afdba86f', class: "form-group" }, h("div", { key: '5cb70a37814949372eeab77746bf609a6500cf0b', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '2bad8e8a23875531285d0321f4c629671b13dd84', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.isPasswordInput && (h("dropi-icon", { key: 'e330216b12fdf771e891a207f60ffea359d81702', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '17a548015deebd47d2f3e5751edbc596161fa836', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
-                'text-password': this.passwordInput && !this.showPassword,
+                'text-password': this.isPasswordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: 'f3008d901c41e6f362977e1232e7597733c4288e', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '1b982a1630f88557380df2f22c0c27bcceebbdc6', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '30382a8e7beb0a14bb06f8fd25dae3da5371efd3', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'a1ef2b7a9a659301cc22c19d5e5f65bd7a595a2c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '289250769c59d1ddde821395a9e97368404ca1ab', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8dcc33eecd0b36188977c0f9139044f7d343c1c9', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '8944ef639c328e0745b820b83fcf5c4772cae226', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '7087f38a3bf05fa0514a4edbd8c6e1c6ae7ffcc6', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '2c91fc6773478a592aa4940c7251f15d3026d07c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '6ec4185eac0b8ea1fdfd810e366cec4616880eed', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
-            } }, this.helperText)))))));
+            } }, this.textHelper)))))));
     }
     static get is() { return "dropi-input"; }
     static get encapsulation() { return "shadow"; }
@@ -206,9 +254,9 @@ export class DropiInput {
     }
     static get properties() {
         return {
-            "inputId": {
+            "id": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -218,12 +266,12 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Input id. Defaults to label value."
+                    "text": "Input id. Defaults to label label."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "input-id",
+                "attribute": "id",
                 "defaultValue": "''"
             },
             "name": {
@@ -248,7 +296,7 @@ export class DropiInput {
             },
             "label": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -268,7 +316,7 @@ export class DropiInput {
             },
             "placeholder": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -306,9 +354,9 @@ export class DropiInput {
                 "attribute": "value",
                 "defaultValue": "''"
             },
-            "maxlength": {
+            "maxLength": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -323,7 +371,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "maxlength"
+                "attribute": "max-length"
             },
             "disabled": {
                 "type": "boolean",
@@ -357,7 +405,7 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Mark as required (shows asterisk when showAsterisk is true)"
+                    "text": "Mark as required (shows asterisk when showObligatoryAsterisk is true)"
                 },
                 "getter": false,
                 "setter": false,
@@ -365,9 +413,9 @@ export class DropiInput {
                 "attribute": "required",
                 "defaultValue": "false"
             },
-            "showAsterisk": {
+            "showObligatoryAsterisk": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -382,7 +430,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-asterisk",
+                "attribute": "show-obligatory-asterisk",
                 "defaultValue": "true"
             },
             "fixedLabel": {
@@ -407,7 +455,7 @@ export class DropiInput {
             },
             "inputMode": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "InputMode",
                     "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
@@ -431,9 +479,9 @@ export class DropiInput {
                 "attribute": "input-mode",
                 "defaultValue": "'text'"
             },
-            "passwordInput": {
+            "isPasswordInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -448,12 +496,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "password-input",
+                "attribute": "is-password-input",
                 "defaultValue": "false"
             },
-            "moneyFormat": {
+            "isMoneyInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -468,12 +516,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "money-format",
+                "attribute": "is-money-input",
                 "defaultValue": "false"
             },
-            "thousandSeparator": {
+            "isThousandSeparator": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -488,12 +536,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "thousand-separator",
+                "attribute": "is-thousand-separator",
                 "defaultValue": "false"
             },
-            "onlyNumbers": {
+            "isNumericInput": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -508,12 +556,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "only-numbers",
+                "attribute": "is-numeric-input",
                 "defaultValue": "false"
             },
             "allowDecimals": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -523,7 +571,7 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allow decimal point when onlyNumbers is true"
+                    "text": "Allow decimal point when isNumericInput is true"
                 },
                 "getter": false,
                 "setter": false,
@@ -531,9 +579,9 @@ export class DropiInput {
                 "attribute": "allow-decimals",
                 "defaultValue": "false"
             },
-            "onlyLetters": {
+            "isLettersOnly": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -548,12 +596,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "only-letters",
+                "attribute": "is-letters-only",
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -573,7 +621,7 @@ export class DropiInput {
             },
             "iconColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -591,9 +639,9 @@ export class DropiInput {
                 "attribute": "icon-color",
                 "defaultValue": "'Gray-Gray-400'"
             },
-            "invalid": {
+            "hasError": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -608,12 +656,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
+                "attribute": "has-error",
                 "defaultValue": "false"
             },
-            "helperText": {
+            "textHelper": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -628,12 +676,12 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "helper-text",
+                "attribute": "text-helper",
                 "defaultValue": "''"
             },
             "showHelperOnlyOnError": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -643,13 +691,33 @@ export class DropiInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Only show helperText when the field is invalid"
+                    "text": "Only show textHelper when the field is invalid"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-helper-only-on-error",
                 "defaultValue": "false"
+            },
+            "inputProperties": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `inputProperties: InputProperties`.\nFields: id, label, placeholder, maxLength, textHelper, isPasswordInput,\nicon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\nallowDecimals, isThousandSeparator, showHelperOnlyOnError,\nisLettersOnly, inputMode.\nNote: `formControl` is not supported; use `value` + onInput event instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-properties",
+                "defaultValue": "null"
             }
         };
     }
@@ -661,8 +729,8 @@ export class DropiInput {
     }
     static get events() {
         return [{
-                "method": "dropiInput",
-                "name": "dropiInput",
+                "method": "onInput",
+                "name": "onInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -676,8 +744,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -691,8 +759,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiFocus",
-                "name": "dropiFocus",
+                "method": "onFocus",
+                "name": "onFocus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -706,8 +774,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "dropiBlur",
-                "name": "dropiBlur",
+                "method": "onBlur",
+                "name": "onBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -724,6 +792,9 @@ export class DropiInput {
     }
     static get watchers() {
         return [{
+                "propName": "inputProperties",
+                "methodName": "inputPropertiesChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }, {

package/dist/collection/components/dropi-languages-selector/dropi-languages-selector.css

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.custom-dropdown {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-dropdown.open dropi-icon {
+  transform: rotate(180deg);
+}
+
+.selected-option {
+  display: flex;
+  height: 38px;
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  border-radius: 4px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  background: var(--Neutral-White, #ffffff);
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.dropdown-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 6px;
+  margin-top: 4px;
+  z-index: 1000;
+  overflow-y: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  list-style: none;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
+  max-height: 0;
+}
+
+.dropdown-options.dropdown-open {
+  max-height: 300px;
+  height: auto;
+  opacity: 1;
+  visibility: visible;
+}
+
+.dropdown-options li {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.dropdown-options li:hover,
+.dropdown-options li.active {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+@media screen and (max-width: 720px) {
+  .selected-option span,
+  .dropdown-options li span {
+    display: none;
+  }
+}