@dropi/ui 0.1.20 → 0.1.21

package/dist/collection/components/dropi-date-picker/dropi-date-picker.js

@@ -3,54 +3,66 @@ const MONTHS_ES = [
     'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
     'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
 ];
-const DAYS_ES = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];
+const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 /**
  * @component dropi-date-picker
  * Calendar date picker with optional date range mode.
  * Emits ISO date strings (YYYY-MM-DD).
  */
 export class DropiDatePicker {
-    /** Selected date (ISO string, single mode) */
-    value = '';
+    /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
+    selectedDate = '';
     /** Range start date (ISO string, range mode) */
     startDate = '';
     /** Range end date (ISO string, range mode) */
     endDate = '';
-    /** Enable range selection */
-    range = false;
+    /** Enable range selection - matches Angular selectionMode */
+    selectionMode = 'single';
     /** Min selectable date (ISO string) */
     minDate = '';
     /** Max selectable date (ISO string) */
     maxDate = '';
     /** Label */
-    label = '';
+    label = null;
     /** Placeholder */
-    placeholder = 'Seleccionar fecha';
+    placeholder = 'DD/MM/YYYY';
     /** Disabled */
     disabled = false;
+    /** Is invalid state - matches Angular */
+    isInvalid = false;
+    /** Loading state - matches Angular */
+    loading = false;
     open = false;
     viewYear = new Date().getFullYear();
     viewMonth = new Date().getMonth();
     hoverDate = '';
-    /** Emitted when single date selected. e.detail = ISO date */
-    dropiDateChange;
-    /** Emitted when range selected. e.detail = { start, end } */
+    el;
+    handleDocClick(e) {
+        if (this.open && !e.composedPath().includes(this.el)) {
+            this.open = false;
+        }
+    }
+    /** Emitted when date selected — matches Angular 'onChangeDate' */
+    onChangeDate;
+    /** Emitted when panel closes — matches Angular 'onClosePanel' */
+    onClosePanel;
+    /** Emitted when range selected */
     dropiRangeChange;
     get displayValue() {
-        if (this.range) {
+        if (this.selectionMode === 'range') {
             if (this.startDate && this.endDate)
                 return `${this.startDate} – ${this.endDate}`;
             if (this.startDate)
                 return this.startDate;
             return '';
         }
-        return this.value;
+        return this.selectedDate;
     }
     open_() {
         if (this.disabled)
             return;
-        if (this.value) {
-            const d = new Date(this.value);
+        if (this.selectedDate) {
+            const d = new Date(this.selectedDate);
             this.viewYear = d.getFullYear();
             this.viewMonth = d.getMonth();
         }
@@ -88,7 +100,7 @@ export class DropiDatePicker {
         return false;
     }
     isInRange(iso) {
-        if (!this.range)
+        if (this.selectionMode !== 'range')
             return false;
         const start = this.startDate;
         const end = this.endDate || this.hoverDate;
@@ -100,10 +112,10 @@ export class DropiDatePicker {
     selectDate(iso) {
         if (this.isDisabled(iso))
             return;
-        if (!this.range) {
-            this.value = iso;
+        if (this.selectionMode !== 'range') {
+            this.selectedDate = iso;
             this.open = false;
-            this.dropiDateChange.emit(iso);
+            this.onChangeDate.emit(iso);
             return;
         }
         // Range mode
@@ -127,8 +139,8 @@ export class DropiDatePicker {
         const year = this.viewYear;
         const month = this.viewMonth;
         const firstDay = new Date(year, month, 1).getDay();
-        // Adjust to Monday-first
-        const startOffset = (firstDay + 6) % 7;
+        // Adjust to Sunday-first
+        const startOffset = firstDay;
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInPrevMonth = new Date(year, month, 0).getDate();
         const cells = [];
@@ -155,12 +167,17 @@ export class DropiDatePicker {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: 'ee619ad7d2528fa29f74cd9e149a9a4f8250c1b5', class: "dp-wrap" }, this.label && h("label", { key: 'faffc20912e7e27cf27f6b8895050df117f2fcd9', class: "dp-label" }, this.label), h("button", { key: '6249c8e76c7b19bd54bedb3f2e98342b45eb9444', class: { 'dp-trigger': true, 'dp-trigger--disabled': this.disabled }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled, type: "button" }, h("dropi-icon", { key: '3033520703a6c58fb30d8231196a206e1f2a153c', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: 'c426b0a12c17108d4f32d2d01732bfc13ec15b26', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '218703644316e36b4a2bece89975db723eaa0bfa', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '4ca8fa76344e960a42e4aec332e6ecdabab3bc6c', class: "dp-popup" }, h("div", { key: '04b2b43eb0b209127a31adb2d0721b70449e84ab', class: "dp-nav" }, h("button", { key: '4f7e1208d4a6b2e03f30730fb38306f4aaf365af', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '307a5dcbd86c26f13a22e0d69a8f61b7a646378b', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: '1c094b7fb9385cc7673a2dd3038eebdc11a247c7', class: "dp-nav__title" }, MONTHS_ES[this.viewMonth], " ", this.viewYear), h("button", { key: '70c629dc1f1229fffcceec2f01ed8acc72bf1794', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: 'ab1847f3771ccc80c9257a82f31ed7cd2cb0dd0a', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '92ff7685583877bed3a63ea74c92fd4581b9a777', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
-            const isSelected = !this.range
-                ? iso === this.value
+        return (h("div", { key: 'fc10fdf1b3621b61fa1ee929f759c23ccfafa0e9', class: "dp-wrap" }, this.label && h("label", { key: '7e7be5c6ed8cc9e4a273defc7f3c5ba41861ee2f', class: "dp-label" }, this.label), h("button", { key: '52f190e283341a0836df16c2bd375e45b684ffe7', class: {
+                'dp-trigger': true,
+                'dp-trigger--disabled': this.disabled,
+                'dp-trigger--invalid': this.isInvalid,
+                'dp-trigger--loading': this.loading
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '2e79e9e6ed80a52d8a70efd69bb5ebaf5fc6e901', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: '8667a6b56e73506aa9cf171d61f3425a7143d3f6', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: 'c42b1e91c5f8c830c5f758c6f4a6f6513aae4296', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '1096c4ded79202c51d2df4ce1b72f4afe3da9171', class: "dp-popup" }, h("div", { key: '1f6cb906f32af2ab4bb894e67672657983ff16b6', class: "dp-nav" }, h("button", { key: 'd85f4f8fab9e9112cd2b22e353d4e7afe55874a2', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '48e06f17915b6ac2016f20f6d5c45c2ecc8ce77b', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: 'efe6cd99ddbf872ad69da22a3c8df08d9258beb6', class: "dp-nav__title" }, h("span", { key: '4752259d25443430a4f67cce19d129ef123c55c7' }, MONTHS_ES[this.viewMonth]), h("span", { key: '1b47d475123adf6eef19dfca84530cf03086bbcb' }, this.viewYear)), h("button", { key: 'e2979317eb2c3483be9e648ae3c4f33b9f139e68', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '00dd3b6b6c8ed941db4d6e1a1241b25a196522f8', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '9c1404d125cd5c63f84d97e7b67c257a5aea1a6f', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            const isSelected = this.selectionMode !== 'range'
+                ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
-            const isRangeStart = this.range && iso === this.startDate;
-            const isRangeEnd = this.range && iso === this.endDate;
+            const isRangeStart = this.selectionMode === 'range' && iso === this.startDate;
+            const isRangeEnd = this.selectionMode === 'range' && iso === this.endDate;
             const inRange = this.isInRange(iso);
             const disabled = this.isDisabled(iso);
             const isToday = iso === today;
@@ -174,19 +191,19 @@ export class DropiDatePicker {
                     'dp-cell--in-range': inRange,
                     'dp-cell--disabled': disabled,
                 }, type: "button", disabled: disabled, onClick: () => this.selectDate(iso), onMouseEnter: () => {
-                    if (this.range && this.startDate && !this.endDate)
+                    if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '2e1a6e5e3f016b68b9486e6acadb94738671fe7f', class: "dp-footer" }, h("button", { key: 'cef6300ccd52c617426522d3977ac72829cb40cc', class: "dp-footer__clear", type: "button", onClick: () => {
-                this.value = '';
+        })), h("div", { key: '2b5b0438fdaa782c1ba6f3f6d99870c6bdef9c09', class: "dp-footer" }, h("button", { key: 'd7645b65bd581ddb6c827a4361fc413b1978b08b', class: "dp-footer__clear", type: "button", onClick: () => {
+                this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), h("button", { key: 'a5627d87cdc24d70368618fb8c67eff30b0800c7', class: "dp-footer__today", type: "button", onClick: () => {
-                if (!this.range) {
-                    this.value = today;
+            } }, "Limpiar"), h("button", { key: '855675f6fdb35aa564b469a772d0fcd5d704ed52', class: "dp-footer__today", type: "button", onClick: () => {
+                if (this.selectionMode !== 'range') {
+                    this.selectedDate = today;
                     this.open = false;
-                    this.dropiDateChange.emit(today);
+                    this.onChangeDate.emit(today);
                 }
                 else {
                     this.startDate = today;
@@ -208,7 +225,7 @@ export class DropiDatePicker {
     }
     static get properties() {
         return {
-            "value": {
+            "selectedDate": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -220,12 +237,12 @@ export class DropiDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Selected date (ISO string, single mode)"
+                    "text": "Selected date (ISO string, single mode) - matches Angular 'selectedDate'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
+                "attribute": "selected-date",
                 "defaultValue": "''"
             },
             "startDate": {
@@ -268,25 +285,25 @@ export class DropiDatePicker {
                 "attribute": "end-date",
                 "defaultValue": "''"
             },
-            "range": {
-                "type": "boolean",
+            "selectionMode": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'single' | 'range'",
+                    "resolved": "\"range\" | \"single\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable range selection"
+                    "text": "Enable range selection - matches Angular selectionMode"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "range",
-                "defaultValue": "false"
+                "attribute": "selection-mode",
+                "defaultValue": "'single'"
             },
             "minDate": {
                 "type": "string",
@@ -332,7 +349,7 @@ export class DropiDatePicker {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | null",
                     "resolved": "string",
                     "references": {}
                 },
@@ -346,7 +363,7 @@ export class DropiDatePicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label",
-                "defaultValue": "''"
+                "defaultValue": "null"
             },
             "placeholder": {
                 "type": "string",
@@ -366,7 +383,7 @@ export class DropiDatePicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placeholder",
-                "defaultValue": "'Seleccionar fecha'"
+                "defaultValue": "'DD/MM/YYYY'"
             },
             "disabled": {
                 "type": "boolean",
@@ -387,6 +404,46 @@ export class DropiDatePicker {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "isInvalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is invalid state - matches Angular"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-invalid",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state - matches Angular"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
             }
         };
     }
@@ -400,20 +457,35 @@ export class DropiDatePicker {
     }
     static get events() {
         return [{
-                "method": "dropiDateChange",
-                "name": "dropiDateChange",
+                "method": "onChangeDate",
+                "name": "onChangeDate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when single date selected. e.detail = ISO date"
+                    "text": "Emitted when date selected \u2014 matches Angular 'onChangeDate'"
                 },
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "onClosePanel",
+                "name": "onClosePanel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when panel closes \u2014 matches Angular 'onClosePanel'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "dropiRangeChange",
                 "name": "dropiRangeChange",
@@ -422,7 +494,7 @@ export class DropiDatePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when range selected. e.detail = { start, end }"
+                    "text": "Emitted when range selected"
                 },
                 "complexType": {
                     "original": "{ start: string; end: string }",
@@ -431,4 +503,14 @@ export class DropiDatePicker {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.css

@@ -13,7 +13,7 @@
 
 .label {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   color: #7b8190;
   margin-bottom: 8px;
 }
@@ -43,7 +43,7 @@
   padding: 0 10px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-600, #475066);
   font-size: 13px;
   font-family: inherit;
@@ -59,7 +59,7 @@
 .separator {
   padding-bottom: 8px;
   color: var(--Gray-Gray-400, #858ea6);
-  font-size: 16px;
+  font-size: var(--font-size-m);
 }
 
 .shortcuts {
@@ -82,7 +82,7 @@
   text-align: left;
   border-radius: 5px;
   transition: background 0.1s ease;
-  font-weight: 400;
+  font-weight: var(--font-weight-regular);
 }
 
 .shortcut-btn:hover {
@@ -91,20 +91,20 @@
 
 .shortcut-btn.active {
   background: var(--Gray-Gray-50, #f5f6f8);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 .warning-box {
   margin-top: 8px;
   padding: 4px 8px;
-  border: 1px solid #f4c370;
+  border: 1px solid var(--Warning-Warning-400);
   border-radius: 4px;
-  background: #fef8ed;
+  background: var(--Warning-Warning-50);
 }
 
 .warning-message {
   color: #495057;
-  font-size: 10px;
+  font-size: var(--font-size-xxs);
   line-height: 16px;
 }
 

package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.js

@@ -22,9 +22,9 @@ export class DropiDatePickerRange {
     /** Hide "Hoy" shortcut */
     hideTodayRangeShortcut = false;
     /** Emitted when start date changes */
-    dropiStartDateChange;
+    startDateChange;
     /** Emitted when end date changes */
-    dropiEndDateChange;
+    endDateChange;
     /** Emitted with full range when both dates are set */
     dropiRangeChange;
     start = '';
@@ -87,8 +87,8 @@ export class DropiDatePickerRange {
         }
     }
     emit() {
-        this.dropiStartDateChange.emit(this.start);
-        this.dropiEndDateChange.emit(this.end);
+        this.startDateChange.emit(this.start);
+        this.endDateChange.emit(this.end);
         this.dropiRangeChange.emit({ start: this.start, end: this.end });
     }
     render() {
@@ -263,8 +263,8 @@ export class DropiDatePickerRange {
     }
     static get events() {
         return [{
-                "method": "dropiStartDateChange",
-                "name": "dropiStartDateChange",
+                "method": "startDateChange",
+                "name": "startDateChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -278,8 +278,8 @@ export class DropiDatePickerRange {
                     "references": {}
                 }
             }, {
-                "method": "dropiEndDateChange",
-                "name": "dropiEndDateChange",
+                "method": "endDateChange",
+                "name": "endDateChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1,4 +1,4 @@
-:host { display: contents; }
+:host { display: contents; font-family: 'Inter', sans-serif; }
 *, *::before, *::after { box-sizing: border-box; }
 
 .drawer-host {
@@ -13,6 +13,7 @@
   visibility: visible;
 }
 
+/* Backdrop */
 .drawer-backdrop {
   position: absolute;
   inset: 0;
@@ -25,25 +26,27 @@
 /* Panel base */
 .drawer-panel {
   position: absolute;
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   display: flex;
   flex-direction: column;
   transition: transform 0.25s ease;
   overflow: hidden;
+  max-width: 100%;
+  min-width: auto;
 }
 
 /* Positions */
 .drawer-panel--right {
   top: 0; right: 0; bottom: 0;
   transform: translateX(100%);
-  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
 }
 .drawer-host--open .drawer-panel--right { transform: translateX(0); }
 
 .drawer-panel--left {
   top: 0; left: 0; bottom: 0;
   transform: translateX(-100%);
-  box-shadow: 4px 0 24px rgba(0,0,0,0.12);
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
 }
 .drawer-host--open .drawer-panel--left { transform: translateX(0); }
 
@@ -51,7 +54,7 @@
   bottom: 0; left: 0; right: 0;
   transform: translateY(100%);
   border-radius: var(--Border-2, 8px) var(--Border-2, 8px) 0 0;
-  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
 }
 .drawer-host--open .drawer-panel--bottom { transform: translateY(0); }
 
@@ -59,35 +62,55 @@
   top: 0; left: 0; right: 0;
   transform: translateY(-100%);
   border-radius: 0 0 var(--Border-2, 8px) var(--Border-2, 8px);
-  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
 }
 .drawer-host--open .drawer-panel--top { transform: translateY(0); }
 
+/* Sizes — coinciden con size-m/l/xl/xxl del host */
+.drawer-panel--size-m { width: 550px; }
+.drawer-panel--size-l { width: 1137px; }
+.drawer-panel--size-xl { width: 1280px; }
+.drawer-panel--size-xxl { width: 1330px; }
+
 /* Header */
 .drawer-header {
   display: flex;
-  align-items: center;
+  flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   padding: var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);
   border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
   flex-shrink: 0;
 }
 
+.drawer-header--headless {
+  display: none;
+}
+
 .drawer-header__title {
-  font-size: var(--font-size-m, 14px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-800, #1a2033);
+  color: var(--Gray-700, #32394d);
+  font-family: Inter, sans-serif;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 110%;
+  margin: 0;
 }
 
 .drawer-header__close {
+  width: var(--Size-6, 32px);
+  height: var(--Size-6, 32px);
   background: none;
   border: none;
-  padding: 4px;
+  padding: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
+  justify-content: center;
+  color: var(--Gray-400, #858ea6);
   border-radius: var(--Border-1, 4px);
   transition: background 0.15s;
+  flex-shrink: 0;
 }
 .drawer-header__close:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 
@@ -96,12 +119,11 @@
   flex: 1;
   overflow-y: auto;
   padding: var(--Size-4, 16px);
+  display: flex;
+  flex-direction: column;
 }
 
-/* Footer */
+/* Footer — oculto por defecto como en el host */
 .drawer-footer {
-  flex-shrink: 0;
-  padding: var(--Size-3, 12px) var(--Size-4, 16px);
-  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
+  display: none;
 }
-.drawer-footer:empty { display: none; }