@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.js

@@ -9,20 +9,22 @@ export class DropiCheckboxSelectionList {
     /** Show search filter */
     showFilter = true;
     /** Search placeholder */
-    filterPlaceholder = 'Buscar...';
+    filterPlaceholder = 'Search';
     /** Show "no results" message */
     showNotFound = true;
     /** Empty state message */
-    notFoundMessage = 'Sin resultados';
+    notFoundMessage = 'No related results found';
     /** Allow multiple selection */
     multiSelect = true;
+    /** Debounce delay in ms for search input (matches Angular `searchDelay`) */
+    searchDelay = 100;
     filterText = '';
     selected = [];
     parsedOptions = [];
-    /** Emitted when selection changes. e.detail = selected option ids */
-    dropiCheckedValues;
-    /** Emitted on search input. e.detail = search text */
-    dropiSearch;
+    /** Emitted when selection changes — matches Angular 'checkedValues' */
+    checkedValues;
+    /** Emitted on search — matches Angular 'onSearch' */
+    onSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -31,7 +33,7 @@ export class DropiCheckboxSelectionList {
         if (!this.filterText)
             return this.parsedOptions;
         const q = this.filterText.toLowerCase();
-        return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
+        return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));
     }
     toggle(id) {
         if (this.multiSelect) {
@@ -42,16 +44,16 @@ export class DropiCheckboxSelectionList {
         else {
             this.selected = this.selected.includes(id) ? [] : [id];
         }
-        this.dropiCheckedValues.emit(this.selected);
+        this.checkedValues.emit(this.selected);
     }
     render() {
         const items = this.filtered;
-        return (h("div", { key: '9d51ab3a5e9dc547cd98d851c99ef579b229e12c', class: "csl" }, this.showFilter && (h("div", { key: '2fb9b167722dd7c18b879954a434b5645b9f0d94', class: "csl__search" }, h("dropi-icon", { key: 'ec92ffaa3fef65af3b41f0da876ecffd2ef8797b', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '9b04983e29d09213416084c41ab097c7eb214e7d', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (h("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, h("dropi-icon", { key: '02b8bbc778c1811f65f4cd07bfd0618a0c647573', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '935768e39f732099837e2d3dc4791ab2f7f31273', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
-                this.dropiSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: 'eeb575b800bc047f9c1a4a16a2adab5b1cf7963f', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: '7e0bf6b94a0d8251f7ab7faa7155bbe16eb5380e', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '7be1584cc51b50430f1d86096aa024aa2bcc2dc8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+                this.onSearch.emit(this.filterText);
+            } }), this.filterText && (h("button", { key: 'b93947ffd70113fc80e425dd0da04cce04ad3f27', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: 'b2e152f7276a914fc03664dabdb3574a2cbeb2c6', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '6010ffc9d6ff60dc444da1274609f2b15f69d4a8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
-            return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.name }), h("span", { class: "csl__label" }, opt.name)));
+            return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
         })))));
     }
     static get is() { return "dropi-checkbox-selection-list"; }
@@ -132,7 +134,7 @@ export class DropiCheckboxSelectionList {
                 "setter": false,
                 "reflect": false,
                 "attribute": "filter-placeholder",
-                "defaultValue": "'Buscar...'"
+                "defaultValue": "'Search'"
             },
             "showNotFound": {
                 "type": "boolean",
@@ -172,7 +174,7 @@ export class DropiCheckboxSelectionList {
                 "setter": false,
                 "reflect": false,
                 "attribute": "not-found-message",
-                "defaultValue": "'Sin resultados'"
+                "defaultValue": "'No related results found'"
             },
             "multiSelect": {
                 "type": "boolean",
@@ -193,6 +195,26 @@ export class DropiCheckboxSelectionList {
                 "reflect": false,
                 "attribute": "multi-select",
                 "defaultValue": "true"
+            },
+            "searchDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce delay in ms for search input (matches Angular `searchDelay`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-delay",
+                "defaultValue": "100"
             }
         };
     }
