@dropi/ui 0.1.18 → 0.1.20

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

@@ -12,6 +12,8 @@ export class DropiPaginator {
     page = 1;
     /** Max page buttons to show at once */
     maxPages = 5;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels = false;
     /** Whether to show the items-per-page selector */
     showPageSizeSelector = false;
     /** Options for items per page */
@@ -69,9 +71,9 @@ export class DropiPaginator {
         const pages = this.pageNumbers;
         const isFirst = this.page <= 1;
         const isLast = this.page >= this.totalPages;
-        return (h("div", { key: '3fbb545d6ff0b345da7698e51bfdee51a13de49e', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '7ae643988a60f2016dce24b53bb9f5ac13414cf0', class: "paginator-size" }, h("span", { key: 'fee6db32b0d13e6c455174f1c57fb35401e65c10', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '0e37733de81c70ac274c8e89af65f0f94115ecb5', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'fb70589d0fd3d8072190099fe187359439707dc1', class: "paginator-pages" }, h("button", { key: '6348dda14005ed8dcd3e96d788715bbd5a9d432e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isFirst, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '2b2c17304b3c246a660b71f5ab5feedfb93ba044', name: "Dropdown-left", width: "16px", height: "16px", color: isFirst ? 'Gray-Gray-300' : 'Gray-Gray-600' })), pages.map((p, i) => p === '...'
+        return (h("div", { key: '23b6e4c63f01a484e61cea9fb6188382848cf675', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '0cfb3aea09339b51e65b2314b1da9915b384c92a', class: "paginator-size" }, h("span", { key: 'bef7700fdd17d4aaa5d800ad117f90b34e56381a', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: 'c25162f2ce42bbc00125a28d707e72fc214b4864', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'f8fd71442442725779786ea3f2334cccf82d237f', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '899e629c0922baa0b71646912e4eed6e6c44536b', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: '0e847019e80d9e6c8d448b904691518a87a3afff', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '606e96d5e1495c17ac86d66d560116574f2aa962', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '695bbfc36e42040c530b4338c9118d9b1da4c1ea', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'c3bc6d3c292f07b782aba6672715163d50907d93', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), h("button", { key: 'fea38306411fd4a73f35231ff632d8846301dd5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isLast, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, h("dropi-icon", { key: 'f7ed587cb578ef0b9872f290cdc17eebe2f9efeb', name: "Dropdown-Right", width: "16px", height: "16px", color: isLast ? 'Gray-Gray-300' : 'Gray-Gray-600' })))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), !isLast && (h("button", { key: '83b89c14ca3fc63679839a4bcb3b416412ebcb01', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: 'e896eb8dd2bbabd932014a100a138af89fdfd2f4', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '2f9ba001d0ca94f8330b910a6dd952d940c622c8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6531b71b3767ae872464605bad8ce8e1a5d609d1', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '9411fdbec9291cf3a3418152efc6ce951e6c4006', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }
@@ -167,6 +169,26 @@ export class DropiPaginator {
                 "attribute": "max-pages",
                 "defaultValue": "5"
             },
+            "noLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide \"Anterior\"/\"Siguiente\" text labels, show only arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-labels",
+                "defaultValue": "false"
+            },
             "showPageSizeSelector": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/dropi-phone-input/dropi-phone-input.css

@@ -0,0 +1,152 @@
+:host { display: block; width: 100%; position: relative; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.phone-label {
+  display: block;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: 4px;
+}
+
+.phone-row {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  height: 40px;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+.phone-row:focus-within { border-color: var(--Info-Info-500, #50a5f1); }
+.phone-row--error { border-color: var(--Error-Error-500, #f46a6b); }
+.phone-row--disabled { background: var(--Gray-Gray-50, #f7f8fa); opacity: 0.6; pointer-events: none; }
+
+.phone-selector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 var(--Size-2, 8px);
+  background: none;
+  border: none;
+  cursor: pointer;
+  height: 100%;
+  flex-shrink: 0;
+}
+.phone-selector:disabled { cursor: default; }
+
+.phone-selector__flag {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+  letter-spacing: 0.5px;
+}
+
+.phone-selector__dial {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.phone-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--Gray-Gray-200, #c3c9d9);
+  flex-shrink: 0;
+}
+
+.phone-input {
+  flex: 1;
+  height: 100%;
+  padding: 0 var(--Size-2, 8px);
+  border: none;
+  outline: none;
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  background: transparent;
+}
+.phone-input::placeholder { color: var(--Gray-Gray-400, #858ea6); }
+
+.phone-error {
+  margin: 4px 0 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+/* Dropdown */
+.phone-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--Neutral-White, #fff);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  z-index: 200;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.phone-dropdown__search-wrap {
+  padding: var(--Size-2, 8px);
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  position: sticky;
+  top: 0;
+  background: var(--Neutral-White, #fff);
+}
+
+.phone-dropdown__search {
+  width: 100%;
+  height: 32px;
+  padding: 0 var(--Size-2, 8px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-1, 4px);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  outline: none;
+}
+.phone-dropdown__search:focus { border-color: var(--Info-Info-500, #50a5f1); }
+
+.phone-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  cursor: pointer;
+  transition: background 0.15s;
+  user-select: none;
+}
+.phone-dropdown__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.phone-dropdown__item--active { background: var(--Primary-Primary-50, #fff5eb); }
+
+.phone-dropdown__code {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+  width: 28px;
+  flex-shrink: 0;
+}
+
+.phone-dropdown__name {
+  flex: 1;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-dropdown__dial {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  flex-shrink: 0;
+}
+
+.phone-dropdown__empty {
+  padding: var(--Size-3, 12px);
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-400, #858ea6);
+  text-align: center;
+}

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

@@ -0,0 +1,272 @@
+import { h } from "@stencil/core";
+const COUNTRIES = [
+    { name: 'Colombia', code: 'CO', dial: '+57', maxLength: 10 },
+    { name: 'Ecuador', code: 'EC', dial: '+593', maxLength: 9 },
+    { name: 'México', code: 'MX', dial: '+52', maxLength: 10 },
+    { name: 'Perú', code: 'PE', dial: '+51', maxLength: 9 },
+    { name: 'Chile', code: 'CL', dial: '+56', maxLength: 9 },
+    { name: 'Argentina', code: 'AR', dial: '+54', maxLength: 10 },
+    { name: 'Venezuela', code: 'VE', dial: '+58', maxLength: 10 },
+    { name: 'Brasil', code: 'BR', dial: '+55', maxLength: 11 },
+    { name: 'Estados Unidos', code: 'US', dial: '+1', maxLength: 10 },
+    { name: 'España', code: 'ES', dial: '+34', maxLength: 9 },
+];
+/**
+ * @component dropi-phone-input
+ * Phone number input with country code selector.
+ * Validates max length per country and emits changes.
+ */
+export class DropiPhoneInput {
+    /** Initial country dial code (e.g. "+57") */
+    codArea = '+57';
+    /** Phone number value */
+    value = '';
+    /** Input placeholder */
+    placeholder = 'Número de teléfono';
+    /** Disabled state */
+    disabled = false;
+    /** Show error state */
+    isValid = true;
+    /** Error message */
+    errorMessage = 'Número inválido';
+    /** Label */
+    label = '';
+    open = false;
+    search = '';
+    /** Emitted when country dial code changes. e.detail = dial code string */
+    dropiCodeChange;
+    /** Emitted when phone number changes. e.detail = phone number string */
+    dropiPhoneChange;
+    codAreaChanged() {
+        this.value = '';
+    }
+    get selectedCountry() {
+        return COUNTRIES.find(c => c.dial === this.codArea) ?? COUNTRIES[0];
+    }
+    get filtered() {
+        if (!this.search)
+            return COUNTRIES;
+        const q = this.search.toLowerCase();
+        return COUNTRIES.filter(c => c.name.toLowerCase().includes(q) || c.dial.includes(q));
+    }
+    selectCountry(c) {
+        this.codArea = c.dial;
+        this.open = false;
+        this.search = '';
+        this.dropiCodeChange.emit(c.dial);
+    }
+    handleInput(e) {
+        const raw = e.target.value.replace(/\D/g, '');
+        this.value = raw.slice(0, this.selectedCountry.maxLength);
+        e.target.value = this.value;
+        this.dropiPhoneChange.emit(this.value);
+    }
+    render() {
+        const country = this.selectedCountry;
+        return (h("div", { key: '8a22ead8fdf5d8916dd6d5376600ded1528f23e3', class: "phone-wrap" }, this.label && h("label", { key: '5d531f606de5691eeb608a3a32b71bd1b7925ae1', class: "phone-label" }, this.label), h("div", { key: '97d858e4dd57114e63bb460970ea5e0a22e3a4a7', class: { 'phone-row': true, 'phone-row--error': !this.isValid, 'phone-row--disabled': this.disabled } }, h("button", { key: '2f18bc35a7698d9c5f24dad68458ff27161c1b9d', type: "button", class: "phone-selector", disabled: this.disabled, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            }, "aria-haspopup": "listbox", "aria-expanded": this.open }, h("span", { key: 'e0e5c9c22eab18335ce75ba273bf98934ad2fec0', class: "phone-selector__flag" }, country.code), h("span", { key: '9494233c07ed5f5fe6f6ad71f1f9d4c2b94be249', class: "phone-selector__dial" }, country.dial), h("dropi-icon", { key: '721e47d92b5dc9f973a5ce08b383a87371fdb736', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), h("div", { key: '93183e161f42b12cd42daa488c49318b2c378351', class: "phone-divider" }), h("input", { key: 'd9b4254f760cf967b2e0ca27946968d2cfc0ca86', class: "phone-input", type: "tel", inputmode: "numeric", placeholder: this.placeholder, value: this.value, disabled: this.disabled, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) })), !this.isValid && (h("p", { key: '62a89722bdab5c9b3a67c444543679acfc91f4e9', class: "phone-error" }, this.errorMessage)), this.open && (h("div", { key: 'd51d4d3a43eb6d823dd9039d534f97e6a456b343', class: "phone-dropdown" }, h("div", { key: 'd3f5912e02d62fdbec2b8a859b49c80b94047a2c', class: "phone-dropdown__search-wrap" }, h("input", { key: '2349669feca48b0760277a4288420f2680eb41c4', class: "phone-dropdown__search", type: "text", placeholder: "Buscar pa\u00EDs...", value: this.search, onInput: (e) => this.search = e.target.value })), this.filtered.length === 0 ? (h("div", { class: "phone-dropdown__empty" }, "Sin resultados")) : (this.filtered.map(c => (h("div", { class: { 'phone-dropdown__item': true, 'phone-dropdown__item--active': c.dial === this.codArea }, onMouseDown: (e) => { e.preventDefault(); this.selectCountry(c); } }, h("span", { class: "phone-dropdown__code" }, c.code), h("span", { class: "phone-dropdown__name" }, c.name), h("span", { class: "phone-dropdown__dial" }, c.dial)))))))));
+    }
+    static get is() { return "dropi-phone-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "codArea": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial country dial code (e.g. \"+57\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cod-area",
+                "defaultValue": "'+57'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Phone number value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'N\u00FAmero de tel\u00E9fono'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "isValid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-valid",
+                "defaultValue": "true"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "'N\u00FAmero inv\u00E1lido'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "search": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiCodeChange",
+                "name": "dropiCodeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when country dial code changes. e.detail = dial code string"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiPhoneChange",
+                "name": "dropiPhoneChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when phone number changes. e.detail = phone number string"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "codArea",
+                "methodName": "codAreaChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -28,7 +28,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'fd1153aa79130eeb865c0289b7e323bdf2459a8c', class: "dropi-radio-button" }, h("label", { key: 'b4fbe10ac36213905779f0976e2e80b549323a52', htmlFor: this.inputId }, h("input", { key: '8f9b74ed53912bdff637b879a50faf4d83b7d62b', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '50ae300b1dc5972c7c8979f7711edd5f59109653', class: "dropi-radio-button" }, h("label", { key: 'c91a4ee63c63fe9ae437f344fa1b249db227a4cb', htmlFor: this.inputId }, h("input", { key: 'ad993a1748315909539f512c09176713693a99d9', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-radio-selection-list/dropi-radio-selection-list.css

@@ -0,0 +1,64 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.rsl__search {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  margin-bottom: var(--Size-2, 8px);
+}
+
+.rsl__search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  background: transparent;
+}
+
+.rsl__list { display: flex; flex-direction: column; gap: var(--Size-2, 8px); }
+
+.rsl__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+  padding: var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.rsl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.rsl__item--selected { border-color: var(--Primary-Primary-500, #f49a3d); background: var(--Primary-Primary-50, #fff5eb); }
+
+.rsl__radio {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--Gray-Gray-300, #a3abbf);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+  transition: border-color 0.15s;
+}
+
+.rsl__radio--checked { border-color: var(--Primary-Primary-500, #f49a3d); }
+
+.rsl__radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+.rsl__content { display: flex; flex-direction: column; gap: 2px; }
+.rsl__name { font-size: var(--font-size-s, 12px); font-weight: var(--font-weight-bold, 700); color: var(--Gray-Gray-700, #32394d); }
+.rsl__desc { font-size: var(--font-size-xs, 10px); color: var(--Gray-Gray-500, #69738c); }