@fluentui/web-components 2.0.1 → 2.1.2

package/dist/web-components.js

@@ -3630,7 +3630,7 @@ function when(binding, templateOrTemplateBinding) {
   return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
 }
 
-Object.freeze({
+const defaultRepeatOptions = Object.freeze({
   positioning: false
 });
 
@@ -3892,6 +3892,19 @@ class RepeatDirective extends HTMLDirective {
   }
 
 }
+/**
+ * A directive that enables list rendering.
+ * @param itemsBinding - The array to render.
+ * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * to render for each item in the array.
+ * @param options - Options used to turn on special repeat features.
+ * @public
+ */
+
+function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
+  const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
+  return new RepeatDirective(itemsBinding, templateBinding, options);
+}
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
@@ -4144,7 +4157,7 @@ const startSlotTemplate = (context, definition) => html`<span part="start" ${ref
  * @deprecated - use endSlotTemplate
  */
 
-html`<span part="end" ${ref("endContainer")}><slot name="end" ${ref("end")} @slotchange="${x => x.handleEndContentChange()}"></slot></span>`;
+const endTemplate = html`<span part="end" ${ref("endContainer")}><slot name="end" ${ref("end")} @slotchange="${x => x.handleEndContentChange()}"></slot></span>`;
 /**
  * The template for the start element.
  * For use with {@link StartEnd}
@@ -4153,7 +4166,7 @@ html`<span part="end" ${ref("endContainer")}><slot name="end" ${ref("end")} @slo
  * @deprecated - use startSlotTemplate
  */
 
