@dropi/ui 0.1.20 → 0.1.22

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

@@ -11,6 +11,7 @@
   width: 100%;
 }
 
+/* ── Label ───────────────────────────────────────────────────────── */
 label {
   display: block;
   font-size: var(--font-size-xs, 11px);
@@ -24,15 +25,16 @@ label {
   margin-left: 2px;
 }
 
+/* ── Trigger button ──────────────────────────────────────────────── */
 .select-button {
   width: 100%;
-  height: 40px;
-  padding: 0 10px;
+  height: 44px;
+  padding: 0 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);
   color: var(--Gray-Gray-500, #69738c);
-  font-size: var(--font-size-s, 12px);
+  font-size: var(--font-size-s, 14px);
   font-family: inherit;
   display: flex;
   justify-content: space-between;
@@ -55,8 +57,7 @@ label {
 }
 
 .select-button.select-completed {
-  border-color: var(--Gray-Gray-400, #858ea6);
-  color: var(--Gray-Gray-600, #475066);
+  color: var(--Gray-Gray-700, #32394d);
 }
 
 .select-button.select-invalid {
@@ -68,6 +69,7 @@ label {
   align-items: center;
   gap: 8px;
   overflow: hidden;
+  flex: 1;
 }
 
 .selected-option {
@@ -77,40 +79,46 @@ label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-s, 14px);
 }
 
 .placeholder-text {
   color: var(--Gray-Gray-400, #858ea6);
+  font-size: var(--font-size-s, 14px);
 }
 
+/* ── Flag ────────────────────────────────────────────────────────── */
 .flag-img {
-  border-radius: 16px;
+  border-radius: var(--Border-1, 4px);
   width: 24px;
   height: 24px;
   object-fit: cover;
   flex-shrink: 0;
 }
 
+/* ── Dropdown ────────────────────────────────────────────────────── */
 .select-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);
-  overflow-y: auto;
   z-index: 200;
   list-style: none;
   padding: 0;
   margin: 0;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
+  overflow: hidden;
   transition: max-height 0.2s ease, opacity 0.2s ease;
 }
 
 .select-dropdown.expanded {
-  max-height: 260px;
+  max-height: 300px;
   opacity: 1;
+  overflow-y: auto;
 }
 
 .select-dropdown.collapsed {
@@ -121,42 +129,81 @@ label {
   box-shadow: none;
 }
 
+/* Scrollbar — siempre claro, nunca negro */
+.select-dropdown::-webkit-scrollbar { width: 6px; }
+.select-dropdown::-webkit-scrollbar-track { background: transparent; }
+.select-dropdown::-webkit-scrollbar-thumb {
+  background: var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 4px;
+}
+.select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--Gray-Gray-300, #a3abbf);
+}
+
+/* ── Search ──────────────────────────────────────────────────────── */
 .search-li {
-  padding: 0;
+  padding: 10px 12px;
   position: sticky;
   top: 0;
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   z-index: 1;
+  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
+}
+
+.search-field {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .country-search {
   width: 100%;
-  padding: 8px 12px;
-  border: none;
-  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  height: 36px;
+  padding: 0 36px 0 12px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
   outline: none;
-  font-size: var(--font-size-s, 12px);
+  font-size: var(--font-size-s, 14px);
   font-family: inherit;
-  color: var(--Gray-Gray-600, #475066);
-  background: transparent;
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Gray-Gray-50, #f7f8fa);
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.country-search:focus {
+  border-color: var(--Info-Info-500, #50a5f1);
+  background: var(--Neutral-White, #ffffff);
 }
 
+.country-search::placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.search-icon {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+/* ── Options ─────────────────────────────────────────────────────── */
 .option {
   width: 100%;
-  min-height: 40px;
-  border-radius: 0;
-  padding: 8px 12px;
+  min-height: 44px;
+  padding: 10px 16px;
   border: none;
   background: transparent;
   text-align: left;
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-s, 14px);
   font-family: inherit;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   transition: background 0.1s ease;
+  white-space: nowrap;
 }
 
 .option:hover {

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

@@ -103,25 +103,55 @@ export class DropiCountrySelector {
     /** Placeholder when nothing is selected */
     placeholder = 'Selecciona un país';
     /** Pre-selected country code (ISO 3166-1 alpha-2) */
-    value = '';
+    currentSelection = '';
     /** Whether the selector is disabled */
     disabled = false;
     /** Show asterisk for required field */
     showObligatory = false;
     /** Show error border */
-    invalid = false;
+    hasError = false;
+    /** Helper text below the select */
+    textHelper = '';
+    /** Search term for filtering (matches Angular `searchTerm`) */
+    searchTerm = '';
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties = null;
     /** Emitted when a country is selected. Detail is the CountryItem. */
-    dropiCountryChange;
+    onChangeSelect;
     isOpen = false;
     selected = null;
-    searchTerm = '';
+    el;
+    handleDocClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
     searchInputRef;
-    valueChanged(val) {
+    currentSelectionChanged(val) {
         this.selected = COUNTRIES.find(c => c.code === val) || null;
     }
+    selectPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.showObligatory !== undefined)
+            this.showObligatory = val.showObligatory;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.hasError !== undefined)
+            this.hasError = val.hasError;
+    }
     componentWillLoad() {
-        if (this.value)
-            this.valueChanged(this.value);
+        if (this.selectProperties)
+            this.selectPropertiesChanged(this.selectProperties);
+        if (this.currentSelection)
+            this.currentSelectionChanged(this.currentSelection);
     }
     get filtered() {
         if (!this.searchTerm)
@@ -141,15 +171,15 @@ export class DropiCountrySelector {
         this.selected = country;
         this.isOpen = false;
         this.searchTerm = '';
-        this.value = country.code;
-        this.dropiCountryChange.emit(country);
+        this.currentSelection = country.code;
+        this.onChangeSelect.emit(country);
     }
     render() {
-        return (h("div", { key: '95320129f76f5d802d62cb282172af97607ed15b', class: "custom-select" }, this.label && (h("label", { key: '7310600a9ac9a4482240ae6452db11ea2f083ea5' }, this.label, this.showObligatory && h("span", { key: '8ff5f89823f308366fa9f9ab680d7716e136eec5', class: "required" }, "*"))), h("button", { key: 'cf73602134c204051e196a2fdce9192377e6c1dc', type: "button", class: {
+        return (h("div", { key: '78179f7b5e30c4eb7d5345431f476f625a60534a', class: "custom-select" }, this.label && (h("label", { key: '13566e714a55c3820facffab298a97fc37c97133' }, this.label, this.showObligatory && h("span", { key: '7772ddd762bd50da043ed030b5a3442e10de47b0', class: "required" }, "*"))), h("button", { key: '649759c1d921318a48fd1abf8e71977d52b6ae2d', type: "button", class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
-                'select-invalid': this.invalid,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '29afa9af6fd5b314e38f75c496e3f6f529a795b2', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '722dcee79149526a9879e339279128aa23f513cc', name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: "20px", height: "20px", color: "Gray-Gray-500" })), h("ul", { key: '64a93caa1189e212c83aa711d8fec2df97baba1b', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '28f0924f7edac815645c0ee51963b8ac688312a6', class: "search-li" }, h("input", { key: 'b69a4b4a9238fe4dbc0932f8f4078989d867a224', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } })), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name)))))));
+                'select-invalid': this.hasError,
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: 'dfa717ce51975386fab6a3af796637a27a8cb039', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "20px", height: "20px", color: "Gray-Gray-500" })), h("ul", { key: '4f72db336c9d1bc1ce149279970cdaa4dcaa4f77', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '3badbda75f609e979f5edf7ad3f5783bf9cdf001', class: "search-li" }, h("div", { key: 'cae7ee12d3d3d40a3bb9728f4c109cd0ba513995', class: "search-field" }, h("input", { key: '82b7703b0531c80d51b5fb70d3e2f0b804e3089f', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '45378fac8b73b656fc8c5bb16d7f072398890508', class: "search-icon" }, h("dropi-icon", { key: '39c3a426407fd68367a3494c3d319bdbcf9692bb', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '58f747d7cfecd23d3bdc166f21c3560e642f336d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'fb68e291bd8dcfe5955281504b3de80699fa0ff0', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '9d5287f387f09f2b90b41f14f05c3572a44d74a3' }, this.textHelper)))));
     }
     static get is() { return "dropi-country-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -205,7 +235,7 @@ export class DropiCountrySelector {
                 "attribute": "placeholder",
                 "defaultValue": "'Selecciona un pa\u00EDs'"
             },
-            "value": {
+            "currentSelection": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -222,7 +252,7 @@ export class DropiCountrySelector {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
+                "attribute": "current-selection",
                 "defaultValue": "''"
             },
             "disabled": {
@@ -265,7 +295,7 @@ export class DropiCountrySelector {
                 "attribute": "show-obligatory",
                 "defaultValue": "false"
             },
-            "invalid": {
+            "hasError": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -282,22 +312,81 @@ export class DropiCountrySelector {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid",
+                "attribute": "has-error",
                 "defaultValue": "false"
+            },
+            "textHelper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text below the select"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-helper",
+                "defaultValue": "''"
+            },
+            "searchTerm": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search term for filtering (matches Angular `searchTerm`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-term",
+                "defaultValue": "''"
+            },
+            "selectProperties": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `selectProperties: SelectProperties`.\nWhen provided, its non-null fields override individual props."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-properties",
+                "defaultValue": "null"
             }
         };
     }
     static get states() {
         return {
             "isOpen": {},
-            "selected": {},
-            "searchTerm": {}
+            "selected": {}
         };
     }
     static get events() {
         return [{
-                "method": "dropiCountryChange",
-                "name": "dropiCountryChange",
+                "method": "onChangeSelect",
+                "name": "onChangeSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -318,10 +407,23 @@ export class DropiCountrySelector {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "value",
-                "methodName": "valueChanged"
+                "propName": "currentSelection",
+                "methodName": "currentSelectionChanged"
+            }, {
+                "propName": "selectProperties",
+                "methodName": "selectPropertiesChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -3,7 +3,7 @@
 
 .dp-label {
   display: block;
-  font-size: var(--font-size-xs, 10px);
+  font-size: var(--font-size-xxs, 10px);
   color: var(--Gray-Gray-600, #475066);
   margin-bottom: 4px;
 }
@@ -11,14 +11,14 @@
 /* Trigger */
 .dp-trigger {
   width: 100%;
-  height: 40px;
+  height: 44px;
   display: flex;
   align-items: center;
   gap: var(--Size-2, 8px);
   padding: 0 var(--Size-3, 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);
   cursor: pointer;
   font-family: inherit;
   transition: border-color 0.2s;
@@ -29,7 +29,7 @@
 .dp-trigger__value {
   flex: 1;
   text-align: left;
-  font-size: var(--font-size-s, 12px);
+  font-size: var(--font-size-xs, 12px);
   color: var(--Gray-Gray-700, #32394d);
   white-space: nowrap;
   overflow: hidden;
@@ -40,15 +40,15 @@
 /* Popup */
 .dp-popup {
   position: absolute;
-  top: calc(100% + 4px);
+  top: calc(100% + 8px);
   left: 0;
-  width: 280px;
-  background: var(--Neutral-White, #fff);
+  width: 320px;
+  background: var(--Neutral-White, #ffffff);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
+  border-radius: var(--Border-3, 12px);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
   z-index: 300;
-  padding: var(--Size-3, 12px);
+  padding: var(--Size-4, 16px);
 }
 
 /* Navigation */
@@ -56,39 +56,45 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--Size-3, 12px);
+  margin-bottom: var(--Size-4, 16px);
 }
 
 .dp-nav__btn {
   background: none;
   border: none;
-  padding: 4px;
+  padding: 0;
   cursor: pointer;
-  border-radius: var(--Border-1, 4px);
+  border-radius: 50%;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
   transition: background 0.15s;
 }
 .dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 
 .dp-nav__title {
-  font-size: var(--font-size-s, 12px);
+  font-size: var(--font-size-s, 14px);
   font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-800, #1a2033);
+  color: var(--Gray-Gray-700, #32394d);
+  display: flex;
+  gap: 8px;
 }
 
 /* Grid */
 .dp-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
+  row-gap: 8px;
+  column-gap: 4px;
 }
 
 .dp-day-header {
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-400, #858ea6);
+  font-size: var(--font-size-s, 14px);
+  color: var(--Gray-Gray-700, #32394d);
   text-align: center;
-  padding: 4px 0;
+  padding: 8px 0;
   font-weight: var(--font-weight-bold, 700);
 }
 
@@ -98,30 +104,89 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--font-size-xs, 10px);
+  font-size: var(--font-size-xs, 12px);
   font-family: inherit;
   border: none;
-  border-radius: var(--Border-1, 4px);
   cursor: pointer;
-  background: none;
-  color: var(--Gray-Gray-700, #32394d);
-  transition: background 0.15s, color 0.15s;
+  background: transparent;
+  color: var(--Gray-Gray-600, #475066);
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  padding: 0;
+}
+
+/* Pseudo-element for the circle (selected / hover / today) */
+.dp-cell::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  border-radius: 50%;
+  transition: all 0.2s;
+  z-index: -1;
+  background: transparent;
+}
+
+/* Pseudo-element for the continuous light-orange range background */
+.dp-cell::before {
+  content: "";
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: -2;
+  border-radius: 0;
+  background: transparent;
+}
+
+.dp-cell:hover:not(:disabled)::after {
+  background: var(--Gray-Gray-100, #e6eaf2);
 }
-.dp-cell:hover:not(:disabled) { background: var(--Gray-Gray-50, #f7f8fa); }
 
 .dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }
-.dp-cell--today { font-weight: var(--font-weight-bold, 700); color: var(--Primary-Primary-500, #f49a3d); }
-.dp-cell--selected, .dp-cell--range-start, .dp-cell--range-end {
-  background: var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
-  border-radius: var(--Border-1, 4px);
+
+.dp-cell--today {
+  font-weight: var(--font-weight-bold, 700);
+}
+.dp-cell--today::after {
+  background: var(--Gray-Gray-100, #e6eaf2);
+}
+
+.dp-cell--selected {
+  color: var(--Neutral-White, #ffffff);
+  font-weight: var(--font-weight-bold, 700);
+}
+.dp-cell--selected::after {
+  background: var(--Orange-orange-500, #f49a3d) !important;
+}
+
+/* Range modes */
+.dp-cell--range-start, .dp-cell--range-end {
+  color: var(--Neutral-White, #ffffff);
+  font-weight: var(--font-weight-bold, 700);
+}
+.dp-cell--range-start::after, .dp-cell--range-end::after {
+  background: var(--Orange-orange-500, #f49a3d) !important;
 }
+
 .dp-cell--in-range {
-  background: var(--Primary-Primary-50, #fff5eb);
-  border-radius: 0;
+  color: var(--Orange-orange-500, #f49a3d);
+  font-weight: var(--font-weight-bold, 700);
 }
-.dp-cell--range-start { border-radius: var(--Border-1, 4px) 0 0 var(--Border-1, 4px); }
-.dp-cell--range-end   { border-radius: 0 var(--Border-1, 4px) var(--Border-1, 4px) 0; }
+.dp-cell--in-range::before {
+  left: -2px; right: -2px;
+  background: var(--Orange-orange-50, #fef5ec);
+}
+.dp-cell--range-start::before {
+  left: 50%; right: -2px;
+  background: var(--Orange-orange-50, #fef5ec);
+}
+.dp-cell--range-end::before {
+  left: -2px; right: 50%;
+  background: var(--Orange-orange-50, #fef5ec);
+}
+.dp-cell--range-start.dp-cell--range-end::before {
+  background: transparent;
+}
+
 .dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }
 
 /* Footer */
@@ -129,7 +194,7 @@
   display: flex;
   justify-content: space-between;
   margin-top: var(--Size-3, 12px);
-  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
+  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);
   padding-top: var(--Size-2, 8px);
 }
 
@@ -138,13 +203,13 @@
   background: none;
   border: none;
   padding: 4px 8px;
-  font-size: var(--font-size-xs, 10px);
+  font-size: var(--font-size-xxs, 10px);
   font-family: inherit;
   cursor: pointer;
   border-radius: var(--Border-1, 4px);
   transition: background 0.15s;
 }
-.dp-footer__clear { color: var(--Gray-Gray-500, #68738f); }
-.dp-footer__today { color: var(--Primary-Primary-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }
+.dp-footer__clear { color: var(--Gray-Gray-500, #69738c); }
+.dp-footer__today { color: var(--Orange-orange-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }
 .dp-footer__clear:hover { background: var(--Gray-Gray-50, #f7f8fa); }
-.dp-footer__today:hover { background: var(--Primary-Primary-50, #fff5eb); }
+.dp-footer__today:hover { background: var(--Orange-orange-50, #fef5ec); }