@dropi/ui 0.1.51 → 0.1.53

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

@@ -1,6 +1,7 @@
 :host {
   display: block;
   border-bottom: 1px solid var(--Gray-Gray-100);
+  border-radius: 0;
 }
 
 .accordion-header {
@@ -8,26 +9,39 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
-  background: white;
+  background: transparent;
   border: none;
   cursor: pointer;
   text-align: left;
+  transition: background 0.3s;
+}
+
+.accordion-header:hover {
+  background: var(--Gray-Gray-50);
 }
 
 .accordion-header-left {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--Size-2);
 }
 
+/* Label-L — equivalente al <p> del host Angular */
 .accordion-title {
+  padding: var(--Size-5) var(--Size-4);
+  margin: 0;
+  font-family: var(--font-family-01);
   font-size: var(--font-size-m);
-  font-weight: var(--font-weight-semibold);
-  color: var(--Gray-Gray-700);
+  font-style: normal;
+  font-weight: var(--font-weight-bold);
+  color: var(--Gray-Gray-600);
+  line-height: var(--lineheight-simple);
 }
 
+/* Equivalente al .icon del host Angular */
 .accordion-chevron {
+  padding: var(--Size-3);
+  color: var(--Gray-Gray-500);
   transition: transform 0.3s ease;
 }
 
@@ -37,9 +51,10 @@
 
 .accordion-body {
   overflow: hidden;
-  transition: max-height 0.3s ease-out;
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 
 .accordion-content {
-  padding: 0 16px 16px 16px;
+  padding: var(--Size-4);
+  background: var(--Neutral-White);
 }

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

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; margin-bottom: -1px; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; margin-bottom: -1px; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .accordion { border-top: 1px solid var(--Gray-Gray-100,#e6eaf2); border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); overflow: hidden; }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }
@@ -100,7 +101,7 @@
   background: transparent;
   color: var(--Primary-Primary-500, #f49a3d);
   font-size: var(--font-size-xs, 10px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-bold, 700);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   margin: 10px 0;
 }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: contents;
 }
 

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }
 

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .tag-state {
   border-radius: 12px;

package/dist/collection/components/dropi-badge-legacy/dropi-badge-legacy.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }
 

package/dist/collection/components/dropi-banner-external/dropi-banner-external.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .breadcrumb {
   margin: 0;

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

@@ -12,9 +12,11 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .btn {
   all: unset;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   box-sizing: border-box;
   display: flex;
   align-items: center;

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

@@ -4,6 +4,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .container-card-check {
   padding: var(--Size-4, 16px);

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

@@ -1,8 +1,9 @@
 :host {
   display: block;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
 }
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 /* ── Card wrapper ── */
 .dropi-card-product {
@@ -104,7 +105,7 @@
 
 .category {
   color: #69738c;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
@@ -115,7 +116,7 @@
   display: flex;
   align-items: center;
   gap: 2px;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
@@ -132,7 +133,7 @@
 /* ── Product name ── */
 .product-name {
   color: #32394d;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
@@ -146,7 +147,7 @@
 
 /* ── Supplier ── */
 .supplier-info {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   line-height: 1.2;
 }
@@ -178,7 +179,7 @@
 
 .price-label {
   color: #69738c;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
@@ -188,7 +189,7 @@
 
 .price-value {
   color: #32394d;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 14px;
   font-weight: 700;
   line-height: 1.1;
@@ -225,7 +226,7 @@
 }
 
 .button-text {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-size: 14px;
   font-weight: 700;
   line-height: 1.1;

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

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .card-section {
@@ -16,7 +17,7 @@
 
 .card-section__title {
   margin: 0 0 4px;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-bold, 700);
   color: var(--Gray-Gray-800, #1f2433);
 }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }
 

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

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .csl__search {
@@ -13,7 +14,7 @@
 
 .csl__search-input {
   flex: 1; border: none; outline: none;
-  font-size: var(--font-size-s, 12px); font-family: inherit;
+  font-size: var(--font-size-s, 12px); font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d); background: transparent;
 }
 

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-flex;
 }
 
@@ -13,7 +14,7 @@
   padding: 0 var(--Size-2, 8px);
   border-radius: var(--Border-2, 8px);
   font-size: var(--font-size-xs, 10px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   width: fit-content;
   max-width: 200px;
 }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   position: relative;
@@ -15,7 +16,7 @@
 /* ── Trigger ──────────────────────────────────────────────────────── */
 .selector-trigger {
   width: 100%;
-  min-height: 44px;
+  min-height: 40px;
   padding: 6px 12px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
@@ -26,7 +27,7 @@
   gap: 8px;
   cursor: pointer;
   text-align: left;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: border-color 0.15s;
 }
 
@@ -115,7 +116,7 @@
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: var(--Gray-Gray-50, #f7f8fa);
   outline: none;

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }
 

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-flex;
 }
 

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   text-align: left;
@@ -28,14 +29,14 @@ label {
 /* ── Trigger button ──────────────────────────────────────────────── */
 .select-button {
   width: 100%;
-  height: 44px;
+  height: 40px;
   padding: 0 12px;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -164,7 +165,7 @@ label {
   border-radius: var(--Border-2, 8px);
   outline: none;
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: var(--Gray-Gray-50, #f7f8fa);
   transition: border-color 0.15s, background 0.15s;
@@ -197,7 +198,7 @@ label {
   text-align: left;
   color: var(--Gray-Gray-700, #32394d);
   font-size: var(--font-size-s, 14px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -1,17 +1,19 @@
 :host { display: block; width: 100%; position: relative; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .dp-label {
   display: block;
-  font-size: var(--font-size-xxs, 10px);
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-regular, 400);
   color: var(--Gray-Gray-600, #475066);
-  margin-bottom: 4px;
+  margin-bottom: 8px;
 }
 
 /* Trigger */
 .dp-trigger {
   width: 100%;
-  height: 44px;
+  height: 40px;
   display: flex;
   align-items: center;
   gap: var(--Size-2, 8px);
@@ -20,7 +22,7 @@
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   cursor: pointer;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: border-color 0.2s;
 }
 .dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
@@ -42,13 +44,60 @@
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
-  width: 320px;
+  display: flex;
+  flex-direction: row;
   background: var(--Neutral-White, #ffffff);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-3, 12px);
   box-shadow: 0 4px 16px rgba(0,0,0,0.08);
   z-index: 300;
+  overflow: hidden;
+}
+
+/* Calendar section */
+.dp-calendar {
   padding: var(--Size-4, 16px);
+  width: 300px;
+  flex-shrink: 0;
+}
+
+/* Vertical divider */
+.dp-divider {
+  width: 1px;
+  background: var(--Gray-Gray-100, #e6eaf2);
+  flex-shrink: 0;
+}
+
+/* Shortcuts section */
+.dp-shortcuts {
+  padding: var(--Size-4, 16px) var(--Size-3, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 140px;
+}
+
+.shortcut-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  padding: 6px 10px;
+  font-size: 13px;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
+  color: var(--Gray-Gray-700, #32394d);
+  cursor: pointer;
+  text-align: left;
+  border-radius: 6px;
+  transition: background 0.1s ease;
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+.shortcut-btn:hover {
+  background: var(--Gray-Gray-50, #f5f6f8);
+}
+.shortcut-btn--active {
+  border-color: var(--Gray-Gray-200, #c3c9d9);
+  font-weight: var(--font-weight-semibold);
+  background: var(--Gray-Gray-50, #f5f6f8);
 }
 
 /* Navigation */
@@ -57,6 +106,8 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--Size-4, 16px);
+  padding-bottom: var(--Size-3, 12px);
+  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
 }
 
 .dp-nav__btn {
@@ -75,14 +126,22 @@
 .dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 
 .dp-nav__title {
+  background: none;
+  border: none;
   font-size: var(--font-size-s, 14px);
   font-weight: var(--font-weight-bold, 700);
   color: var(--Gray-Gray-700, #32394d);
   display: flex;
   gap: 8px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--Border-1, 4px);
+  transition: background 0.15s;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
 }
+.dp-nav__title:hover { background: var(--Gray-Gray-50, #f7f8fa); }
 
-/* Grid */
+/* Day grid */
 .dp-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -105,7 +164,7 @@
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-xs, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   border: none;
   cursor: pointer;
   background: transparent;
@@ -115,8 +174,6 @@
   z-index: 1;
   padding: 0;
 }
-
-/* Pseudo-element for the circle (selected / hover / today) */
 .dp-cell::after {
   content: "";
   position: absolute;
@@ -126,8 +183,6 @@
   z-index: -1;
   background: transparent;
 }
-
-/* Pseudo-element for the continuous light-orange range background */
 .dp-cell::before {
   content: "";
   position: absolute;
@@ -137,79 +192,72 @@
   background: transparent;
 }
 
-.dp-cell:hover:not(:disabled)::after {
-  background: var(--Gray-Gray-100, #e6eaf2);
-}
-
+.dp-cell:hover:not(:disabled)::after { background: var(--Gray-Gray-100, #e6eaf2); }
 .dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }
+.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; }
+.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 { color: var(--Orange-orange-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }
+.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; }
 
-.dp-cell--today {
-  font-weight: var(--font-weight-bold, 700);
-}
-.dp-cell--today::after {
-  background: var(--Gray-Gray-100, #e6eaf2);
+/* Month grid */
+.dp-month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
 }
 
-.dp-cell--selected {
-  color: var(--Neutral-White, #ffffff);
-  font-weight: var(--font-weight-bold, 700);
+.dp-month-cell {
+  padding: 10px 4px;
+  font-size: var(--font-size-s, 14px);
+  font-family: var(--font-family-01, 'Inter', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-700, #32394d);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2, 8px);
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s, border-color 0.15s;
 }
-.dp-cell--selected::after {
-  background: var(--Orange-orange-500, #f49a3d) !important;
+.dp-month-cell:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.dp-month-cell--selected {
+  border-color: var(--Info-Info-500, #50a5f1);
+  font-weight: var(--font-weight-semibold, 600);
 }
+.dp-month-cell--current { background: var(--Gray-Gray-100, #e6eaf2); }
 
-/* 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;
+/* Year grid */
+.dp-year-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
 }
 
-.dp-cell--in-range {
-  color: var(--Orange-orange-500, #f49a3d);
-  font-weight: var(--font-weight-bold, 700);
-}
-.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 {
+.dp-year-cell {
+  padding: 10px 4px;
+  font-size: var(--font-size-s, 14px);
+  font-family: var(--font-family-01, 'Inter', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-700, #32394d);
   background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2, 8px);
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s, border-color 0.15s;
 }
-
-.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }
-
-/* Footer */
-.dp-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--Size-3, 12px);
-  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);
-  padding-top: var(--Size-2, 8px);
+.dp-year-cell:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.dp-year-cell--selected {
+  border-color: var(--Info-Info-500, #50a5f1);
+  font-weight: var(--font-weight-semibold, 600);
 }
+.dp-year-cell--current { background: var(--Gray-Gray-100, #e6eaf2); }
 
-.dp-footer__clear,
-.dp-footer__today {
-  background: none;
-  border: none;
-  padding: 4px 8px;
-  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, #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(--Orange-orange-50, #fef5ec); }