-html`<span part="start" ${ref("startContainer")}><slot name="start" ${ref("start")} @slotchange="${x => x.handleStartContentChange()}"></slot></span>`;
+const startTemplate = html`<span part="start" ${ref("startContainer")}><slot name="start" ${ref("start")} @slotchange="${x => x.handleStartContentChange()}"></slot></span>`;
 
 /**
  * The template for the {@link @microsoft/fast-foundation#(AccordionItem:class)} component.
@@ -8612,6 +8625,521 @@ __decorate$1([attr({
 applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
 applyMixins(Button$1, StartEnd, DelegatesARIAButton);
 
+/**
+ * Date formatting utility
+ * @public
+ */
+class DateFormatter {
+  constructor(config) {
+    /**
+     * Formatting for the day
+     * @public
+     */
+    this.dayFormat = "numeric";
+    /**
+     * Formatting for the weekday labels
+     * @public
+     */
+
+    this.weekdayFormat = "long";
+    /**
+     * Formatting for the month
+     * @public
+     */
+
+    this.monthFormat = "long";
+    /**
+     * Formatting for the year
+     * @public
+     */
+
+    this.yearFormat = "numeric";
+    /**
+     * Date used for formatting
+     */
+
+    this.date = new Date();
+    /**
+     * Add properties on construction
+     */
+
+    if (config) {
+      for (const key in config) {
+        const value = config[key];
+
+        if (key === "date") {
+          this.date = this.getDateObject(value);
+        } else {
+          this[key] = value;
+        }
+      }
+    }
+  }
+  /**
+   * Helper function to make sure that the DateFormatter is working with an instance of Date
+   * @param date - The date as an object, string or Date insance
+   * @returns - A Date instance
+   * @public
+   */
+
+
+  getDateObject(date) {
+    if (typeof date === "string") {
+      const dates = date.split(/[/-]/);
+
+      if (dates.length < 3) {
+        return new Date();
+      }
+
+      return new Date(parseInt(dates[2], 10), parseInt(dates[0], 10) - 1, parseInt(dates[1], 10));
+    } else if ("day" in date && "month" in date && "year" in date) {
+      const {
+        day,
+        month,
+        year
+      } = date;
+      return new Date(year, month - 1, day);
+    }
+
+    return date;
+  }
+  /**
+   *
+   * @param date - a valide date as either a Date, string, objec or a DateFormatter
+   * @param format - The formatting for the string
+   * @param locale - locale data used for formatting
+   * @returns A localized string of the date provided
+   * @public
+   */
+
+
+  getDate(date = this.date, format = {
+    weekday: this.weekdayFormat,
+    month: this.monthFormat,
+    day: this.dayFormat,
+    year: this.yearFormat
+  }, locale = this.locale) {
+    const dateObj = this.getDateObject(date);
+    const optionsWithTimeZone = Object.assign({
+      timeZone: "utc"
+    }, format);
+    return new Intl.DateTimeFormat(locale, optionsWithTimeZone).format(dateObj);
+  }
+  /**
+   *
+   * @param day - Day to localize
+   * @param format - The formatting for the day
+   * @param locale - The locale data used for formatting
+   * @returns - A localized number for the day
+   * @public
+   */
+
+
+  getDay(day = this.date.getDate(), format = this.dayFormat, locale = this.locale) {
+    return this.getDate({
+      month: 1,
+      day,
+      year: 2020
+    }, {
+      day: format
+    }, locale);
+  }
+  /**
+   *
+   * @param month - The month to localize
+   * @param format - The formatting for the month
+   * @param locale - The locale data used for formatting
+   * @returns - A localized name of the month
+   * @public
+   */
+
+
+  getMonth(month = this.date.getMonth() + 1, format = this.monthFormat, locale = this.locale) {
+    return this.getDate({
+      month,
+      day: 2,
+      year: 2020
+    }, {
+      month: format
+    }, locale);
+  }
+  /**
+   *
+   * @param year - The year to localize
+   * @param format - The formatting for the year
+   * @param locale - The locale data used for formatting
+   * @returns - A localized string for the year
+   * @public
+   */
+
+
+  getYear(year = this.date.getFullYear(), format = this.yearFormat, locale = this.locale) {
+    return this.getDate({
+      month: 2,
+      day: 2,
+      year
+    }, {
+      year: format
+    }, locale);
+  }
+  /**
+   *
+   * @param weekday - The number of the weekday, defaults to Sunday
+   * @param format - The formatting for the weekday label
+   * @param locale - The locale data used for formatting
+   * @returns - A formatted weekday label
+   * @public
+   */
+
+
+  getWeekday(weekday = 0, format = this.weekdayFormat, locale = this.locale) {
+    const date = `1-${weekday + 1}-2017`;
+    return this.getDate(date, {
+      weekday: format
+    }, locale);
+  }
+  /**
+   *
+   * @param format - The formatting for the weekdays
+   * @param locale - The locale data used for formatting
+   * @returns - An array of the weekday labels
+   * @public
+   */
+
+
+  getWeekdays(format = this.weekdayFormat, locale = this.locale) {
+    return Array(7).fill(null).map((_, day) => this.getWeekday(day, format, locale));
+  }
+
+}
+
+/**
+ * Calendar component
+ * @public
+ */
+
+class Calendar$1 extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * date formatter utitlity for getting localized strings
+     * @public
+     */
+
+    this.dateFormatter = new DateFormatter();
+    /**
+     * Readonly attribute for turning off data-grid
+     * @public
+     */
+
+    this.readonly = false;
+    /**
+     * String repesentation of the full locale including market, calendar type and numbering system
+     * @public
+     */
+
+    this.locale = "en-US";
+    /**
+     * Month to display
+     * @public
+     */
+
+    this.month = new Date().getMonth() + 1;
+    /**
+     * Year of the month to display
+     * @public
+     */
+
+    this.year = new Date().getFullYear();
+    /**
+     * Format style for the day
+     * @public
+     */
+
+    this.dayFormat = "numeric";
+    /**
+     * Format style for the week day labels
+     * @public
+     */
+
+    this.weekdayFormat = "short";
+    /**
+     * Format style for the month label
+     * @public
+     */
+
+    this.monthFormat = "long";
+    /**
+     * Format style for the year used in the title
+     * @public
+     */
+
+    this.yearFormat = "numeric";
+    /**
+     * Minimum number of weeks to show for the month
+     * This can be used to normalize the calendar view
+     *  when changing or across multiple calendars
+     * @public
+     */
+
+    this.minWeeks = 0;
+    /**
+     * A list of dates that should be shown as disabled
+     * @public
+     */
+
+    this.disabledDates = "";
+    /**
+     * A list of dates that should be shown as highlighted
+     * @public
+     */
+
+    this.selectedDates = "";
+    /**
+     * The number of miliseconds in a day
+     * @internal
+     */
+
+    this.oneDayInMs = 86400000;
+  }
+
+  localeChanged() {
+    this.dateFormatter.locale = this.locale;
+  }
+
+  dayFormatChanged() {
+    this.dateFormatter.dayFormat = this.dayFormat;
+  }
+
+  weekdayFormatChanged() {
+    this.dateFormatter.weekdayFormat = this.weekdayFormat;
+  }
+
+  monthFormatChanged() {
+    this.dateFormatter.monthFormat = this.monthFormat;
+  }
+
+  yearFormatChanged() {
+    this.dateFormatter.yearFormat = this.yearFormat;
+  }
+  /**
+   * Gets data needed to render about a calendar month as well as the previous and next months
+   * @param year - year of the calendar
+   * @param month - month of the calendar
+   * @returns - an object with data about the current and 2 surrounding months
+   * @public
+   */
+
+
+  getMonthInfo(month = this.month, year = this.year) {
+    const getFirstDay = date => new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+
+    const getLength = date => {
+      const nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+      return new Date(nextMonth.getTime() - this.oneDayInMs).getDate();
+    };
+
+    const thisMonth = new Date(year, month - 1);
+    const nextMonth = new Date(year, month);
+    const previousMonth = new Date(year, month - 2);
+    return {
+      length: getLength(thisMonth),
+      month,
+      start: getFirstDay(thisMonth),
+      year,
+      previous: {
+        length: getLength(previousMonth),
+        month: previousMonth.getMonth() + 1,
+        start: getFirstDay(previousMonth),
+        year: previousMonth.getFullYear()
+      },
+      next: {
+        length: getLength(nextMonth),
+        month: nextMonth.getMonth() + 1,
+        start: getFirstDay(nextMonth),
+        year: nextMonth.getFullYear()
+      }
+    };
+  }
+  /**
+   * A list of calendar days
+   * @param info - an object containing the information needed to render a calendar month
+   * @param minWeeks - minimum number of weeks to show
+   * @returns a list of days in a calendar month
+   * @public
+   */
+
+
+  getDays(info = this.getMonthInfo(), minWeeks = this.minWeeks) {
+    minWeeks = minWeeks > 10 ? 10 : minWeeks;
+    const {
+      start,
+      length,
+      previous,
+      next
+    } = info;
+    const days = [];
+    let dayCount = 1 - start;
+
+    while (dayCount < length + 1 || days.length < minWeeks || days[days.length - 1].length % 7 !== 0) {
+      const {
+        month,
+        year
+      } = dayCount < 1 ? previous : dayCount > length ? next : info;
+      const day = dayCount < 1 ? previous.length + dayCount : dayCount > length ? dayCount - length : dayCount;
+      const dateString = `${month}-${day}-${year}`;
+      const disabled = this.dateInString(dateString, this.disabledDates);
+      const selected = this.dateInString(dateString, this.selectedDates);
+      const date = {
+        day,
+        month,
+        year,
+        disabled,
+        selected
+      };
+      const target = days[days.length - 1];
+
+      if (days.length === 0 || target.length % 7 === 0) {
+        days.push([date]);
+      } else {
+        target.push(date);
+      }
+
+      dayCount++;
+    }
+
+    return days;
+  }
+  /**
+   * A helper function that checks if a date exists in a list of dates
+   * @param date - A date objec that includes the day, month and year
+   * @param datesString - a comma separated list of dates
+   * @returns - Returns true if it found the date in the list of dates
+   * @public
+   */
+
+
+  dateInString(date, datesString) {
+    const dates = datesString.split(",").map(str => str.trim());
+    date = typeof date === "string" ? date : `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
+    return dates.some(d => d === date);
+  }
+  /**
+   * Creates a class string for the day container
+   * @param date - date of the calendar cell
+   * @returns - string of class names
+   * @public
+   */
+
+
+  getDayClassNames(date, todayString) {
+    const {
+      day,
+      month,
+      year,
+      disabled,
+      selected
+    } = date;
+    const today = todayString === `${month}-${day}-${year}`;
+    const inactive = this.month !== month;
+    return ["day", today && "today", inactive && "inactive", disabled && "disabled", selected && "selected"].filter(Boolean).join(" ");
+  }
+  /**
+   * Returns a list of weekday labels
+   * @returns An array of weekday text and full text if abbreviated
+   * @public
+   */
+
+
+  getWeekdayText() {
+    const weekdayText = this.dateFormatter.getWeekdays().map(text => ({
+      text
+    }));
+
+    if (this.weekdayFormat !== "long") {
+      const longText = this.dateFormatter.getWeekdays("long");
+      weekdayText.forEach((weekday, index) => {
+        weekday.abbr = longText[index];
+      });
+    }
+
+    return weekdayText;
+  }
+  /**
+   * Emits the "date-select" event with the day, month and year.
+   * @param date - Date cell
+   * @public
+   */
+
+
+  handleDateSelect(event, day) {
+    event.preventDefault;
+    this.$emit("dateselected", day);
+  }
+  /**
+   * Handles keyboard events on a cell
+   * @param event - Keyboard event
+   * @param date - Date of the cell selected
+   */
+
+
+  handleKeydown(event, date) {
+    if (event.key === keyEnter) {
+      this.handleDateSelect(event, date);
+    }
+
+    return true;
+  }
+
+}
+
+__decorate$1([attr({
+  mode: "boolean"
+})], Calendar$1.prototype, "readonly", void 0);
+
+__decorate$1([attr], Calendar$1.prototype, "locale", void 0);
+
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], Calendar$1.prototype, "month", void 0);
+
+__decorate$1([attr({
+  converter: nullableNumberConverter
+})], Calendar$1.prototype, "year", void 0);
+
+__decorate$1([attr({
+  attribute: "day-format",
+  mode: "fromView"
+})], Calendar$1.prototype, "dayFormat", void 0);
+
+__decorate$1([attr({
+  attribute: "weekday-format",
+  mode: "fromView"
+})], Calendar$1.prototype, "weekdayFormat", void 0);
+
+__decorate$1([attr({
+  attribute: "month-format",
+  mode: "fromView"
+})], Calendar$1.prototype, "monthFormat", void 0);
+
+__decorate$1([attr({
+  attribute: "year-format",
+  mode: "fromView"
+})], Calendar$1.prototype, "yearFormat", void 0);
+
+__decorate$1([attr({
+  attribute: "min-weeks",
+  converter: nullableNumberConverter
+})], Calendar$1.prototype, "minWeeks", void 0);
+
+__decorate$1([attr({
+  attribute: "disabled-dates"
+})], Calendar$1.prototype, "disabledDates", void 0);
+
+__decorate$1([attr({
+  attribute: "selected-dates"
+})], Calendar$1.prototype, "selectedDates", void 0);
+
 /**
  * Enumerates auto generated header options
  * default option generates a non-sticky header row
@@ -9609,6 +10137,102 @@ const dataGridCellTemplate = (context, definition) => {
   }}" class=" ${x => x.cellType === "columnheader" ? "column-header" : x.cellType === "rowheader" ? "row-header" : ""} "><slot></slot></template>`;
 };
 
+/**
+ * A basic Calendar title template that includes the month and year
+ * @returns - A calendar title template
+ * @public
+ */
+
+const CalendarTitleTemplate = html`<div class="title" part="title" aria-label="${x => x.dateFormatter.getDate(`${x.month}-2-${x.year}`, {
+  month: "long",
+  year: "numeric"
+})}"><span part="month">${x => x.dateFormatter.getMonth(x.month)}</span><span part="year">${x => x.dateFormatter.getYear(x.year)}</span></div>`;
+/**
+ * Calendar weekday label template
+ * @returns - The weekday labels template
+ * @public
+ */
+
+const calendarWeekdayTemplate = context => {
+  const cellTag = context.tagFor(DataGridCell);
+  return html`<${cellTag} class="week-day" part="week-day" tabindex="-1" grid-column="${(x, c) => c.index + 1}" abbr="${x => x.abbr}">${x => x.text}</${cellTag}>`;
+};
+/**
+ * A calendar day template
+ * @param context - Element definition context for getting the cell tag for calendar-cell
+ * @param todayString - A string representation for todays date
+ * @returns - A calendar cell template for a given date
+ * @public
+ */
+
+const calendarCellTemplate = (context, todayString) => {
+  const cellTag = context.tagFor(DataGridCell);
+  return html`<${cellTag} class="${(x, c) => c.parentContext.parent.getDayClassNames(x, todayString)}" part="day" tabindex="-1" role="gridcell" grid-column="${(x, c) => c.index + 1}" @click="${(x, c) => c.parentContext.parent.handleDateSelect(c.event, x)}" @keydown="${(x, c) => c.parentContext.parent.handleKeydown(c.event, x)}" aria-label="${(x, c) => c.parentContext.parent.dateFormatter.getDate(`${x.month}-${x.day}-${x.year}`, {
+    month: "long",
+    day: "numeric"
+  })}"><div class="date" part="${x => todayString === `${x.month}-${x.day}-${x.year}` ? "today" : "date"}">${(x, c) => c.parentContext.parent.dateFormatter.getDay(x.day)}</div><slot name="${x => x.month}-${x => x.day}-${x => x.year}"></slot></${cellTag}>`;
+};
+/**
+ *
+ * @param context - Element definition context for getting the cell tag for calendar-cell
+ * @param todayString - A string representation for todays date
+ * @returns - A template for a week of days
+ * @public
+ */
+
+const calendarRowTemplate = (context, todayString) => {
+  const rowTag = context.tagFor(DataGridRow);
+  return html`<${rowTag} class="week" part="week" role="row" role-type="default" grid-template-columns="1fr 1fr 1fr 1fr 1fr 1fr 1fr">${repeat(x => x, calendarCellTemplate(context, todayString), {
+    positioning: true
+  })}</${rowTag}>`;
+};
+/**
+ * Interactive template using DataGrid
+ * @param context - The templates context
+ * @param todayString - string representation of todays date
+ * @returns - interactive calendar template
+ *
+ * @internal
+ */
+
+const interactiveCalendarGridTemplate = (context, todayString) => {
+  const gridTag = context.tagFor(DataGrid);
+  const rowTag = context.tagFor(DataGridRow);
+  return html`<${gridTag} class="days interact" part="days" generate-header="none"><${rowTag} class="week-days" part="week-days" role="row" row-type="header" grid-template-columns="1fr 1fr 1fr 1fr 1fr 1fr 1fr">${repeat(x => x.getWeekdayText(), calendarWeekdayTemplate(context), {
+    positioning: true
+  })}</${rowTag}>${repeat(x => x.getDays(), calendarRowTemplate(context, todayString))}</${gridTag}>`;
+};
+/**
+ * Non-interactive calendar template used for a readonly calendar
+ * @param todayString - string representation of todays date
+ * @returns - non-interactive calendar template
+ *
+ * @internal
+ */
+
+const noninteractiveCalendarTemplate = todayString => {
+  return html`<div class="days" part="days"><div class="week-days" part="week-days">${repeat(x => x.getWeekdayText(), html`<div class="week-day" part="week-day" abbr="${x => x.abbr}">${x => x.text}</div>`)}</div>${repeat(x => x.getDays(), html`<div class="week">${repeat(x => x, html`<div class="${(x, c) => c.parentContext.parent.getDayClassNames(x, todayString)}" part="day" aria-label="${(x, c) => c.parentContext.parent.dateFormatter.getDate(`${x.month}-${x.day}-${x.year}`, {
+    month: "long",
+    day: "numeric"
+  })}"><div class="date" part="${x => todayString === `${x.month}-${x.day}-${x.year}` ? "today" : "date"}">${(x, c) => c.parentContext.parent.dateFormatter.getDay(x.day)}</div><slot name="${x => x.month}-${x => x.day}-${x => x.year}"></slot></div>`)}</div>`)}</div>`;
+};
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Calendar:class)} component.
+ *
+ * @param context - Element definition context for getting the cell tag for calendar-cell
+ * @param definition - Foundation element definition
+ * @returns - a template for a calendar month
+ * @public
+ */
+
+const calendarTemplate = (context, definition) => {
+  var _a;
+
+  const today = new Date();
+  const todayString = `${today.getMonth() + 1}-${today.getDate()}-${today.getFullYear()}`;
+  return html`<template>${startTemplate} ${definition.title instanceof Function ? definition.title(context, definition) : (_a = definition.title) !== null && _a !== void 0 ? _a : ""}<slot></slot>${when(x => x.readonly === false, interactiveCalendarGridTemplate(context, todayString))} ${when(x => x.readonly === true, noninteractiveCalendarTemplate(todayString))} ${endTemplate}</template>`;
+};
+
 /**
  * The template for the {@link @microsoft/fast-foundation#Card} component.
  * @public
@@ -20920,7 +21544,7 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
   return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
 });
 const accordionItemStyles$1 = (context, definition) => css`
-    ${display('flex')} :host{box-sizing:border-box;font-family:${bodyFont};flex-direction:column;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center;z-index:2}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font-family:inherit}.button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;cursor:pointer}.button:${focusVisible}::before{outline:none;border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(.expanded) .button:${focusVisible}::before{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.expanded) .region{display:block;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-bottom-left-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px);border-bottom-right-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px)}.icon{display:flex;align-items:center;justify-content:center;grid-column:4;z-index:2;pointer-events:none;background:${neutralFillStealthRestOnNeutralFillLayerRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;width:calc(${heightNumber} * 1px);height:calc(${heightNumber} * 1px);margin:calc(${designUnit} * 2 * 1px)}.heading:hover .icon{background:${neutralFillStealthHoverOnNeutralFillLayerRest}}.heading:active .icon{background:${neutralFillStealthActiveOnNeutralFillLayerRest}}slot[name='collapsed-icon']{display:flex}:host(.expanded) slot[name='collapsed-icon']{display:none}slot[name='expanded-icon']{display:none}:host(.expanded) slot[name='expanded-icon']{display:flex}.start{display:flex;align-items:center;padding-inline-start:calc(${designUnit} * 2 * 1px);justify-content:center;grid-column:1;z-index:2}.end{display:flex;align-items:center;justify-content:center;grid-column:3;z-index:2}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('flex')} :host{box-sizing:border-box;font-family:${bodyFont};flex-direction:column;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font-family:inherit}.button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.button:${focusVisible}::before{outline:none;border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(.expanded) .button:${focusVisible}::before{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.expanded) .region{display:block;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-bottom-left-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px);border-bottom-right-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px)}.icon{display:flex;align-items:center;justify-content:center;grid-column:4;pointer-events:none;background:${neutralFillStealthRestOnNeutralFillLayerRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;width:calc(${heightNumber} * 1px);height:calc(${heightNumber} * 1px);margin:calc(${designUnit} * 2 * 1px)}.heading:hover .icon{background:${neutralFillStealthHoverOnNeutralFillLayerRest}}.heading:active .icon{background:${neutralFillStealthActiveOnNeutralFillLayerRest}}slot[name='collapsed-icon']{display:flex}:host(.expanded) slot[name='collapsed-icon']{display:none}slot[name='expanded-icon']{display:none}:host(.expanded) slot[name='expanded-icon']{display:flex}.start{display:flex;align-items:center;padding-inline-start:calc(${designUnit} * 2 * 1px);justify-content:center;grid-column:1}.end{display:flex;align-items:center;justify-content:center;grid-column:3}.icon,.start,.end{position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .button:${focusVisible}::before{border-color:${SystemColors.Highlight};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight}}.icon{fill:${SystemColors.ButtonText}}`));
 
 /**
@@ -21596,6 +22220,61 @@ const fluentButton = Button.compose({
 
 const buttonStyles = buttonStyles$1;
 
+/**
+ * LTR styles for calendar
+ * @internal
+ */
+
+const ltrStyles = css`
+.day.disabled::before{transform:translate(-50%,0) rotate(45deg)}`;
+/**
+ * RTL styles for calendar
+ * @internal
+ */
+
+const rtlStyles = css`
+.day.disabled::before{transform:translate(50%,0) rotate(-45deg)}`;
+/**
+ * Styles for calendar
+ * @public
+ */
+
+const calendarStyles = (context, definition) => css`
+${display("inline-block")} :host{--calendar-cell-size:calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);--calendar-gap:2px;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest}}.title{padding:calc(${designUnit} * 2px);font-weight:600}.days{text-align:center}.week-days,.week{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:var(--calendar-gap);border:0;padding:0}.day,.week-day{border:0;width:var(--calendar-cell-size);height:var(--calendar-cell-size);line-height:var(--calendar-cell-size);padding:0;box-sizing:initial}.week-day{font-weight:600}.day{border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px)}.interact .day{cursor:pointer}.date{height:100%}.inactive .date,.inactive.disabled::before{color:${neutralForegroundHint}}.disabled::before{content:'';display:inline-block;width:calc(var(--calendar-cell-size) * .8);height:calc(${strokeWidth} * 1px);background:currentColor;position:absolute;margin-top:calc(var(--calendar-cell-size) / 2);transform-origin:center;z-index:1}.selected{color:${accentFillRest};border:1px solid ${accentFillRest};background:${fillColor}}.selected + .selected{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-width:0;padding-inline-start:calc(var(--calendar-gap) + (${strokeWidth} + ${controlCornerRadius}) * 1px);margin-inline-start:calc((${controlCornerRadius} * -1px) - var(--calendar-gap))}.today.disabled::before{color:${foregroundOnAccentRest}}.today .date{color:${foregroundOnAccentRest};background:${accentFillRest};border-radius:50%;position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+          .day.selected{color:${SystemColors.Highlight}}.today .date{background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}`), new DirectionalStyleSheetBehavior(ltrStyles, rtlStyles));
+
+/**
+ * Updated Calendar class that is readonly by default
+ */
+
+class Calendar extends Calendar$1 {
+  constructor() {
+    super(...arguments);
+    this.readonly = true;
+  }
+
+}
+
+__decorate([attr({
+  converter: booleanConverter
+})], Calendar.prototype, "readonly", void 0);
+/**
+ * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
+ * {@link @microsoft/fast-foundation#calendarTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element \<fluent-calendar\>
+ */
+
+
+const fluentCalendar = Calendar.compose({
+  baseName: 'calendar',
+  template: calendarTemplate,
+  styles: calendarStyles,
+  title: CalendarTitleTemplate
+});
+
 const cardStyles$1 = (context, definition) => css`
     ${display('block')} :host{display:block;contain:content;height:var(--card-height,100%);width:var(--card-width,100%);box-sizing:border-box;background:${fillColor};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:${elevationShadowCardRest}}:host{content-visibility:auto}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host{background:${SystemColors.Canvas};color:${SystemColors.CanvasText}}`));
@@ -21682,7 +22361,7 @@ const fluentCard = Card.compose({
 const cardStyles = cardStyles$1;
 
 const checkboxStyles$1 = (context, definition) => css`
-    ${display('inline-flex')} :host{align-items:center;outline:none;margin:calc(${designUnit} * 1px) 0;${
+    ${display('inline-flex')} :host{align-items:center;outline:none;${
 /*
  * Chromium likes to select label text or the default slot when
  * the checkbox is clicked. Maybe there is a better solution here?
@@ -22295,7 +22974,7 @@ const fluentDialog = Dialog.compose({
 const dialogStyles = dialogStyles$1;
 
 const dividerStyles$1 = (context, definition) => css`
-    ${display('block')} :host{box-sizing:content-box;height:0;margin:calc(${designUnit} * 1px) 0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
+    ${display('block')} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
 
 /**
  * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
@@ -22320,7 +22999,7 @@ const fluentDivider = Divider.compose({
 const dividerStyles = dividerStyles$1;
 
 const flipperStyles$1 = (context, definition) => css`
-    ${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;margin:0;fill:currentcolor;color:${neutralFillStrongRest};background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};box-sizing:border-box;border:calc(${focusStrokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);outline:none;padding:0}:host(.disabled){opacity:${disabledOpacity};cursor:${disabledCursor}}.next,.previous{display:flex}:host(:not(.disabled):hover){cursor:pointer}:host(:not(.disabled):hover){color:${neutralFillStrongHover}}:host(:not(.disabled):active){color:${neutralFillStrongActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter}}:host::-moz-focus-inner{border:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;fill:currentcolor;color:${neutralFillStrongRest};background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};box-sizing:border-box;border:calc(${focusStrokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);outline:none;padding:0}:host(.disabled){opacity:${disabledOpacity};cursor:${disabledCursor}}.next,.previous{display:flex}:host(:not(.disabled):hover){cursor:pointer}:host(:not(.disabled):hover){color:${neutralFillStrongHover}}:host(:not(.disabled):active){color:${neutralFillStrongActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter}}:host::-moz-focus-inner{border:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText}}:host .next,:host .previous{color:${SystemColors.ButtonText};fill:currentcolor}:host(:not(.disabled):hover){background:${SystemColors.Highlight}}:host(:not(.disabled):hover) .next,:host(:not(.disabled):hover) .previous{color:${SystemColors.HighlightText};fill:currentcolor}:host(.disabled){opacity:1}:host(.disabled),:host(.disabled) .next,:host(.disabled) .previous{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:currentcolor}:host(:${focusVisible}){forced-color-adjust:none;border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.ButtonFace},0 0 0 4px ${SystemColors.ButtonText}}`));
 
 /**
@@ -22417,7 +23096,7 @@ const fluentHorizontalScroll = HorizontalScroll.compose({
 const horizontalScrollStyles = horizontalScrollStyles$1;
 
 const listboxStyles$1 = (context, definition) => css`
-    ${display('inline-flex')} :host{border:calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${designUnit} * 1px) 0;outline:none}:host(:focus-within:not([disabled])){border-color:${focusStrokeOuter};box-shadow:0 0 0 1px ${focusStrokeOuter} inset}`;
+    ${display('inline-flex')} :host{border:calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${designUnit} * 1px) 0;outline:none}::slotted(${context.tagFor(ListboxOption)}){margin:0 calc(${designUnit} * 1px)}:host(:focus-within:not([disabled])){border-color:${focusStrokeOuter};box-shadow:0 0 0 1px ${focusStrokeOuter} inset}`;
 
 /**
  * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
@@ -22443,7 +23122,7 @@ const fluentListbox = Listbox.compose({
 const listboxStyles = listboxStyles$1;
 
 const optionStyles = (context, definition) => css`
-    ${display('inline-flex')} :host{position:relative;font-family:${bodyFont};background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${focusStrokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;font-size:${typeRampBaseFontSize};height:calc(${heightNumber} * 1px);line-height:${typeRampBaseLineHeight};margin:0 calc(${designUnit} * 1px);outline:none;overflow:hidden;align-items:center;padding:0 calc(${designUnit} * 2.25px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:0;top:calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);width:3px;height:calc((${heightNumber} / 2) * 1px);background:transparent;border-radius:calc(${controlCornerRadius} * 1px)}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active){background:${neutralFillStealthActive}}:host(:not([disabled]):active)::before{background:${accentFillRest};height:calc(((${heightNumber} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${accentFillRest}}:host(:${focusVisible}){border-color:${focusStrokeOuter};background:${neutralFillStealthFocus}}:host([aria-selected='true']){background:${neutralFillSecondaryRest}}:host(:not([disabled])[aria-selected='true']:hover){background:${neutralFillSecondaryHover}}:host(:not([disabled])[aria-selected='true']:active){background:${neutralFillSecondaryActive}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):not([aria-selected='true']):active){background:${neutralFillStealthActive}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('inline-flex')} :host{position:relative;font-family:${bodyFont};background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${focusStrokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;font-size:${typeRampBaseFontSize};height:calc(${heightNumber} * 1px);line-height:${typeRampBaseLineHeight};outline:none;overflow:hidden;align-items:center;padding:0 calc(${designUnit} * 2.25px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:0;top:calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);width:3px;height:calc((${heightNumber} / 2) * 1px);background:transparent;border-radius:calc(${controlCornerRadius} * 1px)}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active){background:${neutralFillStealthActive}}:host(:not([disabled]):active)::before{background:${accentFillRest};height:calc(((${heightNumber} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${accentFillRest}}:host(:${focusVisible}){border-color:${focusStrokeOuter};background:${neutralFillStealthFocus}}:host([aria-selected='true']){background:${neutralFillSecondaryRest}}:host(:not([disabled])[aria-selected='true']:hover){background:${neutralFillSecondaryHover}}:host(:not([disabled])[aria-selected='true']:active){background:${neutralFillSecondaryActive}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):not([aria-selected='true']):active){background:${neutralFillStealthActive}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([aria-selected="true"]):hover),:host(:not([disabled])[aria-selected="true"]:hover),:host([aria-selected="true"]){forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:not([disabled]):active)::before,:host([aria-selected='true'])::before{background:${SystemColors.HighlightText}}:host([disabled]),:host([disabled]:not([aria-selected='true']):hover){background:${SystemColors.Canvas};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}`));
 
 /**
@@ -22470,7 +23149,7 @@ const fluentOption = ListboxOption.compose({
 const OptionStyles = optionStyles;
 
 const menuStyles$1 = (context, definition) => css`
-    ${display('block')} :host{background:${neutralLayerFloating};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${layerCornerRadius} * 1px);box-shadow:${elevationShadowFlyout};margin:0;padding:calc(${designUnit} * 1px) 0;max-width:368px;min-width:64px}:host([slot='submenu']){width:max-content;margin:0 calc(${designUnit} * 2px)}::slotted(hr){box-sizing:content-box;height:0;margin:calc(${designUnit} * 1px) 0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('block')} :host{background:${neutralLayerFloating};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${layerCornerRadius} * 1px);box-shadow:${elevationShadowFlyout};padding:calc(${designUnit} * 1px) 0;max-width:368px;min-width:64px}:host([slot='submenu']){width:max-content;margin:0 calc(${designUnit} * 2px)}::slotted(${context.tagFor(MenuItem)}){margin:0 calc(${designUnit} * 1px)}::slotted(${context.tagFor(Divider)}){margin:calc(${designUnit} * 1px) 0}::slotted(hr){box-sizing:content-box;height:0;margin:calc(${designUnit} * 1px) 0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host([slot='submenu']){background:${SystemColors.Canvas};border-color:${SystemColors.CanvasText}}`));
 
 /**
@@ -22512,7 +23191,7 @@ const fluentMenu = Menu.compose({
 const menuStyles = menuStyles$1;
 
 const menuItemStyles$1 = (context, definition) => css`
-    ${display('grid')} :host{contain:layout;overflow:visible;font-family:${bodyFont};outline:none;box-sizing:border-box;height:calc(${heightNumber} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;margin:0 calc(${designUnit} * 1px);white-space:nowrap;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${focusVisible}){border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active),:host(.expanded){background:${neutralFillStealthActive};color:${neutralForegroundRest}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;outline:none}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${neutralForegroundHint}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('grid')} :host{contain:layout;overflow:visible;font-family:${bodyFont};outline:none;box-sizing:border-box;height:calc(${heightNumber} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${focusVisible}){border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active),:host(.expanded){background:${neutralFillStealthActive};color:${neutralForegroundRest}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;outline:none}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${neutralForegroundHint}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host,::slotted([slot='end']:not(svg)){forced-color-adjust:none;color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled]):hover){background:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host(:hover) .start,:host(:hover) .end,:host(:hover)::slotted(svg),:host(:active) .start,:host(:active) .end,:host(:active)::slotted(svg),:host(:hover) ::slotted([slot='end']:not(svg)),:host(:${focusVisible}) ::slotted([slot='end']:not(svg)){color:${SystemColors.HighlightText};fill:currentcolor}:host(.expanded){background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:${focusVisible}){background:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};box-shadow:0 0 0 calc(${strokeWidth} * 1px) inset ${SystemColors.HighlightText};color:${SystemColors.HighlightText};fill:currentcolor}:host([disabled]),:host([disabled]:hover),:host([disabled]:hover) .start,:host([disabled]:hover) .end,:host([disabled]:hover)::slotted(svg),:host([disabled]:${focusVisible}){background:${SystemColors.ButtonFace};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}:host([disabled]:${focusVisible}){border-color:${SystemColors.GrayText}}:host .expanded-toggle,:host .checkbox,:host .radio{border-color:${SystemColors.ButtonText};background:${SystemColors.HighlightText}}:host([checked]) .checkbox,:host([checked]) .radio{background:${SystemColors.HighlightText};border-color:${SystemColors.HighlightText}}:host(:hover) .expanded-toggle,:host(:hover) .checkbox,:host(:hover) .radio,:host(:${focusVisible}) .expanded-toggle,:host(:${focusVisible}) .checkbox,:host(:${focusVisible}) .radio,:host([checked]:hover) .checkbox,:host([checked]:hover) .radio,:host([checked]:${focusVisible}) .checkbox,:host([checked]:${focusVisible}) .radio{border-color:${SystemColors.HighlightText}}:host([aria-checked='true']){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),:host([aria-checked='true']) ::slotted([slot='radio-indicator']){fill:${SystemColors.Highlight}}:host([aria-checked='true']) .radio-indicator{background:${SystemColors.Highlight}}`), new DirectionalStyleSheetBehavior(css`
         .expand-collapse-glyph-container{transform:rotate(0deg)}`, css`
         .expand-collapse-glyph-container{transform:rotate(180deg)}`));
@@ -22630,7 +23309,7 @@ const fluentNumberField = NumberField.compose({
 });
 
 const progressStyles$1 = (context, definition) => css`
-    ${display('flex')} :host{align-items:center;outline:none;height:calc((${strokeWidth} * 3) * 1px);margin:calc(${designUnit} * 1px) 0}.progress{background-color:${neutralStrokeStrongRest};border-radius:calc(${designUnit} * 1px);width:100%;height:calc(${strokeWidth} * 1px);display:flex;align-items:center;position:relative}.determinate{background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);height:calc((${strokeWidth} * 3) * 1px);transition:all 0.2s ease-in-out;display:flex}.indeterminate{height:calc((${strokeWidth} * 3) * 1px);border-radius:calc(${designUnit} * 1px);display:flex;width:100%;position:relative;overflow:hidden}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 2s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 2s infinite}:host(.paused) .indeterminate-indicator-1,:host(.paused) .indeterminate-indicator-2{animation:none;background-color:${neutralForegroundHint};width:100%;opacity:1}:host(.paused) .determinate{background-color:${neutralForegroundHint}}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('flex')} :host{align-items:center;outline:none;height:calc((${strokeWidth} * 3) * 1px)}.progress{background-color:${neutralStrokeStrongRest};border-radius:calc(${designUnit} * 1px);width:100%;height:calc(${strokeWidth} * 1px);display:flex;align-items:center;position:relative}.determinate{background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);height:calc((${strokeWidth} * 3) * 1px);transition:all 0.2s ease-in-out;display:flex}.indeterminate{height:calc((${strokeWidth} * 3) * 1px);border-radius:calc(${designUnit} * 1px);display:flex;width:100%;position:relative;overflow:hidden}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 2s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 2s infinite}:host(.paused) .indeterminate-indicator-1,:host(.paused) .indeterminate-indicator-2{animation:none;background-color:${neutralForegroundHint};width:100%;opacity:1}:host(.paused) .determinate{background-color:${neutralForegroundHint}}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .indeterminate-indicator-1,.indeterminate-indicator-2,.determinate,.progress{background-color:${SystemColors.ButtonText}}:host(.paused) .indeterminate-indicator-1,:host(.paused) .indeterminate-indicator-2,:host(.paused) .determinate{background-color:${SystemColors.GrayText}}`));
 
 /**
@@ -22668,7 +23347,7 @@ const fluentProgress = Progress.compose({
 const progressStyles = progressStyles$1;
 
 const progressRingStyles$1 = (context, definition) => css`
-    ${display('flex')} :host{align-items:center;outline:none;height:calc(${heightNumber} * 1px);width:calc(${heightNumber} * 1px);margin:calc(${heightNumber} * 1px) 0}.progress{height:100%;width:100%}.background{fill:none;stroke-width:2px}.determinate{stroke:${accentFillRest};fill:none;stroke-width:2px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}.indeterminate-indicator-1{stroke:${accentFillRest};fill:none;stroke-width:2px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 2s linear infinite}:host(.paused) .indeterminate-indicator-1{animation:none;stroke:${neutralForegroundHint}}:host(.paused) .determinate{stroke:${neutralForegroundHint}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('flex')} :host{align-items:center;outline:none;height:calc(${heightNumber} * 1px);width:calc(${heightNumber} * 1px)}.progress{height:100%;width:100%}.background{fill:none;stroke-width:2px}.determinate{stroke:${accentFillRest};fill:none;stroke-width:2px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}.indeterminate-indicator-1{stroke:${accentFillRest};fill:none;stroke-width:2px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 2s linear infinite}:host(.paused) .indeterminate-indicator-1{animation:none;stroke:${neutralForegroundHint}}:host(.paused) .determinate{stroke:${neutralForegroundHint}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .background{stroke:${SystemColors.Field}}.determinate,.indeterminate-indicator-1{stroke:${SystemColors.ButtonText}}:host(.paused) .determinate,:host(.paused) .indeterminate-indicator-1{stroke:${SystemColors.GrayText}}`));
 
 /**
@@ -22718,7 +23397,7 @@ const fluentProgressRing = ProgressRing.compose({
 const progressRingStyles = progressRingStyles$1;
 
 const radioStyles = (context, definition) => css`
-    ${display('inline-flex')} :host{--input-size:calc((${heightNumber} / 2) + ${designUnit});align-items:center;outline:none;margin:calc(${designUnit} * 1px) 0;${
+    ${display('inline-flex')} :host{--input-size:calc((${heightNumber} / 2) + ${designUnit});align-items:center;outline:none;${
 /*
  * Chromium likes to select label text or the default slot when
  * the radio button is clicked. Maybe there is a better solution here?
@@ -22756,7 +23435,7 @@ const fluentRadio = Radio.compose({
 const RadioStyles = radioStyles;
 
 const radioGroupStyles$1 = (context, definition) => css`
-  ${display('flex')} :host{align-items:flex-start;margin:calc(${designUnit} * 1px) 0;flex-direction:column}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column}:host([orientation='horizontal']) .positioning-region{flex-direction:row}`;
+  ${display('flex')} :host{align-items:flex-start;flex-direction:column}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column}:host([orientation='horizontal']) .positioning-region{flex-direction:row}`;
 
 /**
  * The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
@@ -22876,7 +23555,7 @@ const fluentSkeleton = Skeleton.compose({
 const skeletonStyles = skeletonStyles$1;
 
 const sliderStyles$1 = (context, definition) => css`
-    ${display('inline-grid')} :host{--thumb-size:calc((${heightNumber} / 2) + ${designUnit} + (${strokeWidth} * 2));--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:calc((${designUnit} / 2) * -1);--track-width:${designUnit};align-items:center;width:100%;margin:calc(${designUnit} * 1px) 0;user-select:none;box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);outline:none;cursor:pointer}:host(.horizontal) .positioning-region{position:relative;margin:0 8px;display:grid;grid-template-rows:calc(var(--thumb-size) * 1px) 1fr}:host(.vertical) .positioning-region{position:relative;margin:0 8px;display:grid;height:100%;grid-template-columns:calc(var(--thumb-size) * 1px) 1fr}:host(:${focusVisible}) .thumb-cursor{box-shadow:0 0 0 2px ${fillColor},0 0 0 4px ${focusStrokeOuter}}.thumb-container{position:absolute;height:calc(var(--thumb-size) * 1px);width:calc(var(--thumb-size) * 1px);transition:all 0.2s ease}.thumb-cursor{display:flex;position:relative;border:none;width:calc(var(--thumb-size) * 1px);height:calc(var(--thumb-size) * 1px);background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:50%;box-sizing:border-box}.thumb-cursor::after{content:'';display:block;border-radius:50%;width:100%;margin:4px;background:${accentFillRest}}:host(:not(.disabled)) .thumb-cursor:hover::after{background:${accentFillHover};margin:3px}:host(:not(.disabled)) .thumb-cursor:active::after{background:${accentFillActive};margin:5px}:host(:not(.disabled)) .thumb-cursor:hover{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlHover}}:host(:not(.disabled)) .thumb-cursor:active{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlActive}}.track-start{background:${accentFillRest};position:absolute;height:100%;left:0;border-radius:calc(${controlCornerRadius} * 1px)}:host(.horizontal) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5px)) translateY(calc(var(--thumb-translate) * 1px))}:host(.vertical) .thumb-container{transform:translateX(calc(var(--thumb-translate) * 1px)) translateY(calc(var(--thumb-size) * 0.5px))}:host(.horizontal){min-width:calc(var(--thumb-size) * 1px)}:host(.horizontal) .track{right:calc(var(--track-overhang) * 1px);left:calc(var(--track-overhang) * 1px);align-self:start;height:calc(var(--track-width) * 1px)}:host(.vertical) .track{top:calc(var(--track-overhang) * 1px);bottom:calc(var(--track-overhang) * 1px);width:calc(var(--track-width) * 1px);height:100%}.track{background:${neutralFillStrongRest};border:1px solid ${neutralStrokeStrongRest};border-radius:2px;box-sizing:border-box;position:absolute}:host(.vertical){height:100%;min-height:calc(${designUnit} * 60px);min-width:calc(${designUnit} * 20px)}:host(.vertical) .track-start{height:auto;width:100%;top:0}:host(.disabled),:host(.readonly){cursor:${disabledCursor}}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('inline-grid')} :host{--thumb-size:calc((${heightNumber} / 2) + ${designUnit} + (${strokeWidth} * 2));--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:calc((${designUnit} / 2) * -1);--track-width:${designUnit};align-items:center;width:100%;user-select:none;box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);outline:none;cursor:pointer}:host(.horizontal) .positioning-region{position:relative;margin:0 8px;display:grid;grid-template-rows:calc(var(--thumb-size) * 1px) 1fr}:host(.vertical) .positioning-region{position:relative;margin:0 8px;display:grid;height:100%;grid-template-columns:calc(var(--thumb-size) * 1px) 1fr}:host(:${focusVisible}) .thumb-cursor{box-shadow:0 0 0 2px ${fillColor},0 0 0 4px ${focusStrokeOuter}}.thumb-container{position:absolute;height:calc(var(--thumb-size) * 1px);width:calc(var(--thumb-size) * 1px);transition:all 0.2s ease}.thumb-cursor{display:flex;position:relative;border:none;width:calc(var(--thumb-size) * 1px);height:calc(var(--thumb-size) * 1px);background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:50%;box-sizing:border-box}.thumb-cursor::after{content:'';display:block;border-radius:50%;width:100%;margin:4px;background:${accentFillRest}}:host(:not(.disabled)) .thumb-cursor:hover::after{background:${accentFillHover};margin:3px}:host(:not(.disabled)) .thumb-cursor:active::after{background:${accentFillActive};margin:5px}:host(:not(.disabled)) .thumb-cursor:hover{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlHover}}:host(:not(.disabled)) .thumb-cursor:active{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlActive}}.track-start{background:${accentFillRest};position:absolute;height:100%;left:0;border-radius:calc(${controlCornerRadius} * 1px)}:host(.horizontal) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5px)) translateY(calc(var(--thumb-translate) * 1px))}:host(.vertical) .thumb-container{transform:translateX(calc(var(--thumb-translate) * 1px)) translateY(calc(var(--thumb-size) * 0.5px))}:host(.horizontal){min-width:calc(var(--thumb-size) * 1px)}:host(.horizontal) .track{right:calc(var(--track-overhang) * 1px);left:calc(var(--track-overhang) * 1px);align-self:start;height:calc(var(--track-width) * 1px)}:host(.vertical) .track{top:calc(var(--track-overhang) * 1px);bottom:calc(var(--track-overhang) * 1px);width:calc(var(--track-width) * 1px);height:100%}.track{background:${neutralFillStrongRest};border:1px solid ${neutralStrokeStrongRest};border-radius:2px;box-sizing:border-box;position:absolute}:host(.vertical){height:100%;min-height:calc(${designUnit} * 60px);min-width:calc(${designUnit} * 20px)}:host(.vertical) .track-start{height:auto;width:100%;top:0}:host(.disabled),:host(.readonly){cursor:${disabledCursor}}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .thumb-cursor{forced-color-adjust:none;border-color:${SystemColors.FieldText};background:${SystemColors.FieldText}}:host(:not(.disabled)) .thumb-cursor:hover,:host(:not(.disabled)) .thumb-cursor:active{background:${SystemColors.Highlight}}.track{forced-color-adjust:none;background:${SystemColors.FieldText}}.thumb-cursor::after,:host(:not(.disabled)) .thumb-cursor:hover::after,:host(:not(.disabled)) .thumb-cursor:active::after{background:${SystemColors.Field}}:host(:${focusVisible}) .thumb-cursor{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText}}:host(.disabled){opacity:1}:host(.disabled) .track,:host(.disabled) .thumb-cursor{forced-color-adjust:none;background:${SystemColors.GrayText}}`));
 
 /**
@@ -22931,12 +23610,12 @@ const fluentSliderLabel = SliderLabel.compose({
 const sliderLabelStyles = sliderLabelStyles$1;
 
 const switchStyles$1 = (context, definition) => css`
-    :host([hidden]){display:none}${display('inline-flex')} :host{align-items:center;outline:none;font-family:${bodyFont};margin:calc(${designUnit} * 1px) 0;${
+    :host([hidden]){display:none}${display('inline-flex')} :host{align-items:center;outline:none;font-family:${bodyFont};${
 /*
  * Chromium likes to select label text or the default slot when
  * the checkbox is clicked. Maybe there is a better solution here?
  */
-''} user-select:none}:host(.disabled){opacity:${disabledOpacity}}:host(.disabled) .label,:host(.readonly) .label,:host(.disabled) .switch,:host(.readonly) .switch,:host(.disabled) .status-message,:host(.readonly) .status-message{cursor:${disabledCursor}}.switch{position:relative;outline:none;box-sizing:border-box;width:calc(((${heightNumber} / 2) + ${designUnit}) * 2px);height:calc(((${heightNumber} / 2) + ${designUnit}) * 1px);background:${neutralFillInputAltRest};border-radius:calc(${heightNumber} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};cursor:pointer}:host(:not(.disabled):hover) .switch{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .switch{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .switch{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .switch{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .switch{background:${accentFillActive};border-color:transparent}slot[name='switch']{position:absolute;display:flex;border:1px solid transparent;fill:${neutralForegroundRest};transition:all 0.2s ease-in-out}.status-message{color:${neutralForegroundRest};cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.label__hidden{display:none;visibility:hidden}.label{color:${neutralForegroundRest};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}.status-message{margin-inline-start:calc(${designUnit} * 2px + 2px)}:host(.checked) .switch{background:${accentFillRest}}:host(.checked) .switch slot[name='switch']{fill:${foregroundOnAccentRest};filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.15))}:host(.checked:not(.disabled)) .switch:hover{background:${accentFillHover}}:host(.checked:not(.disabled)) .switch:hover slot[name='switch']{fill:${foregroundOnAccentHover}}:host(.checked:not(.disabled)) .switch:active{background:${accentFillActive}}:host(.checked:not(.disabled)) .switch:active slot[name='switch']{fill:${foregroundOnAccentActive}}:host(.checked:${focusVisible}:not(.disabled)) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};border-color:transparent}.unchecked-message{display:block}.checked-message{display:none}:host(.checked) .unchecked-message{display:none}:host(.checked) .checked-message{display:block}`.withBehaviors(new DirectionalStyleSheetBehavior(css`
+''} user-select:none}:host(.disabled){opacity:${disabledOpacity}}:host(.disabled) .label,:host(.readonly) .label,:host(.disabled) .switch,:host(.readonly) .switch,:host(.disabled) .status-message,:host(.readonly) .status-message{cursor:${disabledCursor}}.switch{position:relative;outline:none;box-sizing:border-box;width:calc(((${heightNumber} / 2) + ${designUnit}) * 2px);height:calc(((${heightNumber} / 2) + ${designUnit}) * 1px);background:${neutralFillInputAltRest};border-radius:calc(${heightNumber} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};cursor:pointer}:host(:not(.disabled):hover) .switch{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .switch{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .switch{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .switch{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .switch{background:${accentFillActive};border-color:transparent}slot[name='switch']{position:absolute;display:flex;border:1px solid transparent;fill:${neutralForegroundRest};transition:all 0.2s ease-in-out}.status-message{color:${neutralForegroundRest};cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.label__hidden{display:none;visibility:hidden}.label{color:${neutralForegroundRest};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}::slotted([slot="checked-message"]),::slotted([slot="unchecked-message"]){margin-inline-start:calc(${designUnit} * 2px + 2px)}:host(.checked) .switch{background:${accentFillRest}}:host(.checked) .switch slot[name='switch']{fill:${foregroundOnAccentRest};filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.15))}:host(.checked:not(.disabled)) .switch:hover{background:${accentFillHover}}:host(.checked:not(.disabled)) .switch:hover slot[name='switch']{fill:${foregroundOnAccentHover}}:host(.checked:not(.disabled)) .switch:active{background:${accentFillActive}}:host(.checked:not(.disabled)) .switch:active slot[name='switch']{fill:${foregroundOnAccentActive}}:host(.checked:${focusVisible}:not(.disabled)) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};border-color:transparent}.unchecked-message{display:block}.checked-message{display:none}:host(.checked) .unchecked-message{display:none}:host(.checked) .checked-message{display:block}`.withBehaviors(new DirectionalStyleSheetBehavior(css`
         slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`, css`
         slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`), forcedColorsStylesheetBehavior(css`
         :host(:not(.disabled)) .switch slot[name='switch']{forced-color-adjust:none;fill:${SystemColors.FieldText}}.switch{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(.checked) .switch{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(:not(.disabled):hover) .switch,:host(:not(.disabled):active) .switch,:host(.checked:not(.disabled):hover) .switch{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled)) .switch slot[name="switch"]{fill:${SystemColors.HighlightText}}:host(.checked:not(.disabled):hover) .switch slot[name='switch']{fill:${SystemColors.Highlight}}:host(:${focusVisible}) .switch{forced-color-adjust:none;background:${SystemColors.Field};border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Highlight},0 0 0 3px ${SystemColors.FieldText}}:host(.checked:${focusVisible}:not(.disabled)) .switch{forced-color-adjust:none;background:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText};border-color:${SystemColors.Field}}:host(.disabled){opacity:1}:host(.disabled) slot[name='switch']{forced-color-adjust:none;fill:${SystemColors.GrayText}}:host(.disabled) .switch{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}.status-message,.label{color:${SystemColors.FieldText}}`));
@@ -22969,7 +23648,7 @@ const fluentSwitch = Switch.compose({
 const switchStyles = switchStyles$1;
 
 const tabsStyles$1 = (context, definition) => css`
-      ${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      ${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .activeIndicator,:host(.vertical) .activeIndicator{background:${SystemColors.Highlight}}`));
 
 const tabStyles$1 = (context, definition) => css`
@@ -23362,6 +24041,7 @@ const allComponents = {
   fluentBreadcrumb,
   fluentBreadcrumbItem,
   fluentButton,
+  fluentCalendar,
   fluentCard,
   fluentCheckbox,
   fluentCombobox,
@@ -23437,4 +24117,4 @@ function provideFluentDesignSystem(element) {
 
 const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);
 
-export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight };
+export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCalendar, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight };