fix(date-picker): fix year-select width logic (#11071)

**Related Issue:** #10731 

## Summary

Fixes a text width logic issue where
[`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font) would be
empty instead of the expected shorthand value.

This also moves the text-width calculation logic to a
`requestAnimationFrame` callback to improve timing and performance.

BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE

packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

@@ -306,15 +306,20 @@ export class DatePickerMonthHeader extends LitElement {
   }
 
   private setYearSelectMenuWidth(): void {
-    if (!this.monthPickerEl.value) {
+    const el = this.monthPickerEl.value;
+    if (!el) {
       return;
     }
 
-    const fontStyle = getComputedStyle(this.monthPickerEl.value).font;
-    const localeMonths = this.localeData.months[this.monthStyle];
-    const activeLocaleMonth = localeMonths[this.activeDate.getMonth()];
-    const selectedOptionWidth = Math.ceil(getTextWidth(activeLocaleMonth, fontStyle));
-    this.monthPickerEl.value.style.width = `${selectedOptionWidth + this.yearSelectWidthOffset}px`;
+    requestAnimationFrame(() => {
+      const computedStyle = getComputedStyle(el);
+      // we recreate the shorthand vs using computedStyle.font because browsers will return "" instead of the expected value
+      const shorthandFont = `${computedStyle.fontStyle} ${computedStyle.fontVariant} ${computedStyle.fontWeight} ${computedStyle.fontSize}/${computedStyle.lineHeight} ${computedStyle.fontFamily}`;
+      const localeMonths = this.localeData.months[this.monthStyle];
+      const activeLocaleMonth = localeMonths[this.activeDate.getMonth()];
+      const selectedOptionWidth = Math.ceil(getTextWidth(activeLocaleMonth, shorthandFont));
+      el.style.width = `${selectedOptionWidth + this.yearSelectWidthOffset}px`;
+    });
   }
 
   private isMonthInRange(index: number): boolean {