@heartlandone/vega 2.76.0 → 2.77.0

package/dist/collection/components/vega-accordion/slimmers/vega-accordion-renderer.js

@@ -49,7 +49,7 @@ export class VegaAccordionRenderer extends VegaSlimmer {
       formatAndValidResponsiveToken(this.showExpandIcon, 'display'),
     ];
     return (h("div", { class: `${arrayToClassString(classes)}` },
-      h("vega-button-circle", { size: "small", "icon-color": "text-link", variant: "icon-only", icon: VegaInternalIconManager.getIconKey(this.expandIconAlign === 'left' ? 'chevron-down' : 'chevron-up'), ref: (ref) => {
+      h("vega-button-circle", { size: "small", "icon-color": "text-link", variant: "icon-only", "data-aria-label": this.expand ? 'Collapse accordion' : 'Expand accordion', "data-aria-expanded": `${this.expand}`, icon: VegaInternalIconManager.getIconKey(this.expandIconAlign === 'left' ? 'chevron-down' : 'chevron-up'), ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.expandController.flipExpand();
           });

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

@@ -166,6 +166,7 @@
 .accordion.collapsed .accordion-content {
   max-height: 0px;
   overflow: hidden;
+  display: none;
 }
 
 .accordion.collapsed .accordion-expand-icon-align-left {
@@ -188,4 +189,8 @@
 
 .icon-position-center .accordion-expand-icon {
   align-self: center;
+}
+
+.hidden {
+  display: none;
 }

package/dist/collection/components/vega-button-circle/vega-button-circle.js

@@ -18,6 +18,7 @@ import { findParent } from '../../utils/ui';
 import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * @vegaVersion 1.0.2
  */
@@ -33,6 +34,17 @@ export class VegaButtonCircle {
         }
       },
     });
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
+      return this.host.shadowRoot.querySelector('button');
+    }, {
+      'aria-label': {
+        dependency: ['data-aria-label', 'label'],
+        defaultValue: 'No label defined',
+      },
+      'aria-expanded': {
+        dependency: ['data-aria-expanded'],
+      },
+    });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonCircleRuntimeMetricsPayloadDefinition);
     /**
      * Specifies the size of the circular button.
@@ -116,8 +128,7 @@ export class VegaButtonCircle {
       h("vega-tooltip", { text: this.label, trigger: this.label && this.showTooltip && !this.disabled ? 'hover' : 'none', disableInteractive: (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.disableInteractive }, this.renderButton())), this.host);
   }
   renderButton() {
-    var _a;
-    return (h("button", { type: this.type, "aria-label": ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) || 'No label defined', class: {
+    return (h("button", { type: this.type, class: {
         [`vega-button-circle-size-${this.size}`]: true,
         [`vega-button-circle-variant-${this.variant}`]: true,
         'vega-button-circle-danger': this.danger,
@@ -243,7 +254,7 @@ export class VegaButtonCircle {
         "text": "Specifies the text to be displayed in the tooltip for the circular button\n   and sets it as the `aria-label` for accessibility."
       },
       "attribute": "label",
-      "reflect": false
+      "reflect": true
     },
     "disabled": {
       "type": "boolean",
@@ -435,6 +446,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonCircle.prototype, "eventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonCircle.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonCircle.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-month-item-renderer.js

@@ -38,7 +38,17 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
     return (h("vega-grid", { class: "container__days", column: '7-auto', row: this.staticHeight ? 6 : '6-auto' }, periodView.dateItems
       .flat()
       .filter((day) => day.month <= period.current.month || day.year < period.current.year)
-      .map((day) => this.renderDay(day, period))));
+      .map((day) => this.renderItem(day, period))));
+  }
+  renderItem(day, period) {
+    const dateIndicator = this.dateIndicator(day.toDate());
+    const dayElement = this.renderDay(day, period);
+    return dateIndicator && dateIndicator.text
+      ? this.renderDayWithIndicator(dateIndicator, dayElement)
+      : dayElement;
+  }
+  renderDayWithIndicator(dateIndicator, dayElement) {
+    return h("vega-tooltip", Object.assign({}, dateIndicator), dayElement);
   }
   renderDay(day, period) {
     const isCurrentMonth = day.month === period.current.month;
@@ -59,7 +69,8 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
       /* eslint-disable-next-line react/jsx-no-bind */
       onClick: () => canInterActive && this.selectionController.onDayClick(day), 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": day.date, tabIndex: canInterActive ? 0 : -1 }, isCurrentMonth ? day.date : ''));
