style(datepicker): change box shadow to outline as disabled td interferes with box shadow appearance

Author: clukhei

src/components/Datepicker/datepicker-calendar.css

@@ -28,6 +28,7 @@ button.year.active:not(.selected-ends)
   background-color: var(--sgds-form-primary-bg-translucent);
   border-radius: 0;
 }
+
 td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active),
 button.month:hover:not(.active),
 button.year:hover:not(.active)  {
@@ -37,8 +38,12 @@ button.year:hover:not(.active)  {
 td[data-day]:focus,
 button.month:focus,
 button.year:focus  {
-  box-shadow: var(--sgds-box-shadow-focus);
-  outline: unset;
+  outline: var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400);
+}
+td[data-day].active:not(.selected-ends):focus,
+button.month.active:not(.selected-ends):focus,
+button.year.active:not(.selected-ends):focus {
+  border-radius:  var(--sgds-form-border-radius-sm);
 }
 button.year.active {
   cursor: pointer;
@@ -61,6 +66,7 @@ button.year.active.selected-ends  {
   background-color: var(--sgds-form-primary-bg);
   color: var(--sgds-form-color-on-dark);
 }
+
 td[data-day].disabled {
   opacity: var(--sgds-opacity-50);
   cursor: not-allowed;

src/components/Datepicker/datepicker-calendar.ts

@@ -93,6 +93,8 @@ export class DatepickerCalendar extends SgdsElement {
   connectedCallback(): void {
     super.connectedCallback();
     this.addEventListener("keydown", this._handleKeyPress);
+    /** Prevent validation from happening when navigating the calendar */
+    this.addEventListener("blur", e => e.stopPropagation());
   }
 
   updated() {

src/components/Datepicker/sgds-datepicker.ts

@@ -320,7 +320,7 @@ export class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) impl
   private async _handleInvalidInput() {
     this.selectedDateRange = [];
     this.displayDate = this.initialDisplayDate;
-    this.invalid = true
+    this.invalid = true;
     this._manageInternalsBadInput();
   }
   private async _handleEmptyInput() {