@@ -205,14 +227,14 @@ export class DropiCheckboxSelectionList {
     }
     static get events() {
         return [{
-                "method": "dropiCheckedValues",
-                "name": "dropiCheckedValues",
+                "method": "checkedValues",
+                "name": "checkedValues",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when selection changes. e.detail = selected option ids"
+                    "text": "Emitted when selection changes \u2014 matches Angular 'checkedValues'"
                 },
                 "complexType": {
                     "original": "(string | number)[]",
@@ -220,14 +242,14 @@ export class DropiCheckboxSelectionList {
                     "references": {}
                 }
             }, {
-                "method": "dropiSearch",
-                "name": "dropiSearch",
+                "method": "onSearch",
+                "name": "onSearch",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted on search input. e.detail = search text"
+                    "text": "Emitted on search \u2014 matches Angular 'onSearch'"
                 },
                 "complexType": {
                     "original": "string",

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

@@ -5,20 +5,20 @@ import { h } from "@stencil/core";
  * Use <slot> for the chip label text.
  */
 export class DropiChips {
-    /** Visual style */
-    chipStyle = 'filters';
+    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
+    customStyle = 'fill';
     /** Content type */
-    type = 'text';
+    type = 'icon';
     /** Avatar image URL (when type = 'avatar') */
     urlImg = '';
     /** Show the close/remove icon */
-    showIcon = true;
+    showIcon = false;
     /** Icon name (when type = 'icon') */
     icon = '';
     /** Emitted when the close icon is clicked */
-    dropiClose;
+    onClose;
     render() {
-        return (h("div", { key: '44be034581ddeffb27fb90fec61dd6275dc5998a', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3312f3d54aab3d6546ddde9820569251eb1faaa3', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: 'bf035db87cbe2b8ba9639d3c72b6b9dd706138e9', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: 'cf634d59c25b1ad5590bf2bc19f55cdc50b67a66', class: "chip__text" }, h("slot", { key: '5534b85253e0f2d91c2b901b97c1e90b5c5c4b32' })), this.showIcon && (h("button", { key: '70723641a9ef1c8b9e412fc7442156d604fcc6d0', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: 'beeefbb7aaec6af0762c1f4611d3fb88e6ef8bd1', name: "Close-small", width: "14px", height: "14px", color: "currentColor" })))));
+        return (h("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '42c60e26f35e08582045833049d140c3aceaa11d', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: '474a4adfc086e20b2007f1b423f53b29454546be', class: "chip__text" }, h("slot", { key: '3c3460ffc17a54b8446b63f7b7c7a76162bb5838' })), this.showIcon && (h("button", { key: '6da5b10c81f203dcd204c0fa93babbcab8aaba16', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '14ef2e91ede7847830b0e491fd844f9efa637f9a', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
     }
     static get is() { return "dropi-chips"; }
     static get encapsulation() { return "shadow"; }
@@ -34,12 +34,12 @@ export class DropiChips {
     }
     static get properties() {
         return {
-            "chipStyle": {
+            "customStyle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "ChipStyle",
-                    "resolved": "\"fill\" | \"filters\"",
+                    "resolved": "\"fill\" | \"filtrers\"",
                     "references": {
                         "ChipStyle": {
                             "location": "local",
@@ -52,13 +52,13 @@ export class DropiChips {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style"
+                    "text": "Visual style (named customStyle to avoid conflict with HTMLElement.style)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "chip-style",
-                "defaultValue": "'filters'"
+                "attribute": "custom-style",
+                "defaultValue": "'fill'"
             },
             "type": {
                 "type": "string",
@@ -84,7 +84,7 @@ export class DropiChips {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type",
-                "defaultValue": "'text'"
+                "defaultValue": "'icon'"
             },
             "urlImg": {
                 "type": "string",
@@ -124,7 +124,7 @@ export class DropiChips {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-icon",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
@@ -150,8 +150,8 @@ export class DropiChips {
     }
     static get events() {
         return [{
-                "method": "dropiClose",
-                "name": "dropiClose",
+                "method": "onClose",
+                "name": "onClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1,51 +1,64 @@
 :host {
   display: block;
   width: 100%;
+  position: relative;
 }
 
 *, *::before, *::after { box-sizing: border-box; }
 
+/* ── Wrapper ──────────────────────────────────────────────────────── */
 .city-selector {
   position: relative;
   width: 100%;
 }
 
-.city-selector.disabled .selector-trigger {
-  background: var(--Gray-Gray-50, #f7f8fa);
-  border-color: var(--Gray-Gray-100, #e6eaf2);
-  cursor: not-allowed;
-}
-
+/* ── Trigger ──────────────────────────────────────────────────────── */
 .selector-trigger {
-  min-height: 40px;
-  padding: 6px 10px;
+  width: 100%;
+  min-height: 44px;
+  padding: 6px 12px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   cursor: pointer;
-  transition: border-color 0.15s ease;
+  text-align: left;
+  font-family: inherit;
+  transition: border-color 0.15s;
 }
 
-.selector-trigger:hover:not(.disabled *) {
+.selector-trigger:hover:not(:disabled) {
   border-color: var(--Gray-Gray-300, #a3abbf);
 }
 
+.selector-trigger:focus {
+  outline: none;
+  border-color: var(--Info-Info-500, #50a5f1);
+}
+
+.city-selector--disabled .selector-trigger {
+  background: var(--Gray-Gray-50, #f7f8fa);
+  border-color: var(--Gray-Gray-100, #e6eaf2);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* ── Chips area ───────────────────────────────────────────────────── */
 .chips-area {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   flex: 1;
-  min-height: 24px;
+  min-height: 26px;
   align-items: center;
 }
 
 .placeholder {
   color: var(--Gray-Gray-400, #858ea6);
-  font-size: var(--font-size-s, 12px);
+  font-size: var(--font-size-s, 14px);
 }
 
 .chip {
@@ -54,9 +67,9 @@
   gap: 4px;
   background: var(--Primary-Primary-50, #fff8f0);
   border: 1px solid var(--Primary-Primary-200, #fcd5a8);
-  border-radius: 4px;
+  border-radius: var(--Border-1, 4px);
   padding: 2px 6px;
-  font-size: var(--font-size-xs, 11px);
+  font-size: var(--font-size-xs, 12px);
   color: var(--Primary-Primary-700, #b85c00);
 }
 
@@ -64,93 +77,142 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
   padding: 0;
-  color: var(--Primary-Primary-500, #f49a3d);
   display: flex;
   align-items: center;
 }
 
+/* ── Dropdown ─────────────────────────────────────────────────────── */
 .dropdown {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   right: 0;
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
   z-index: 200;
   overflow: hidden;
 }
 
+/* ── Search ───────────────────────────────────────────────────────── */
 .search-wrap {
-  padding: 8px;
+  padding: 10px 12px;
   border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
 }
 
+.search-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
 .search-input {
   width: 100%;
-  padding: 6px 10px;
+  height: 36px;
+  padding: 0 36px 0 12px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-1, 4px);
-  font-size: var(--font-size-s, 12px);
+  border-radius: var(--Border-2, 8px);
+  font-size: var(--font-size-s, 14px);
   font-family: inherit;
-  color: var(--Gray-Gray-600, #475066);
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Gray-Gray-50, #f7f8fa);
   outline: none;
+  transition: border-color 0.15s;
 }
 
 .search-input:focus {
-  border-color: var(--Primary-Primary-500, #f49a3d);
+  border-color: var(--Info-Info-500, #50a5f1);
+  background: var(--Neutral-White, #ffffff);
 }
 
+.search-input::placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.search-icon {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+/* ── Options list ─────────────────────────────────────────────────── */
 .options-list {
-  max-height: 240px;
+  max-height: 280px;
   overflow-y: auto;
+  background: var(--Neutral-White, #ffffff);
+}
+
+/* Scrollbar refinado */
+.options-list::-webkit-scrollbar { width: 6px; }
+.options-list::-webkit-scrollbar-track { background: transparent; }
+.options-list::-webkit-scrollbar-thumb {
+  background: var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 4px;
 }
 
+/* ── Group label ──────────────────────────────────────────────────── */
 .group-label {
-  padding: 6px 12px 2px;
-  font-size: var(--font-size-xs, 11px);
-  font-weight: var(--font-weight-semibold, 600);
-  color: var(--Gray-Gray-400, #858ea6);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  background: var(--Gray-Gray-50, #f7f8fa);
-  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  padding: 14px 16px 8px;
+  font-size: var(--font-size-m, 16px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1f2433);
+  background: var(--Neutral-White, #ffffff);
 }
 
+/* ── City option ──────────────────────────────────────────────────── */
 .city-option {
-  padding: 8px 12px;
+  padding: 10px 16px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   cursor: pointer;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-600, #475066);
-  transition: background 0.1s ease;
+  font-size: var(--font-size-s, 14px);
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Neutral-White, #ffffff);
+  transition: background 0.1s;
+  user-select: none;
 }
 
 .city-option:hover {
   background: var(--Gray-Gray-50, #f7f8fa);
 }
 
-.city-option.selected {
-  color: var(--Primary-Primary-600, #d97c1a);
-  background: var(--Primary-Primary-50, #fff8f0);
+.city-option--selected .city-label {
+  color: var(--Gray-Gray-800, #1f2433);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+/* ── Checkbox visual ──────────────────────────────────────────────── */
+.checkbox {
+  width: 22px;
+  height: 22px;
+  border: 1.5px solid var(--Gray-Gray-300, #c3c9d9);
+  border-radius: var(--Border-1, 6px);
+  background: var(--Neutral-White, #ffffff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.checkbox--checked {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+  background: var(--Primary-Primary-500, #f49a3d);
 }
 
-.check-mark {
-  width: 16px;
-  font-size: 12px;
-  color: var(--Primary-Primary-500, #f49a3d);
-  font-weight: bold;
+.city-label {
+  flex: 1;
 }
 
+/* ── Empty ────────────────────────────────────────────────────────── */
 .no-results {
-  padding: 16px;
+  padding: 20px 16px;
   text-align: center;
   color: var(--Gray-Gray-400, #858ea6);
-  font-size: var(--font-size-s, 12px);
+  font-size: var(--font-size-s, 14px);
 }

package/dist/collection/components/dropi-city-selector/dropi-city-selector.js

@@ -16,19 +16,33 @@ export class DropiCitySelector {
     /** Currently selected city values */
     selectedCities = [];
     /** Placeholder text */
-    placeholder = 'Selecciona ciudades';
+    placeholder = 'Seleccione una ciudad';
     /** Disable the selector */
     disabled = false;
     /** Emitted when selection changes. Detail = selected values array. */
-    dropiCityChange;
+    selectedCitiesChange;
     isOpen = false;
     selected = [];
     parsedOptions = [];
     searchTerm = '';
+    el;
+    handleDocClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
     optionsChanged(val) {
+        if (val == null) {
+            this.parsedOptions = [];
+            return;
+        }
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
     }
     selectedChanged(val) {
+        if (val == null) {
+            this.selected = [];
+            return;
+        }
         this.selected = typeof val === 'string' ? JSON.parse(val) : [...val];
     }
     componentWillLoad() {
@@ -48,19 +62,20 @@ export class DropiCitySelector {
             return;
         this.isOpen = !this.isOpen;
     }
-    toggleCity(value) {
+    toggleCity(value, e) {
+        e.stopPropagation();
         if (this.selected.includes(value)) {
             this.selected = this.selected.filter(v => v !== value);
         }
         else {
             this.selected = [...this.selected, value];
         }
-        this.dropiCityChange.emit([...this.selected]);
+        this.selectedCitiesChange.emit([...this.selected]);
     }
     removeCity(value, e) {
         e.stopPropagation();
         this.selected = this.selected.filter(v => v !== value);
-        this.dropiCityChange.emit([...this.selected]);
+        this.selectedCitiesChange.emit([...this.selected]);
     }
     getLabel(value) {
         for (const g of this.parsedOptions) {
@@ -71,7 +86,11 @@ export class DropiCitySelector {
         return String(value);
     }
     render() {
-        return (h("div", { key: '53650ed7717099d343115c539d6ee7de6fd7a415', class: `city-selector${this.disabled ? ' disabled' : ''}` }, h("div", { key: '03bdc026a711321c6719745521e5fabad900c1dc', class: "selector-trigger", onClick: () => this.toggle() }, h("div", { key: 'e59a7625b10181bf92c5680b86119b91d0d497ae', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: 'a7521c4285660c2ef5ac9d4df19466a3322b0873', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, "\u00D7"))))), h("dropi-icon", { key: '1ee96f23ca167c420d1ad24b6d6cbd27e331f378', name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: 'cb6ab864645c9dea1d9b2b5eedcafe22596c623d', class: "dropdown" }, h("div", { key: '8cdfc3b52a59f5e6501cf577444cad6272056bf6', class: "search-wrap" }, h("input", { key: '33e96a874c4ef2b257ae934e5eeb66f128e6a21d', class: "search-input", type: "text", placeholder: "Buscar ciudad...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } })), h("div", { key: 'e163afcf9a1d5ad61527828ed935b840cf4b04ef', class: "options-list" }, this.filtered.length === 0 && (h("div", { key: 'c4b35559a86cc0f36563c74824afe9f2ad8df781', class: "no-results" }, "Sin resultados")), this.filtered.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => (h("div", { key: String(city.value), class: `city-option${this.selected.includes(city.value) ? ' selected' : ''}`, onClick: () => this.toggleCity(city.value) }, h("span", { class: "check-mark" }, this.selected.includes(city.value) ? '✓' : ''), city.label)))))))))));
+        const groups = this.filtered;
+        return (h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '27f05e3fcf08bdb4e83ee52f7bba02a5c87f2d3e', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '2fd2d164c186d9d4d1f6664e531449373dfce023', class: "dropdown", role: "listbox" }, h("div", { key: 'e6fb9fc7938296d696598e2984167cec5d693b07', class: "search-wrap" }, h("div", { key: '9a56582e19bf264065bb11e9bccdf3179e56fb7b', class: "search-field" }, h("input", { key: '9228debd9abc4e2a884006bd45046e8e5b3cce25', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '609751d699dc6227347ec565ff14c3f35fa9a6cf', class: "search-icon" }, h("dropi-icon", { key: 'fcacc7c73eeb3f2dc27f83f9dfcbe2476b85136e', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'c71c2b0303f37169ee221387aeec6ceea499b8e1', class: "options-list" }, groups.length === 0 && (h("div", { key: 'a5525ef28be665b337658032318507ae01f69a0d', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
+            const isSelected = this.selected.includes(city.value);
+            return (h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
+        })))))))));
     }
     static get is() { return "dropi-city-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -151,7 +170,7 @@ export class DropiCitySelector {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "'Selecciona ciudades'"
+                "defaultValue": "'Seleccione una ciudad'"
             },
             "disabled": {
                 "type": "boolean",
@@ -185,8 +204,8 @@ export class DropiCitySelector {
     }
     static get events() {
         return [{
-                "method": "dropiCityChange",
-                "name": "dropiCityChange",
+                "method": "selectedCitiesChange",
+                "name": "selectedCitiesChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -201,6 +220,7 @@ export class DropiCitySelector {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "options",
@@ -210,4 +230,13 @@ export class DropiCitySelector {
                 "methodName": "selectedChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }