@dropi/ui 0.1.19 → 0.1.21

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

@@ -3,7 +3,10 @@
 }
 
 :host([full-width]) {
-  display: block;
+  display: flex;
+  width: 100%;
+}
+:host([full-width]) .btn {
   width: 100%;
 }
 
@@ -13,12 +16,11 @@
   all: unset;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: center;
   gap: var(--Size-1, 4px);
   border-radius: var(--Border-2, 8px);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   min-width: 33px;
   line-height: 110%;
   cursor: pointer;
@@ -46,7 +48,7 @@
 /* ── Sizes ─────────────────────────────────────────────────── */
 .btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }
 .btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }
-.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--Size-3, 12px); height: 29px; }
+.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }
 
 /* ── Disabled / Loading ─────────────────────────────────────── */
 .btn.disabled,
@@ -58,37 +60,37 @@
 /* ══════════════════════════════════════════════════════════════
    PRIMARY severity
 ═══════════════════════════════════════════════════════════════ */
-.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #fff); }
+.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }
 .btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }
 
-.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #fff); }
+.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }
 .btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }
 
-.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #fff); }
+.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }
 .btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }
 
-.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #fff); }
+.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }
 .btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }
 
-.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #fff); }
+.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }
 .btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }
 
-.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #fff); }
+.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }
 .btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }
 
 /* Disabled primary */
-.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }
 
 /* ══════════════════════════════════════════════════════════════
    SECONDARY severity
 ═══════════════════════════════════════════════════════════════ */
 .btn.secondary {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 1px solid;
 }
 
@@ -148,8 +150,8 @@
 
 .btn.tertiary.dropdown {
   color: var(--Gray-Gray-500, #69738c);
-  font-weight: 400;
-  font-size: 14px;
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
   background: transparent;
 }
 

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

@@ -13,14 +13,18 @@ export class DropiButton {
     size = 'normal';
     /** Button state */
     state = 'default';
+    /** Full width button */
+    fullWidth = false;
     /** Icon name to show before the text */
     preIcon = '';
     /** Icon name to show after the text */
     postIcon = '';
+    /** Custom icon color override */
+    customIconColor = '';
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    dropiClick;
+    onClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -29,6 +33,7 @@ export class DropiButton {
         legacy: 'Secondary-Secondary-',
         warning: 'Warning-Warning-',
         dropdown: 'Gray-Gray-',
+        'default-light': 'Gray-Gray-',
     };
     get iconSize() {
         if (this.size === 'large')
@@ -51,7 +56,7 @@ export class DropiButton {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.dropiClick.emit(e);
+            this.onClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -62,14 +67,15 @@ export class DropiButton {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: '893717e317f10193bfa723d65607fc79e5875309', class: {
+        return (h("button", { key: '4df67bd28e77c9a14fb33f3131b60ac508ca1937', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '922e32f5466164279fdb9408502412d4246ee1f2', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '9b8c506a5e4a791bde84d36e2991386ee2a3822f', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'c1f66fba38426ff724450a806c99939ffaca0c75', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'af5cc164403ec0592f4740368784c343e38a0227' })));
+                'full-width': this.fullWidth,
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '7a54bf7ebfad24786109a17af928bfc43ccc7db4', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'ffb3b062d93c3a7090d971538d23c309f915b749', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '16127c78c5b4a3372ba89b24bc9b067e2d035cd1', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'a65ee231501ad83a059eb5988e96e1dcd18c5706' })));
     }
     static get is() { return "dropi-button"; }
     static get encapsulation() { return "shadow"; }
@@ -90,7 +96,7 @@ export class DropiButton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonType",
-                    "resolved": "\"default\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
+                    "resolved": "\"default\" | \"default-light\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
                     "references": {
                         "ButtonType": {
                             "location": "local",
@@ -189,6 +195,26 @@ export class DropiButton {
                 "attribute": "state",
                 "defaultValue": "'default'"
             },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
             "preIcon": {
                 "type": "string",
                 "mutable": false,
@@ -229,6 +255,26 @@ export class DropiButton {
                 "attribute": "post-icon",
                 "defaultValue": "''"
             },
+            "customIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon color override"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-icon-color",
+                "defaultValue": "''"
+            },
             "text": {
                 "type": "string",
                 "mutable": false,
@@ -253,8 +299,8 @@ export class DropiButton {
     }
     static get events() {
         return [{
-                "method": "dropiClick",
-                "name": "dropiClick",
+                "method": "onClick",
+                "name": "onClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.css

@@ -0,0 +1,92 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.container-card-check {
+  padding: var(--Size-4, 16px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Size-2, 8px);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  cursor: pointer;
+  height: 66px;
+  overflow: hidden;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.container-card-check.disabled {
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: default;
+}
+
+.container-card-check.disabled .title-check,
+.container-card-check.disabled .description-text,
+.container-card-check.disabled .extra-info {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.container-text {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: start;
+  overflow: hidden;
+}
+
+.title-check {
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-m, 14px);
+  font-weight: var(--font-weight-regular, 400);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description-text {
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 12px);
+  margin-top: var(--Size-1, 4px);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.extra-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.extra-info h4 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  color: inherit;
+  line-height: inherit;
+}
+
+.default-card {
+  border: none;
+}
+
+.is-checked {
+  background: var(--Primary-Primary-50, #fff8f0);
+  border: 1px solid var(--Primary-Primary-500, #f49a3d);
+}

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.js

@@ -0,0 +1,222 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-card-checkbox
+ * Card-style clickable checkbox with title, description, and optional extra info.
+ *
+ * @example
+ * <dropi-card-checkbox
+ *   title="Opción A"
+ *   description="Descripción breve"
+ *   type="with-card"
+ *   checked
+ * ></dropi-card-checkbox>
+ */
+export class DropiCardCheckbox {
+    /** Visual type — matches Angular: 'default' | 'with card' */
+    type = 'default';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state = 'checked';
+    /** Main title — matches Angular 'title' */
+    title = 'Tittle';
+    /** Optional description below title */
+    description = '';
+    /** Optional extra info shown on the right */
+    extraInfo = '';
+    /** Optional extra info description shown below extraInfo */
+    extraInfoDescription = '';
+    /** Disables interaction */
+    disabled = false;
+    /** Emitted with the new checked state when clicked */
+    onChange;
+    get isChecked() {
+        return this.state === 'checked';
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.state = this.isChecked ? 'default' : 'checked';
+        this.onChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("div", { key: 'b6e9f4e5855a03b04102fd2206c4d478d49e4753', class: {
+                'container-card-check': true,
+                'default-card': this.type === 'default',
+                'is-checked': this.isChecked && this.type === 'with card',
+                'disabled': this.disabled,
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '45af833a92b8441b79e2679a8f584f74e6b0c458', checked: this.isChecked, disabled: this.disabled }), h("div", { key: 'b0678976e2f52eef02fa5cb71ae6db284b26212d', class: "container-text" }, h("div", { key: 'd5bc253eb3262223d1e9ba31b2193cd3c1d11abe', class: "title-check" }, this.title), this.description && h("div", { key: '5555ff237e6c80552dafa079de1b6901e3e672a5', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '675a7b4a1195d2a452f3be11d4ae1553f7b19b4b', class: "extra-info" }, this.extraInfo && h("div", { key: '33e7cec0ccc2c1c5f8afe61a54463382b11343b4' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'f5d61a5ff4706d4bcb2cd7f818e06cff8787ac6d' }, this.extraInfoDescription)))));
+    }
+    static get is() { return "dropi-card-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-card-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-card-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'with card'",
+                    "resolved": "\"default\" | \"with card\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual type \u2014 matches Angular: 'default' | 'with card'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'checked' | 'default'",
+                    "resolved": "\"checked\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked \u2014 matches Angular 'state'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'checked'"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main title \u2014 matches Angular 'title'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "'Tittle'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description below title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "extraInfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional extra info shown on the right"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-info",
+                "defaultValue": "''"
+            },
+            "extraInfoDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional extra info description shown below extraInfo"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-info-description",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables interaction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onChange",
+                "name": "onChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the new checked state when clicked"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}