@dropi/ui 0.1.19 → 0.1.21

package/dist/collection/components/dropi-accordion/dropi-accordion-item.css

@@ -0,0 +1,45 @@
+:host {
+  display: block;
+  border-bottom: 1px solid var(--Gray-Gray-100);
+}
+
+.accordion-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.accordion-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.accordion-title {
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-semibold);
+  color: var(--Gray-Gray-700);
+}
+
+.accordion-chevron {
+  transition: transform 0.3s ease;
+}
+
+.accordion-chevron--open {
+  transform: rotate(180deg);
+}
+
+.accordion-body {
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+}
+
+.accordion-content {
+  padding: 0 16px 16px 16px;
+}

package/dist/collection/components/dropi-accordion/dropi-accordion-item.js

@@ -0,0 +1,172 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-accordion-item
+ * Collapsible section item intended to be used inside <dropi-accordion>.
+ */
+export class DropiAccordionItem {
+    el;
+    /** The title of the item — matches Angular `sectionTitle` */
+    sectionTitle = '';
+    /** Index of the item — matches Angular `index` */
+    index;
+    /** Whether the section is expanded */
+    open = false;
+    /** Disable toggling */
+    disabled = false;
+    /** Icon name before title */
+    preIcon = '';
+    contentHeight = '0px';
+    contentRef;
+    openChanged(val) {
+        this.updateHeight(val);
+    }
+    componentDidLoad() {
+        this.updateHeight(this.open);
+    }
+    updateHeight(open) {
+        if (!this.contentRef)
+            return;
+        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
+    }
+    handleToggle() {
+        if (this.disabled)
+            return;
+        // Notify parent if needed, or just toggle locally
+        const parent = this.el.closest('dropi-accordion');
+        if (parent && !parent.multiple) {
+            // If parent is single-expand, we notify or handle via event
+        }
+        this.open = !this.open;
+        setTimeout(() => this.updateHeight(this.open), 0);
+    }
+    render() {
+        return (h("div", { key: '33564d4efbb73ae0b3ec0195ebf0afed6b2a6cc0', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: '9a7e7cc044027c4d427a712c5ed352991ef622b7', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '17ffa01872142ab9a959104f884ce5cedada33c2', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '8b02d875239d9ebaa42060e5dc1f4f8c6cfd3081', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: 'effa37d569bfcbc10774ff2a4a7787868cf83937', class: "accordion-title" }, this.sectionTitle)), h("span", { key: '743aa0db06415f8b763099b53d234474c82cb8e6', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '2d66c4087eddaf3f139a063eadcd8b0fb668045d', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: '4621aafe6d4592830cdaa32672de357c026a0b14', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '826b3ad470c9444ae2378e266332959f0f9f3529', class: "accordion-content" }, h("slot", { key: '8982c5506ecd1ed3ee44190096848ccbf9638b95' })))));
+    }
+    static get is() { return "dropi-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sectionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the item \u2014 matches Angular `sectionTitle`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "section-title",
+                "defaultValue": "''"
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the item \u2014 matches Angular `index`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section is expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable toggling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "preIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name before title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pre-icon",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contentHeight": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-accordion/dropi-accordion.css

@@ -1,7 +1,7 @@
-:host { display: block; width: 100%; }
+:host { display: block; width: 100%; margin-bottom: -1px; }
 *, *::before, *::after { box-sizing: border-box; }
 
-.accordion { border: 1px solid var(--Gray-Gray-100,#e6eaf2); border-radius: var(--Border-2,8px); background: var(--Neutral-White,#fff); overflow: hidden; }
+.accordion { border-top: 1px solid var(--Gray-Gray-100,#e6eaf2); border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); overflow: hidden; }
 
 .accordion-header {
   width: 100%; display: flex; align-items: center; justify-content: space-between;
@@ -12,7 +12,7 @@
 .accordion--open .accordion-header { border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); }
 
 .accordion-header-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
-.accordion-title { font-size: var(--font-size-m,14px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.4; }
+.accordion-title { font-size: var(--font-size-m, 16px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-600, #475066); line-height: 1.4; }
 
 .accordion-chevron { display: flex; align-items: center; flex-shrink: 0; transition: transform 0.22s ease; }
 .accordion-chevron--open { transform: rotate(180deg); }

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

@@ -1,46 +1,13 @@
 import { h } from "@stencil/core";
 /**
  * @component dropi-accordion
- * Collapsible section with animated expand/collapse.
- *
- * @example
- * <dropi-accordion header="¿Cómo funciona?">
- *   <p>Contenido del acordeón aquí.</p>
- * </dropi-accordion>
+ * Container for <dropi-accordion-item> components.
  */
 export class DropiAccordion {
-    /** Title shown in the header button */
-    header = '';
-    /** Whether the section is expanded */
-    open = false;
-    /** Disable toggling */
-    disabled = false;
-    /** Icon name from dropi-icon sprite (shown before title) */
-    preIcon = '';
-    /** Emitted when toggled. e.detail = new open state */
-    dropiToggle;
-    contentHeight = '0px';
-    contentRef;
-    openChanged(val) {
-        this.updateHeight(val);
-    }
-    componentDidLoad() {
-        this.updateHeight(this.open);
-    }
-    updateHeight(open) {
-        if (!this.contentRef)
-            return;
-        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
-    }
-    handleToggle() {
-        if (this.disabled)
-            return;
-        this.open = !this.open;
-        this.dropiToggle.emit(this.open);
-        setTimeout(() => this.updateHeight(this.open), 0);
-    }
+    /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
+    multiple = false;
     render() {
-        return (h("div", { key: 'af11e06f8e10d85d6dffdbcb639479ce7095ed6e', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, h("button", { key: '5c3e5303dc6e5a37dece808559dcf6a8c6245980', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '062be2726403e5b9d90694555317db406c70d93f', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: 'c626c98aaab3074cdf754460d5eff45739683404', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: '3143e043a462df9e2b794fd2ff608ab910972a54', class: "accordion-title" }, this.header)), h("span", { key: '3ffd80e303fa17582b57a0778b2bc610c6dff899', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'b353a6cbfbd3b51d408ced11c29eeb8a8cded9a6', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: '0754969bc5483586224ddb3774f65328dd8cd3cb', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '96e87adb7ca8de258541be0d4626ba9ce09e1f97', class: "accordion-content" }, h("slot", { key: '5b82c186bc11b7e9e5a714217454c0c6058be5cf' })))));
+        return (h("div", { key: 'b4d44bde9b982a2e11cc074600f9de9424592fde', class: "accordion-container" }, h("slot", { key: '631732f3726d81dac4d188542180a1286c69258b' })));
     }
     static get is() { return "dropi-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -56,47 +23,7 @@ export class DropiAccordion {
     }
     static get properties() {
         return {
-            "header": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Title shown in the header button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "header",
-                "defaultValue": "''"
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the section is expanded"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "open",
-                "defaultValue": "false"
-            },
-            "disabled": {
+            "multiple": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -108,63 +35,14 @@ export class DropiAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disable toggling"
+                    "text": "Allows multiple sections to be open at the same time. If false, only one section can be open."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "multiple",
                 "defaultValue": "false"
-            },
-            "preIcon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Icon name from dropi-icon sprite (shown before title)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "pre-icon",
-                "defaultValue": "''"
             }
         };
     }
-    static get states() {
-        return {
-            "contentHeight": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiToggle",
-                "name": "dropiToggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when toggled. e.detail = new open state"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "openChanged"
-            }];
-    }
 }

package/dist/collection/components/dropi-alert/dropi-alert.css

@@ -7,9 +7,9 @@
 
 .alert {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--Size-2, 8px);
-  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  padding: var(--Size-3, 12px);
   border-radius: var(--Border-2, 8px);
   border: 1px solid transparent;
   width: 100%;
@@ -23,29 +23,39 @@
 
 /* ── State colors ───────────────────────────────────────── */
 .alert--success {
-  background: var(--Success-Success-50, #f0fdf4);
-  border-color: var(--Success-Success-200, #bbf7d0);
+  background: var(--Success-Success-50, #e7f8f3);
+  border-color: var(--Success-Success-500, #0abb87);
 }
 
 .alert--error {
-  background: var(--Error-Error-50, #fff5f5);
-  border-color: var(--Error-Error-200, #fecaca);
+  background: var(--Error-Error-50, #fef0f0);
+  border-color: var(--Error-Error-500, #f46a6b);
 }
 
 .alert--warning {
-  background: var(--Warning-Warning-50, #fffbeb);
-  border-color: var(--Warning-Warning-200, #fde68a);
+  background: var(--Warning-Warning-50, #fef8ed);
+  border-color: var(--Warning-Warning-500, #f1b44c);
 }
 
 .alert--info {
-  background: var(--Info-Info-50, #eff6ff);
-  border-color: var(--Info-Info-200, #bfdbfe);
+  background: var(--Info-Info-50, #eef6fe);
+  border-color: var(--Info-Info-500, #50a5f1);
 }
 
 /* ── Flag type (left accent border) ────────────────────── */
 .alert--flag {
-  border-left-width: 4px;
-  border-radius: 0 var(--Border-2, 8px) var(--Border-2, 8px) 0;
+  padding: var(--Size-1, 4px) var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+  border: none !important;
+  justify-content: center;
+}
+.alert--flag .alert__body {
+  justify-content: center;
+  text-align: center;
+}
+.alert--flag .alert__message {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
 }
 
 /* ── Icon ───────────────────────────────────────────────── */
@@ -66,8 +76,9 @@
 }
 
 .alert__message {
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-s);
+  color: var(--Gray-600, #475066);
+  font-weight: var(--font-weight-medium);
   line-height: 1.5;
 }
 
@@ -103,7 +114,7 @@
 
 .alert__btn:hover {
   background: var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
 }
 
 .alert__close {