+      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": day.date, tabIndex: canInterActive ? 0 : -1 },
+      h("div", { class: "day-content" }, isCurrentMonth ? day.date : '')));
   }
   getCurrentRangeDates() {
     const startDate = this.calendarSelection.startDate;
@@ -119,6 +130,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "dateIndicator", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -333,17 +333,21 @@
     line-height: 16px;
   }
 }
-:host(.small) .calendar .container__days .day-item .is-start-date,
-:host(.small) .calendar .container__days .day-item .is-end-date {
+:host(.small) .calendar .container__days .day-item .day-content {
+  width: 18px;
+  height: 18px;
+}
+:host(.small) .calendar .container__days .day-item.is-today .day-content {
   font-family: "Inter", sans-serif;
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
   letter-spacing: 0px;
+  width: 18px;
+  height: 18px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host(.small) .calendar .container__days .day-item .is-start-date,
-  :host(.small) .calendar .container__days .day-item .is-end-date {
+  :host(.small) .calendar .container__days .day-item.is-today .day-content {
     font-family: "Inter", sans-serif;
     font-size: 12px;
     font-weight: 700;
@@ -352,8 +356,7 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host(.small) .calendar .container__days .day-item .is-start-date,
-  :host(.small) .calendar .container__days .day-item .is-end-date {
+  :host(.small) .calendar .container__days .day-item.is-today .day-content {
     font-family: "Inter", sans-serif;
     font-size: 12px;
     font-weight: 700;
@@ -362,8 +365,7 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host(.small) .calendar .container__days .day-item .is-start-date,
-  :host(.small) .calendar .container__days .day-item .is-end-date {
+  :host(.small) .calendar .container__days .day-item.is-today .day-content {
     font-family: "Inter", sans-serif;
     font-size: 12px;
     font-weight: 700;
@@ -371,6 +373,18 @@
     letter-spacing: 0px;
   }
 }
+:host(.small) .calendar .container__days .day-item:focus-visible .day-content {
+  width: 16px;
+}
+:host(.small) .calendar .container__days .day-item:focus-visible .day-content {
+  width: 16px;
+}
+:host(.small) .calendar .container__days vega-tooltip .day-item .day-content:after {
+  width: 4px;
+  height: 4px;
+  bottom: -3px;
+  left: calc(50% - 2px);
+}
 
 :host(.small.range) .calendar .container__main {
   width: 100%;
@@ -639,6 +653,46 @@
     line-height: 18px;
   }
 }
+:host(.regular) .calendar .container__days .day-item .day-content {
+  width: 24px;
+  height: 24px;
+}
+:host(.regular) .calendar .container__days .day-item.is-today .day-content {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .calendar .container__days vega-tooltip .day-item .day-content:after {
+  width: 4px;
+  height: 4px;
+  bottom: -3px;
+  left: calc(50% - 2px);
+}
 
 :host(.regular.range) .calendar .container__main {
   width: 100%;
@@ -968,6 +1022,61 @@
     letter-spacing: 0px;
   }
 }
+:host(.large) .calendar .container__days .day-item .day-content {
+  width: 36px;
+  height: 36px;
+}
+:host(.large) .calendar .container__days .day-item.is-today .day-content {
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .calendar .container__days .day-item.is-today .day-content {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .calendar .container__days vega-tooltip .day-item .day-content:after {
+  width: 6px;
+  height: 6px;
+  bottom: -4px;
+  left: calc(50% - 3px);
+}
+
+:host(.regular) .container__days .day-item.is-today .day-content,
+:host(.large) .container__days .day-item.is-today .day-content {
+  border: 1px solid rgba(var(--v-text-primary, 32, 54, 69, 1));
+}
+:host(.regular) .container__days .day-item.is-today.is-start-date .day-content, :host(.regular) .container__days .day-item.is-today.is-end-date .day-content, :host(.regular) .container__days .day-item.is-today:active:not(.is-locked):not(.is-disabled) .day-content,
+:host(.large) .container__days .day-item.is-today.is-start-date .day-content,
+:host(.large) .container__days .day-item.is-today.is-end-date .day-content,
+:host(.large) .container__days .day-item.is-today:active:not(.is-locked):not(.is-disabled) .day-content {
+  border-color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
+}
 
 :host(.large.range) .calendar .container__main {
   width: 100%;
@@ -1042,6 +1151,7 @@
 
 .calendar .container__months .month-item-weekdays-row > div,
 .calendar .container__days > div,
+.calendar .container__days > vega-tooltip > div,
 .calendar .container__days > a {
   padding: 4px;
   display: flex;
@@ -1055,144 +1165,70 @@
 
 .calendar .container__days .day-item {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 22px;
-  letter-spacing: 0px;
   text-align: center;
   border-radius: 9999px;
   cursor: default;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .calendar .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .calendar .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
+.calendar .container__days .day-item .day-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  box-sizing: border-box;
 }
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .calendar .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
+.calendar .container__days .day-item:hover {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
 }
-
-.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active {
+.calendar .container__days .day-item:active {
   background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
-  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+  color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
   border-width: 0px;
+  outline: none;
 }
-
-.calendar .day-item.is-start-date.is-end-date.is-locked:active {
-  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-}
-
-.calendar .container__days .day-item:hover:before {
-  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
-  border-radius: 9999px;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  content: " ";
-  z-index: -1;
-}
-
-.calendar .container__days .day-item.is-locked:hover:before,
-html.dark .calendar .container__days .day-item.is-locked:hover:before {
-  border-style: none;
+.calendar .container__days .day-item:focus-visible {
+  border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
+  outline: none;
 }
-
-.calendar .container__days .day-item.is-disabled:hover:before {
-  border-style: none;
-}
-
 .calendar .container__days .day-item.is-locked, .calendar .container__days .day-item.is-disabled {
+  color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
   -webkit-tap-highlight-color: transparent;
+  cursor: not-allowed;
 }
-
-.calendar .container__days .day-item:hover {
-  position: relative;
+.calendar .container__days .day-item.is-locked:hover, .calendar .container__days .day-item.is-disabled:hover {
+  border-width: 0px;
 }
-
-.calendar .container__days .day-item.is-today {
-  color: rgba(var(--v-text-link, 19, 98, 226, 1));
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 18px;
+.calendar .container__days .day-item.is-locked:active, .calendar .container__days .day-item.is-disabled:active {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
+  border-width: 0px;
+  outline: none;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .calendar .container__days .day-item.is-today {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
+.calendar .container__days .day-item.is-disabled {
+  text-decoration: line-through;
 }
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .calendar .container__days .day-item.is-today {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
+.calendar .container__days .day-item.is-start-date, .calendar .container__days .day-item.is-end-date {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+  color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
+  position: relative;
+  border-width: 0px;
 }
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .calendar .container__days .day-item.is-today {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
+.calendar .container__days .day-item.is-start-date:hover, .calendar .container__days .day-item.is-end-date:hover {
+  background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
 }
-
-.calendar .container__days .day-item.is-in-range {
-  border-radius: 0px;
-  position: relative;
-  z-index: 2;
-  background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
+.calendar .container__days .day-item.is-start-date:active, .calendar .container__days .day-item.is-end-date:active {
+  background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
 }
-
-.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before {
-  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
-  border-radius: 9999px;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  content: " ";
-  z-index: -1;
+.calendar .container__days .day-item.is-start-date:focus-visible, .calendar .container__days .day-item.is-end-date:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  background-color: rgba(var(--v-bg-action-focus, 19, 98, 226, 1));
 }
-
-.calendar .container__days .day-item.is-start-date {
-  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-  border-radius: 9999px;
-  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
-  position: relative;
+.calendar .container__days .day-item.is-start-date.is-disabled, .calendar .container__days .day-item.is-start-date.is-locked, .calendar .container__days .day-item.is-end-date.is-disabled, .calendar .container__days .day-item.is-end-date.is-locked {
+  background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
+  color: rgba(var(--v-text-on-disabled, 252, 252, 252, 1));
 }
-
-.calendar .container__days .day-item.is-start-date:hover:before {
-  z-index: 2;
+.calendar .container__days .day-item.is-start-date.is-end-date:after {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
 }
-
 .calendar .container__days .day-item.is-start-date:after {
   position: absolute;
   top: 0px;
@@ -1207,37 +1243,6 @@ html.dark .calendar .container__days .day-item.is-locked:hover:before {
   z-index: -1;
   background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
 }
-
-.calendar .container__days .day-item.is-start-date.is-flipped {
-  border-radius: 9999px;
-  position: relative;
-}
-
-.calendar .container__days .day-item.is-start-date.is-flipped:after {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-top-right-radius: 9999px;
-  border-bottom-right-radius: 9999px;
-  content: " ";
-  z-index: -1;
-}
-
-.calendar .container__days .day-item.is-end-date {
-  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-  border-radius: 9999px;
-  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
-  position: relative;
-}
-
-.calendar .container__days .day-item.is-end-date:hover:before {
-  z-index: 2;
-}
-
 .calendar .container__days .day-item.is-end-date:after {
   position: absolute;
   top: 0px;
@@ -1252,42 +1257,44 @@ html.dark .calendar .container__days .day-item.is-locked:hover:before {
   z-index: -1;
   background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
 }
-
-.calendar .container__days .day-item.is-end-date.is-flipped {
-  border-radius: 9999px;
+.calendar .container__days .day-item.is-in-range {
+  border-radius: 0px;
+  background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
+  border-width: 0px;
+}
+.calendar .container__days .day-item.is-in-range:hover {
   position: relative;
 }
-
-.calendar .container__days .day-item.is-end-date.is-flipped:after {
+.calendar .container__days .day-item.is-in-range:hover:before {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+  border-radius: 9999px;
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-top-left-radius: 9999px;
-  border-bottom-left-radius: 9999px;
   content: " ";
-  z-index: -1;
 }
-
-.calendar .container__days .day-item.is-start-date.is-end-date {
-  border-radius: 9999px;
+.calendar .container__days .day-item.is-in-range:focus-visible {
+  border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
+  outline: none;
 }
 
-.calendar .container__days .day-item.is-start-date.is-end-date:after,
-html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after {
-  background: none;
+.calendar .container__days vega-tooltip {
+  width: 100%;
 }
 
-.calendar .container__tooltip {
-  display: none;
+.calendar .container__days vega-tooltip .day-item .day-content {
+  position: relative;
 }
-
-.calendar .container__days .day-item.is-locked {
-  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
-  cursor: not-allowed;
+.calendar .container__days vega-tooltip .day-item .day-content:after {
+  position: absolute;
+  border-radius: 9999px;
+  content: " ";
+  background-color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+}
+.calendar .container__days vega-tooltip .day-item.is-start-date .day-content:after, .calendar .container__days vega-tooltip .day-item.is-end-date .day-content:after, .calendar .container__days vega-tooltip .day-item:active:not(.is-locked):not(.is-disabled) .day-content:after {
+  background-color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
 }
 
 .calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days > div {
@@ -1351,36 +1358,6 @@ html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after {
   height: 16px;
 }
 
-.calendar .container__days .day-item.is-disabled {
-  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
-  cursor: not-allowed;
-  text-decoration: line-through;
-}
-
 .calendar .container__days > div:not(.day-item) {
   -webkit-tap-highlight-color: transparent;
-}
-
-.calendar .month-item-header > div.dropdown-section {
-  display: flex;
-  gap: 12px;
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value {
-  position: relative;
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  cursor: pointer;
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active {
-  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
-  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
-  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
-}
-.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
-  color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.js

@@ -109,6 +109,14 @@ export class VegaDatePickerCalendar {
      * @vegaVersion 2.72.0
      */
     this.isDateDisabled = () => false;
+    /**
+     * Specifies a function that returns the properties for the date indicator tooltip for a given date in the date picker.
+     *
+     * The function is called for each date cell before rendering.
+     *
+     * @vegaVersion 2.77.0
+     */
+    this.dateIndicator = () => null;
   }
   watchCurrentPeriod() {
     methodPlaceholder();
@@ -445,6 +453,30 @@ export class VegaDatePickerCalendar {
         "text": "Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).\n\nThe function is called for each date cell before rendering.\n\nReturn `true` to disable the cell, or false to keep it selectable.\nDefault behavior: always returns `false` (no cells are disabled)."
       },
       "defaultValue": "() => false"
+    },
+    "dateIndicator": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DatePickerCalendarIndicator",
+        "resolved": "(date: Date) => Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\">>",
+        "references": {
+          "DatePickerCalendarIndicator": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.77.0"
+          }],
+        "text": "Specifies a function that returns the properties for the date indicator tooltip for a given date in the date picker.\n\nThe function is called for each date cell before rendering."
+      },
+      "defaultValue": "() => null"
     }
   }; }
   static get states() { return {