@fluentui/web-components 2.0.0 → 2.1.1

package/dist/web-components.js

@@ -1166,7 +1166,6 @@ class HTMLBindingDirective extends TargetedHTMLDirective {
 
         if (this.cleanedTargetName === "innerHTML") {
           const binding = this.binding;
-          /* eslint-disable-next-line */
 
           this.binding = (s, c) => DOM.createHTML(binding(s, c));
         }
@@ -1683,6 +1682,8 @@ class HTMLView {
  * @public
  */
 
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+
 class ViewTemplate {
   /**
    * Creates an instance of ViewTemplate.
@@ -1790,7 +1791,8 @@ class ViewTemplate {
 
 } // Much thanks to LitHTML for working this out!
 
-const lastAttributeNameRegex = // eslint-disable-next-line no-control-regex
+const lastAttributeNameRegex =
+/* eslint-disable-next-line no-control-regex */
 /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
 /**
  * Transforms a template literal string into a renderable ViewTemplate.
@@ -3628,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
 });
 
@@ -3890,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.
@@ -4142,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}
@@ -4151,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.
@@ -4314,6 +4329,8 @@ class ResolverBuilder {
       container,
       key
     } = this;
+    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+
     this.container = this.key = void 0;
     return container.registerResolver(key, new ResolverImpl(key, strategy, state));
   }
@@ -5132,7 +5149,7 @@ class ContainerImpl {
     if (key.resolve !== void 0) {
       return key;
     }
-    /* eslint-disable-next-line */
+    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
 
 
     let current = this;
@@ -5166,7 +5183,7 @@ class ContainerImpl {
     if (key.$isResolver) {
       return key.resolve(this, this);
     }
-    /* eslint-disable-next-line */
+    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
 
 
     let current = this;
@@ -5193,7 +5210,7 @@ class ContainerImpl {
 
   getAll(key, searchAncestors = false) {
     validateKey(key);
-    /* eslint-disable-next-line */
+    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
 
     const requestor = this;
     let current = requestor;
@@ -5206,7 +5223,9 @@ class ContainerImpl {
         resolver = current.resolvers.get(key);
 
         if (resolver != null) {
-          resolutions = resolutions.concat(buildAllResponse(resolver, current, requestor));
+          resolutions = resolutions.concat(
+          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+          buildAllResponse(resolver, current, requestor));
         }
 
         current = current.parent;
@@ -5463,7 +5482,6 @@ function buildAllResponse(resolver, handler, requestor) {
 }
 
 const defaultFriendlyName = "(anonymous)";
-/* eslint-disable-next-line */
 
 function isObject(value) {
   return typeof value === "object" && value !== null || typeof value === "function";
@@ -5477,12 +5495,10 @@ function isObject(value) {
 
 
 const isNativeFunction = function () {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   const lookup = new WeakMap();
   let isNative = false;
   let sourceText = "";
-  let i = 0; // eslint-disable-next-line @typescript-eslint/ban-types
-
+  let i = 0;
   return function (fn) {
     isNative = lookup.get(fn);
 
@@ -5738,6 +5754,8 @@ function resolveOption(option, context, definition) {
  * @internal
  */
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 
 class FoundationElementRegistry {
   constructor(type, elementDefinition, overrideDefinition) {
@@ -5794,6 +5812,7 @@ class FoundationElementRegistry {
   }
 
 }
+/* eslint-enable @typescript-eslint/no-unused-vars */
 
 /**
  * Apply mixins to a constructor.
@@ -5804,7 +5823,9 @@ function applyMixins(derivedCtor, ...baseCtors) {
   baseCtors.forEach(baseCtor => {
     Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
       if (name !== "constructor") {
-        Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+        Object.defineProperty(derivedCtor.prototype, name,
+        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
       }
     });
 
@@ -5906,7 +5927,7 @@ function isHTMLElement(...args) {
  */
 
 function getDisplayedNodes(rootNode, selector) {
-  if (!isHTMLElement(rootNode)) {
+  if (!rootNode || !selector || !isHTMLElement(rootNode)) {
     return;
   }
 
@@ -6109,7 +6130,7 @@ function wrapInBounds(min, max, value) {
 }
 /**
  * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be retured.
+ * If value is greater than max, max will be returned.
  */
 
 function limit(min, max, value) {
@@ -7914,24 +7935,16 @@ function FormAssociated(BaseCtor) {
        */
 
       this.proxyEventsToBlock = ["change", "click"];
-      /**
-       * Invoked when a connected component's form or fieldset has its disabled
-       * state changed.
-       * @param disabled - the disabled value of the form / fieldset
-       */
-
-      this.formDisabledCallback = disabled => {
-        this.disabled = disabled;
-      };
-
-      this.formResetCallback = () => {
-        this.value = this.initialValue;
-        this.dirtyValue = false;
-      };
-
       this.proxyInitialized = false;
       this.required = false;
       this.initialValue = this.initialValue || "";
+
+      if (!this.elementInternals) {
+        // When elementInternals is not supported, formResetCallback is
+        // bound to an event listener, so ensure the handler's `this`
+        // context is correct.
+        this.formResetCallback = this.formResetCallback.bind(this);
+      }
     }
     /**
      * Must evaluate to true to enable elementInternals.
@@ -8147,10 +8160,10 @@ function FormAssociated(BaseCtor) {
 
       if (!this.elementInternals) {
         this.attachProxy();
-      }
 
-      if (this.form) {
-        this.form.addEventListener("reset", this.formResetCallback);
+        if (this.form) {
+          this.form.addEventListener("reset", this.formResetCallback);
+        }
       }
     }
     /**
@@ -8161,7 +8174,7 @@ function FormAssociated(BaseCtor) {
     disconnectedCallback() {
       this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
 
-      if (this.form) {
+      if (!this.elementInternals && this.form) {
         this.form.removeEventListener("reset", this.formResetCallback);
       }
     }
@@ -8200,6 +8213,21 @@ function FormAssociated(BaseCtor) {
         this.proxy.setCustomValidity(message);
       }
     }
+    /**
+     * Invoked when a connected component's form or fieldset has its disabled
+     * state changed.
+     * @param disabled - the disabled value of the form / fieldset
+     */
+
+
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+
+    formResetCallback() {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
     /**
      * Attach the proxy element to the DOM
      */
@@ -8310,6 +8338,116 @@ function FormAssociated(BaseCtor) {
   observable(C.prototype, "value");
   return C;
 }
+/**
+ * @alpha
+ */
+
+function CheckableFormAssociated(BaseCtor) {
+  class C extends FormAssociated(BaseCtor) {}
+
+  class D extends C {
+    constructor(...args) {
+      super(args);
+      /**
+       * Tracks whether the "checked" property has been changed.
+       * This is necessary to provide consistent behavior with
+       * normal input checkboxes
+       */
+
+      this.dirtyChecked = false;
+      /**
+       * Provides the default checkedness of the input element
+       * Passed down to proxy
+       *
+       * @public
+       * @remarks
+       * HTML Attribute: checked
+       */
+
+      this.checkedAttribute = false;
+      /**
+       * The checked state of the control.
+       *
+       * @public
+       */
+
+      this.checked = false; // Re-initialize dirtyChecked because initialization of other values
+      // causes it to become true
+
+      this.dirtyChecked = false;
+    }
+
+    checkedAttributeChanged() {
+      this.defaultChecked = this.checkedAttribute;
+    }
+    /**
+     * @internal
+     */
+
+
+    defaultCheckedChanged() {
+      if (!this.dirtyChecked) {
+        // Setting this.checked will cause us to enter a dirty state,
+        // but if we are clean when defaultChecked is changed, we want to stay
+        // in a clean state, so reset this.dirtyChecked
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
+      }
+    }
+
+    checkedChanged(prev, next) {
+      if (!this.dirtyChecked) {
+        this.dirtyChecked = true;
+      }
+
+      this.currentChecked = this.checked;
+      this.updateForm();
+
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.checked = this.checked;
+      }
+
+      if (prev !== undefined) {
+        this.$emit("change");
+      }
+
+      this.validate();
+    }
+
+    currentCheckedChanged(prev, next) {
+      this.checked = this.currentChecked;
+    }
+
+    updateForm() {
+      const value = this.checked ? this.value : null;
+      this.setFormValue(value, value);
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.updateForm();
+    }
+
+    formResetCallback() {
+      super.formResetCallback();
+      this.checked = !!this.checkedAttribute;
+      this.dirtyChecked = false;
+    }
+
+  }
+
+  attr({
+    attribute: "checked",
+    mode: "boolean"
+  })(D.prototype, "checkedAttribute");
+  attr({
+    attribute: "current-checked",
+    converter: booleanConverter
+  })(D.prototype, "currentChecked");
+  observable(D.prototype, "defaultChecked");
+  observable(D.prototype, "checked");
+  return D;
+}
 
 class _Button extends FoundationElement {}
 /**
@@ -8487,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
@@ -8624,6 +9277,8 @@ class DataGridRow extends FoundationElement {
       this.cellsRepeatBehavior = new RepeatDirective(x => x.columnDefinitions, x => x.activeCellItemTemplate, {
         positioning: true
       }).createBehavior(this.cellsPlaceholder);
+      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+
       this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
     }
 
@@ -8848,7 +9503,7 @@ class DataGrid extends FoundationElement {
     this.onChildListChange = (mutations,
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     observer) => {
-      if (mutations.length) {
+      if (mutations && mutations.length) {
         mutations.forEach(mutation => {
           mutation.addedNodes.forEach(newNode => {
             if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
@@ -8964,6 +9619,8 @@ class DataGrid extends FoundationElement {
     this.rowsRepeatBehavior = new RepeatDirective(x => x.rowsData, x => x.rowItemTemplate, {
       positioning: true
     }).createBehavior(this.rowsPlaceholder);
+    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+
     this.$fastController.addBehaviors([this.rowsRepeatBehavior]);
     this.addEventListener("row-focused", this.handleRowFocus);
     this.addEventListener(eventFocus, this.handleFocus);
@@ -9445,39 +10102,135 @@ function createCellItemTemplate(context) {
   return html`<${cellTag} cell-type="${x => x.isRowHeader ? "rowheader" : undefined}" grid-column="${(x, c) => c.index + 1}" :rowData="${(x, c) => c.parent.rowData}" :columnDefinition="${x => x}"></${cellTag}>`;
 }
 
-function createHeaderCellItemTemplate(context) {
+function createHeaderCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return html`<${cellTag} cell-type="columnheader" grid-column="${(x, c) => c.index + 1}" :columnDefinition="${x => x}"></${cellTag}>`;
+}
+/**
+ * Generates a template for the {@link @microsoft/fast-foundation#DataGridRow} component using
+ * the provided prefix.
+ *
+ * @public
+ */
+
+
+const dataGridRowTemplate = (context, definition) => {
+  const cellItemTemplate = createCellItemTemplate(context);
+  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+  return html`<template role="row" class="${x => x.rowType !== "default" ? x.rowType : ""}" :defaultCellItemTemplate="${cellItemTemplate}" :defaultHeaderCellItemTemplate="${headerCellItemTemplate}" ${children({
+    property: "cellElements",
+    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+  })}><slot ${slotted("slottedCellElements")}></slot></template>`;
+};
+
+/**
+ * Generates a template for the {@link @microsoft/fast-foundation#DataGridCell} component using
+ * the provided prefix.
+ * @public
+ */
+
+const dataGridCellTemplate = (context, definition) => {
+  return html`<template tabindex="-1" role="${x => {
+    var _a;
+
+    return (_a = x.cellType) !== null && _a !== void 0 ? _a : "gridcell";
+  }}" 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} cell-type="columnheader" grid-column="${(x, c) => c.index + 1}" :columnDefinition="${x => x}"></${cellTag}>`;
-}
+  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}>`;
+};
 /**
- * Generates a template for the {@link @microsoft/fast-foundation#DataGridRow} component using
- * the provided prefix.
  *
+ * @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 dataGridRowTemplate = (context, definition) => {
-  const cellItemTemplate = createCellItemTemplate(context);
-  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-  return html`<template role="row" class="${x => x.rowType !== "default" ? x.rowType : ""}" :defaultCellItemTemplate="${cellItemTemplate}" :defaultHeaderCellItemTemplate="${headerCellItemTemplate}" ${children({
-    property: "cellElements",
-    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
-  })}><slot ${slotted("slottedCellElements")}></slot></template>`;
+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>`;
+};
 /**
- * Generates a template for the {@link @microsoft/fast-foundation#DataGridCell} component using
- * the provided prefix.
+ * 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 dataGridCellTemplate = (context, definition) => {
-  return html`<template tabindex="-1" role="${x => {
-    var _a;
+const calendarTemplate = (context, definition) => {
+  var _a;
 
-    return (_a = x.cellType) !== null && _a !== void 0 ? _a : "gridcell";
-  }}" class=" ${x => x.cellType === "columnheader" ? "column-header" : x.cellType === "rowheader" ? "row-header" : ""} "><slot></slot></template>`;
+  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>`;
 };
 
 /**
@@ -9510,7 +10263,7 @@ class _Checkbox extends FoundationElement {}
  */
 
 
-class FormAssociatedCheckbox extends FormAssociated(_Checkbox) {
+class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
@@ -9541,31 +10294,10 @@ class Checkbox extends FormAssociatedCheckbox {
      */
 
     this.indeterminate = false;
-    /**
-     * Tracks whether the "checked" property has been changed.
-     * This is necessary to provide consistent behavior with
-     * normal input checkboxes
-     */
-
-    this.dirtyChecked = false;
-    /**
-     * Set to true when the component has constructed
-     */
-
-    this.constructed = false;
-    /**
-     * @internal
-     */
-
-    this.formResetCallback = () => {
-      this.checked = this.checkedAttribute;
-      this.dirtyChecked = false;
-    };
     /**
      * @internal
      */
 
-
     this.keypressHandler = e => {
       switch (e.key) {
         case keySpace:
@@ -9584,9 +10316,7 @@ class Checkbox extends FormAssociatedCheckbox {
       }
     };
 
-    this.defaultChecked = !!this.checkedAttribute;
-    this.checked = this.defaultChecked;
-    this.constructed = true;
+    this.proxy.setAttribute("type", "checkbox");
   }
 
   readOnlyChanged() {
@@ -9595,53 +10325,6 @@ class Checkbox extends FormAssociatedCheckbox {
     }
   }
 
-  checkedAttributeChanged() {
-    this.defaultChecked = this.checkedAttribute;
-  }
-
-  defaultCheckedChanged() {
-    if (!this.dirtyChecked) {
-      // Setting this.checked will cause us to enter a dirty state,
-      // but if we are clean when defaultChecked is changed, we want to stay
-      // in a clean state, so reset this.dirtyChecked
-      this.checked = this.defaultChecked;
-      this.dirtyChecked = false;
-    }
-  }
-
-  checkedChanged() {
-    if (!this.dirtyChecked) {
-      this.dirtyChecked = true;
-    }
-
-    this.updateForm();
-
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.checked = this.checked;
-    }
-
-    if (this.constructed) {
-      this.$emit("change");
-    }
-
-    this.validate();
-  }
-  /**
-   * @internal
-   */
-
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", "checkbox");
-    this.updateForm();
-  }
-
-  updateForm() {
-    const value = this.checked ? this.value : null;
-    this.setFormValue(value, value);
-  }
-
 }
 
 __decorate$1([attr({
@@ -9649,17 +10332,8 @@ __decorate$1([attr({
   mode: "boolean"
 })], Checkbox.prototype, "readOnly", void 0);
 
-__decorate$1([attr({
-  attribute: "checked",
-  mode: "boolean"
-})], Checkbox.prototype, "checkedAttribute", void 0);
-
 __decorate$1([observable], Checkbox.prototype, "defaultSlottedNodes", void 0);
 
-__decorate$1([observable], Checkbox.prototype, "defaultChecked", void 0);
-
-__decorate$1([observable], Checkbox.prototype, "checked", void 0);
-
 __decorate$1([observable], Checkbox.prototype, "indeterminate", void 0);
 
 /**
@@ -10372,25 +11046,12 @@ class Combobox$1 extends FormAssociatedCombobox {
      */
 
     this.forcedPosition = false;
-    /**
-     * Reset the element to its first selectable option when its parent form is reset.
-     *
-     * @internal
-     */
-
-    this.formResetCallback = () => {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-      this.setDefaultSelectedOption();
-      this.updateValue();
-    };
     /**
      * The unique id of the internal listbox.
      *
      * @internal
      */
 
-
     this.listboxId = uniqueId("listbox-");
     /**
      * The max height for the listbox when opened.
@@ -10425,6 +11086,18 @@ class Combobox$1 extends FormAssociatedCombobox {
 
     this.role = SelectRole.combobox;
   }
+  /**
+   * Reset the element to its first selectable option when its parent form is reset.
+   *
+   * @internal
+   */
+
+
+  formResetCallback() {
+    super.formResetCallback();
+    this.setDefaultSelectedOption();
+    this.updateValue();
+  }
 
   get isAutocompleteInline() {
     return this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth;
@@ -11382,7 +12055,7 @@ class StyleElementStyleSheetTarget {
       // to index the rule inline, so store as a const prior to indexing.
       // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
       // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
-      const index = sheet.insertRule(":root{}", sheet.cssRules.length);
+      const index = sheet.insertRule(":host{}", sheet.cssRules.length);
       this.target = sheet.cssRules[index].style;
     } else {
       this.target = null;
@@ -11494,6 +12167,7 @@ const propertyTargetCtor = DOM.supportsAdoptedStyleSheets ? ConstructableStyleSh
 const PropertyTargetManager = Object.freeze({
   getOrCreate(source) {
     if (propertyTargetCache.has(source)) {
+      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
       return propertyTargetCache.get(source);
     }
 
@@ -12209,6 +12883,8 @@ __decorate$1([observable], DesignTokenNode.prototype, "children", void 0);
 function create$2(nameOrConfig) {
   return DesignTokenImpl.from(nameOrConfig);
 }
+/* eslint-enable @typescript-eslint/no-unused-vars */
+
 /**
  * Factory object for creating {@link (DesignToken:interface)} instances.
  * @public
@@ -12283,6 +12959,9 @@ const DesignToken = Object.freeze({
   }
 
 });
+/* eslint-enable @typescript-eslint/no-non-null-assertion */
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 
 /**
  * Indicates what to do with an ambiguous (duplicate) element.
@@ -12534,6 +13213,7 @@ class ElementDefinitionEntry {
   }
 
 }
+/* eslint-enable @typescript-eslint/no-non-null-assertion */
 
 /**
  * The template for the {@link @microsoft/fast-foundation#Dialog} component.
@@ -14166,10 +14846,8 @@ class NumberField$1 extends FormAssociatedNumberField {
 
 
   stepUp() {
-    var _a;
-
     const value = parseFloat(this.value);
-    const stepUpValue = isNaN(value) ? (_a = this.min) !== null && _a !== void 0 ? _a : this.step : value + this.step;
+    const stepUpValue = !isNaN(value) ? value + this.step : this.min > 0 ? this.min : this.max < 0 ? this.max : !this.min ? this.step : 0;
     this.value = stepUpValue.toString();
     this.control.value = this.value;
   }
@@ -14181,10 +14859,8 @@ class NumberField$1 extends FormAssociatedNumberField {
 
 
   stepDown() {
-    var _a;
-
     const value = parseFloat(this.value);
-    const stepDownValue = isNaN(value) ? (_a = this.max) !== null && _a !== void 0 ? _a : 0 - this.step : value - this.step;
+    const stepDownValue = !isNaN(value) ? value - this.step : this.min > 0 ? this.min : this.max < 0 ? this.max : !this.min ? 0 - this.step : 0;
     this.value = stepDownValue.toString();
     this.control.value = this.value;
   }
@@ -14855,7 +15531,7 @@ class _Radio extends FoundationElement {}
  */
 
 
-class FormAssociatedRadio extends FormAssociated(_Radio) {
+class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
@@ -14872,8 +15548,6 @@ class FormAssociatedRadio extends FormAssociated(_Radio) {
 
 class Radio extends FormAssociatedRadio {
   constructor() {
-    var _a;
-
     super();
     /**
      * The element's value to be included in form submission when checked.
@@ -14883,36 +15557,10 @@ class Radio extends FormAssociatedRadio {
      */
 
     this.initialValue = "on";
-    /**
-     * Provides the default checkedness of the input element
-     * Passed down to proxy
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: checked
-     */
-
-    this.checkedAttribute = false;
-    /**
-     * Tracks whether the "checked" property has been changed.
-     * This is necessary to provide consistent behavior with
-     * normal input radios
-     */
-
-    this.dirtyChecked = false;
-    /**
-     * @internal
-     */
-
-    this.formResetCallback = () => {
-      this.checked = !!this.defaultChecked;
-      this.dirtyChecked = false;
-    };
     /**
      * @internal
      */
 
-
     this.keypressHandler = e => {
       switch (e.key) {
         case keySpace:
@@ -14926,7 +15574,7 @@ class Radio extends FormAssociatedRadio {
       return true;
     };
 
-    this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+    this.proxy.setAttribute("type", "radio");
   }
 
   readOnlyChanged() {
@@ -14934,10 +15582,10 @@ class Radio extends FormAssociatedRadio {
       this.proxy.readOnly = this.readOnly;
     }
   }
+  /**
+   * @internal
+   */
 
-  checkedAttributeChanged() {
-    this.defaultChecked = this.checkedAttribute;
-  }
 
   defaultCheckedChanged() {
     var _a;
@@ -14952,24 +15600,6 @@ class Radio extends FormAssociatedRadio {
       }
     }
   }
-
-  checkedChanged() {
-    if (this.$fastController.isConnected) {
-      // changing the value via code and from radio-group
-      if (!this.dirtyChecked) {
-        this.dirtyChecked = true;
-      }
-
-      this.updateForm();
-
-      if (this.proxy instanceof HTMLInputElement) {
-        this.proxy.checked = this.checked;
-      }
-
-      this.$emit("change");
-      this.validate();
-    }
-  }
   /**
    * @internal
    */
@@ -14979,7 +15609,6 @@ class Radio extends FormAssociatedRadio {
     var _a, _b;
 
     super.connectedCallback();
-    this.proxy.setAttribute("type", "radio");
     this.validate();
 
     if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" && this.getAttribute("tabindex") === null) {
@@ -14988,8 +15617,6 @@ class Radio extends FormAssociatedRadio {
       }
     }
 
-    this.updateForm();
-
     if (this.checkedAttribute) {
       if (!this.dirtyChecked) {
         // Setting this.checked will cause us to enter a dirty state,
@@ -15007,11 +15634,6 @@ class Radio extends FormAssociatedRadio {
     const parent = this.closest("[role=radiogroup]");
     return parent !== null;
   }
-
-  updateForm() {
-    const value = this.checked ? this.value : null;
-    this.setFormValue(value, value);
-  }
   /**
    * @internal
    */
@@ -15032,17 +15654,8 @@ __decorate$1([attr({
 
 __decorate$1([observable], Radio.prototype, "name", void 0);
 
-__decorate$1([attr({
-  attribute: "checked",
-  mode: "boolean"
-})], Radio.prototype, "checkedAttribute", void 0);
-
 __decorate$1([observable], Radio.prototype, "defaultSlottedNodes", void 0);
 
-__decorate$1([observable], Radio.prototype, "defaultChecked", void 0);
-
-__decorate$1([observable], Radio.prototype, "checked", void 0);
-
 /**
  * A HorizontalScroll Custom HTML Element
  * @public
@@ -15500,17 +16113,6 @@ class Select$1 extends FormAssociatedSelect {
      */
 
     this.displayValue = "";
-    /**
-     * Reset the element to its first selectable option when its parent form is reset.
-     *
-     * @internal
-     */
-
-    this.formResetCallback = () => {
-      this.setProxyOptions();
-      this.setDefaultSelectedOption();
-      this.value = this.firstSelectedOption.value;
-    };
   }
 
   openChanged() {
@@ -15628,6 +16230,18 @@ class Select$1 extends FormAssociatedSelect {
 
     this.ariaDisabled = this.disabled ? "true" : "false";
   }
+  /**
+   * Reset the element to its first selectable option when its parent form is reset.
+   *
+   * @internal
+   */
+
+
+  formResetCallback() {
+    this.setProxyOptions();
+    this.setDefaultSelectedOption();
+    this.value = this.firstSelectedOption.value;
+  }
   /**
    * Handle opening and closing the listbox when the select is clicked.
    *
@@ -16560,7 +17174,7 @@ class _Switch extends FoundationElement {}
  */
 
 
-class FormAssociatedSwitch extends FormAssociated(_Switch) {
+class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
@@ -16586,28 +17200,13 @@ class Switch extends FormAssociatedSwitch {
      */
 
     this.initialValue = "on";
-    /**
-     * Tracks whether the "checked" property has been changed.
-     * This is necessary to provide consistent behavior with
-     * normal input checkboxes
-     */
-
-    this.dirtyChecked = false;
-    /**
-     * @internal
-     */
-
-    this.formResetCallback = () => {
-      this.checked = this.checkedAttribute;
-      this.dirtyChecked = false;
-    };
     /**
      * @internal
      */
 
-
     this.keypressHandler = e => {
       switch (e.key) {
+        case keyEnter:
         case keySpace:
           this.checked = !this.checked;
           break;
@@ -16624,8 +17223,7 @@ class Switch extends FormAssociatedSwitch {
       }
     };
 
-    this.defaultChecked = !!this.checkedAttribute;
-    this.checked = this.defaultChecked;
+    this.proxy.setAttribute("type", "checkbox");
   }
 
   readOnlyChanged() {
@@ -16635,50 +17233,18 @@ class Switch extends FormAssociatedSwitch {
 
     this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
   }
-
-  checkedAttributeChanged() {
-    this.defaultChecked = this.checkedAttribute;
-  }
-
-  defaultCheckedChanged() {
-    if (!this.dirtyChecked) {
-      // Setting this.checked will cause us to enter a dirty state,
-      // but if we are clean when defaultChecked is changed, we want to stay
-      // in a clean state, so reset this.dirtyChecked
-      this.checked = this.defaultChecked;
-      this.dirtyChecked = false;
-    }
-  }
-
-  checkedChanged() {
-    if (!this.dirtyChecked) {
-      this.dirtyChecked = true;
-    }
-
-    this.updateForm();
-
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.checked = this.checked;
-    }
-
-    this.$emit("change");
-    this.checked ? this.classList.add("checked") : this.classList.remove("checked");
-    this.validate();
-  }
   /**
    * @internal
    */
 
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", "checkbox");
-    this.updateForm();
-  }
+  checkedChanged(prev, next) {
+    super.checkedChanged(prev, next);
+    /**
+     * @deprecated - this behavior already exists in the template and should not exist in the class.
+     */
 
-  updateForm() {
-    const value = this.checked ? this.value : null;
-    this.setFormValue(value, value);
+    this.checked ? this.classList.add("checked") : this.classList.remove("checked");
   }
 
 }
@@ -16688,17 +17254,8 @@ __decorate$1([attr({
   mode: "boolean"
 })], Switch.prototype, "readOnly", void 0);
 
-__decorate$1([attr({
-  attribute: "checked",
-  mode: "boolean"
-})], Switch.prototype, "checkedAttribute", void 0);
-
 __decorate$1([observable], Switch.prototype, "defaultSlottedNodes", void 0);
 
-__decorate$1([observable], Switch.prototype, "defaultChecked", void 0);
-
-__decorate$1([observable], Switch.prototype, "checked", void 0);
-
 /**
  * The template for the {@link @microsoft/fast-foundation#TabPanel} component.
  * @public
@@ -21256,42 +21813,42 @@ const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').with
 
 const baseButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
     ${display('inline-flex')} :host{position:relative;box-sizing:border-box;font-family:${bodyFont};outline:none;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};height:calc(${heightNumber} * 1px);min-width:calc(${heightNumber} * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;cursor:pointer}:host .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;flex-grow:1;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);white-space:nowrap;outline:none;text-decoration:none;color:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-family:inherit}.control,.end,.start{font:inherit}.control.icon-only{padding:0;line-height:0}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host .control:${focusVisible}{border-color:${focusStrokeOuter} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset !important}:host .control${nonInteractivitySelector}{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeRest}}.control::-moz-focus-inner{border:0}.content{pointer-events:none}.start,.end{display:flex;pointer-events:none}.start{margin-inline-end:11px}.end{margin-inline-start:11px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host,:host .control{background-color:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText};fill:currentcolor}:host .control${interactivitySelector}:hover{forced-color-adjust:none;background-color:${SystemColors.Highlight};color:${SystemColors.HighlightText}}.control:${focusVisible},:host .control:${focusVisible},:host(:${focusVisible}) .control{forced-color-adjust:none;background-color:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.ButtonText};color:${SystemColors.HighlightText}}.control${interactivitySelector}:hover,:host .control:hover{border-color:${SystemColors.ButtonText}}:host([href]) .control{border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}:host([href]) .control:hover,:host(.neutral[href]) .control:hover,:host(.outline[href]) .control:hover,:host([href]) .control:${focusVisible}{forced-color-adjust:none;background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};box-shadow:0 0 0 1px ${SystemColors.LinkText} inset;color:${SystemColors.LinkText};fill:currentcolor}`));
+        :host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled])) .control:hover,:host .control${interactivitySelector}:hover,.control${interactivitySelector}:hover{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}.control:${focusVisible},:host .control:${focusVisible},:host(:${focusVisible}) .control{forced-color-adjust:none;background:${SystemColors.ButtonFace};border-color:${SystemColors.Highlight} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} !important}:host([href]) .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};color:${SystemColors.LinkText};fill:currentcolor}:host([href]) .control:hover,:host(.neutral[href]) .control:hover{background:${SystemColors.LinkText};border-color:${SystemColors.LinkText} !important;color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control:${focusVisible}{forced-color-adjust:none;border-color:${SystemColors.LinkText} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} !important}`));
 /**
  * @internal
  */
 
 const AccentButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
     :host .control{background:padding-box linear-gradient(${accentFillRest},${accentFillRest}),border-box ${accentStrokeControlRest};color:${foregroundOnAccentRest}}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${accentFillHover},${accentFillHover}),border-box ${accentStrokeControlHover};color:${foregroundOnAccentHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${accentFillActive},${accentFillActive}),border-box ${accentStrokeControlActive};color:${foregroundOnAccentActive}}:host .control:${focusVisible}{box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset,0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important}:host .control${nonInteractivitySelector}{background:${accentFillRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host .control{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host .control:${focusVisible}{border-color:${SystemColors.ButtonText};box-shadow:0 0 0 2px ${SystemColors.HighlightText} inset}:host([href]) .control{background:${SystemColors.LinkText};color:${SystemColors.HighlightText}}:host([href]) .control:hover{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};box-shadow:none;color:${SystemColors.LinkText};fill:currentcolor}:host([href]) .control:${focusVisible}{border-color:${SystemColors.LinkText};box-shadow:0 0 0 2px ${SystemColors.HighlightText} inset}`));
+        :host .control{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host .control:${focusVisible}{background:${SystemColors.Highlight};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} inset,0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important}:host([href]) .control{background:${SystemColors.LinkText};color:${SystemColors.HighlightText}}:host([href]) .control:hover{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};box-shadow:none;color:${SystemColors.LinkText};fill:currentcolor}:host([href]) .control:${focusVisible}{background:${SystemColors.LinkText};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} inset,0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;color:${SystemColors.HighlightText};fill:currentcolor}`));
 /**
  * @internal
  */
 
 const HypertextStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    :host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}:host .control{display:inline;padding:0;background:transparent;border:none;box-shadow:none;line-height:1;text-decoration:underline 1px}:host .control:not([href]){background-color:transparent}:host .control${interactivitySelector}{background:transparent;color:${accentForegroundRest}}:host .control${interactivitySelector}:hover{background:transparent;color:${accentForegroundHover};text-decoration:none}:host .control${interactivitySelector}:active{background:transparent;color:${accentForegroundActive};text-decoration:none}:host .control:${focusVisible}{box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} !important}:host .control${nonInteractivitySelector}{background:transparent}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host .control:${focusVisible}{color:${SystemColors.LinkText}}`));
+    :host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}:host .control{display:inline;padding:0;background:transparent;border:none;box-shadow:none;line-height:1;text-decoration:underline 1px}:host .control:not([href]){background:transparent}:host .control${interactivitySelector}{background:transparent;color:${accentForegroundRest}}:host .control${interactivitySelector}:hover{background:transparent;color:${accentForegroundHover};text-decoration:none}:host .control${interactivitySelector}:active{background:transparent;color:${accentForegroundActive};text-decoration:none}:host .control:${focusVisible}{box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} !important}:host .control${nonInteractivitySelector}{background:transparent}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      :host .control${interactivitySelector}:hover{color:${SystemColors.Highlight};fill:currentcolor}:host .control:${focusVisible}{color:${SystemColors.LinkText}}`));
 /**
  * @internal
  */
 
 const LightweightButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
     :host{color:${accentForegroundRest}}:host .control{background:${neutralFillStealthRest}}:host .control${interactivitySelector}:hover{background:${neutralFillStealthHover};color:${accentForegroundHover}}:host .control${interactivitySelector}:active{background:${neutralFillStealthActive};color:${accentForegroundActive}}:host .control${nonInteractivitySelector}{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host{color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{forced-color-adjust:none;background:${SystemColors.ButtonFace};color:${SystemColors.Highlight}}:host([href]) .control:hover,:host([href]) .control:${focusVisible}{background:${SystemColors.ButtonFace};box-shadow:none;color:${SystemColors.LinkText}}`));
+        :host .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight};box-shadow:none;color:${SystemColors.HighlightText}}:host([href]) .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover,:host([href]) .control:${focusVisible}{background:${SystemColors.ButtonFace};box-shadow:none;color:${SystemColors.LinkText}}`));
 /**
  * @internal
  */
 
 const OutlineButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
     :host .control{background:transparent !important;border-color:${neutralStrokeRest}}:host .control${interactivitySelector}:hover{border-color:${neutralStrokeHover}}:host .control${interactivitySelector}:active{border-color:${neutralStrokeActive}}:host .control${nonInteractivitySelector}{background:transparent !important;border-color:${neutralStrokeRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host{border-color:${SystemColors.ButtonText}}:host([href]){border-color:${SystemColors.LinkText}}`));
+        :host .control${nonInteractivitySelector}{border-color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover{border-color:${SystemColors.Highlight};color:${SystemColors.ButtonText}}:host([href]){border-color:${SystemColors.LinkText}}:host([href]) .control:hover{box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
 /**
  * @internal
  */
 
 const StealthButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
     :host .control{background:${neutralFillStealthRest}}:host .control${interactivitySelector}:hover{background:${neutralFillStealthHover}}:host .control${interactivitySelector}:active{background:${neutralFillStealthActive}}:host .control${nonInteractivitySelector}{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host,:host .control{forced-color-adjust:none;background:${SystemColors.ButtonFace};border-color:transparent;color:${SystemColors.ButtonText};fill:currentcolor}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host .control:${focusVisible}{background:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control{color:${SystemColors.LinkText}}:host(:hover[href]) .control,:host(:${focusVisible}[href]) .control{background:${SystemColors.LinkText};border-color:${SystemColors.LinkText};color:${SystemColors.HighlightText};fill:currentcolor}:host(:${focusVisible}[href]) .control{box-shadow:0 0 0 1px ${SystemColors.LinkText}}`));
+        :host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};box-shadow:none !important;color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover,:host([href]) .control:${focusVisible}{background:${SystemColors.LinkText};border-color:${SystemColors.LinkText};box-shadow:none !important;color:${SystemColors.HighlightText};fill:currentcolor}`));
 
 const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault(target => {
   const baseRecipe = neutralFillInputRecipe.getValueFor(target);
@@ -21324,7 +21881,7 @@ const inputStyles = (context, definition, rootSelector) => css`
  */
 
 const inputStateStyles = (context, definition, rootSelector) => css`
-  :host(:not([disabled]):active)::after{left:50%;width:40%;transform:translateX(-50%);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([disabled]):focus-within)::after{left:0;width:100%;transform:none}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{content:'';position:absolute;height:100%;bottom:0;border-bottom:calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};border-bottom-left-radius:calc(${controlCornerRadius} * 1px);border-bottom-right-radius:calc(${controlCornerRadius} * 1px);z-index:2;transition:all 300ms cubic-bezier(0.1,0.9,0.2,1)}`;
+  :host(:not([disabled]):active)::after{left:50%;width:40%;transform:translateX(-50%);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([disabled]):focus-within)::after{left:0;width:100%;transform:none}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{content:'';position:absolute;height:calc(${focusStrokeWidth} * 1px);bottom:0;border-bottom:calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};border-bottom-left-radius:calc(${controlCornerRadius} * 1px);border-bottom-right-radius:calc(${controlCornerRadius} * 1px);z-index:2;transition:all 300ms cubic-bezier(0.1,0.9,0.2,1)}`;
 /**
  * @internal
  */
@@ -21336,17 +21893,13 @@ const inputFilledStyles = (context, definition, rootSelector) => css`
  */
 
 const inputForcedColorStyles = (context, definition, rootSelector) => css`
-  ${rootSelector}{forced-color-adjust:none;background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText}}:host(:hover:not([disabled])) ${rootSelector}{background:${SystemColors.ButtonFace};border-color:${SystemColors.Highlight}}:host(:focus-within:not([disabled])) ${rootSelector}{border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Highlight} inset}.control,::placeholder,::-webkit-input-placeholder{color:${SystemColors.FieldText}}:host([disabled]){opacity:1}:host([disabled]) ${rootSelector}{border-color:${SystemColors.GrayText};background:${SystemColors.Field}}:host([disabled]) ::placeholder,:host([disabled]) ::-webkit-input-placeholder,:host([disabled]) .label{color:${SystemColors.GrayText}}`;
+  :host ${rootSelector}{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{border-color:${SystemColors.Highlight}}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{border-bottom-color:${SystemColors.Highlight}}:host([disabled]){opacity:1}:host([disabled]) ${rootSelector}{border-color:${SystemColors.GrayText}}:host([disabled]) ::placeholder,:host([disabled]) ::-webkit-input-placeholder,:host([disabled]) .label{color:${SystemColors.GrayText};fill:currentcolor}`;
 /**
  * @internal
  */
 
 const inputFilledForcedColorStyles = (context, definition, rootSelector) => css`
-  :host
-    ${rootSelector},:host(:hover:not([disabled]))
-    ${rootSelector},:host(:active:not([disabled]))
-    ${rootSelector},:host(:focus-within:not([disabled]))
-    ${rootSelector}{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{border-bottom-color:${SystemColors.Highlight}}:host([disabled]) ${rootSelector}{border-color:${SystemColors.GrayText};background:${SystemColors.Field}}`;
+  :host ${rootSelector},:host(:hover:not([disabled])) ${rootSelector},:host(:active:not([disabled])) ${rootSelector},:host(:focus-within:not([disabled])) ${rootSelector}{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{border-bottom-color:${SystemColors.Highlight}}:host([disabled]) ${rootSelector}{border-color:${SystemColors.GrayText}}`;
 
 /**
  * Behavior that will conditionally apply a stylesheet based on the elements
@@ -21545,7 +22098,7 @@ const breadcrumbStyles = breadcrumbStyles$1;
 
 const breadcrumbItemStyles$1 = (context, definition) => css`
     ${display('inline-flex')} :host{background:transparent;color:${neutralForegroundRest};fill:currentcolor;box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};min-width:calc(${heightNumber} * 1px);border-radius:calc(${controlCornerRadius} * 1px);outline:none}.listitem{display:flex;align-items:center;border-radius:inherit}.control{position:relative;align-items:center;box-sizing:border-box;color:inherit;fill:inherit;cursor:pointer;display:flex;outline:none;text-decoration:none;white-space:nowrap;border-radius:inherit}.control:hover{color:${neutralForegroundHover}}.control:active{color:${neutralForegroundActive}}.control:${focusVisible}::after{content:'';position:absolute;inset:calc(${strokeWidth} * -1px);box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;border-radius:inherit}:host(:not([href])),:host([aria-current]) .control{color:${neutralForegroundRest};fill:currentcolor;cursor:default}.start{display:flex;margin-inline-end:6px}.end{display:flex;margin-inline-start:6px}.separator{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host(:not([href])),.start,.end,.separator{color:${SystemColors.ButtonText};fill:currentcolor}.separator{fill:${SystemColors.ButtonText}}`));
+        :host(:not([href])),.start,.end,.separator{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}.separator{fill:${SystemColors.ButtonText}}:host([href]){forced-color-adjust:none;background:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover{background:${SystemColors.LinkText};color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control:${focusVisible}::after{box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} inset}`));
 
 /**
  * The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem},
@@ -21582,7 +22135,17 @@ const nonInteractivitySelector = '[disabled]';
 const buttonStyles$1 = (context, definition) => css`
     :host([disabled]){opacity:${disabledOpacity};cursor:${disabledCursor}}${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
   `.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host([disabled]){opacity:1}`), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)));
+        :host([disabled]){opacity:1}:host([disabled]) .control{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:currentcolor}`), appearanceBehavior('accent', css`
+      ${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},`.withBehaviors(forcedColorsStylesheetBehavior(css`
+            :host([disabled]) .control{background:${SystemColors.ButtonFace}}`))), appearanceBehavior('lightweight', css`
+      ${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},`.withBehaviors(forcedColorsStylesheetBehavior(css`
+            :host([disabled]) .control{border-color:${SystemColors.ButtonFace}}`))), appearanceBehavior('outline', css`
+      ${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
+      `.withBehaviors(forcedColorsStylesheetBehavior(css`
+            :host([disabled]) .control{border-color:${SystemColors.GrayText}}`))), appearanceBehavior('stealth', css`
+      ${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
+      `.withBehaviors(forcedColorsStylesheetBehavior(css`
+            :host([disabled]) .control{border-color:${SystemColors.ButtonFace}}`))));
 
 /**
  * The Fluent button class
@@ -21657,9 +22220,64 @@ 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{forced-color-adjust:none;background:${SystemColors.Canvas};box-shadow:0 0 0 1px ${SystemColors.CanvasText}}`));
+        :host{background:${SystemColors.Canvas};color:${SystemColors.CanvasText}}`));
 
 /**
  * @public
@@ -21743,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?
@@ -21751,7 +22369,7 @@ const checkboxStyles$1 = (context, definition) => css`
 ''} user-select:none}.control{position:relative;width:calc((${heightNumber} / 2 + ${designUnit}) * 1px);height:calc((${heightNumber} / 2 + ${designUnit}) * 1px);box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{font-family:${bodyFont};color:${neutralForegroundRest};${
 /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
 ''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${neutralForegroundRest};opacity:0;pointer-events:none}slot[name='indeterminate-indicator']{position:absolute;top:0}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${foregroundOnAccentRest}}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .control{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked:not(.indeterminate)) slot[name='checked-indicator'],:host(.indeterminate) slot[name='indeterminate-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        .control{forced-color-adjust:none;border-color:${SystemColors.FieldText};background:${SystemColors.Field}}:host(:not(.disabled)) .control:hover,.control:active{border-color:${SystemColors.Highlight};background:${SystemColors.Field}}slot[name='checked-indicator']{fill:${SystemColors.FieldText}}slot[name='indeterminate-indicator']{fill:${SystemColors.FieldText}}:host(:${focusVisible}) .control{border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}:host(.checked:${focusVisible}:not(.disabled)) .control{box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}:host(.checked) .control{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(.checked) .control:hover,.control:active{background:${SystemColors.HighlightText}}:host(.checked) slot[name='checked-indicator']{fill:${SystemColors.HighlightText}}:host(.checked) .control:hover slot[name='checked-indicator']{fill:${SystemColors.Highlight}}:host(.checked) slot[name='indeterminate-indicator']{fill:${SystemColors.HighlightText}}:host(.checked) .control:hover slot[name='indeterminate-indicator']{fill:${SystemColors.Highlight}}:host(.disabled){opacity:1}:host(.disabled) .control{forced-color-adjust:none;border-color:${SystemColors.GrayText};background:${SystemColors.Field}}:host(.disabled) slot[name='indeterminate-indicator'],:host(.checked.disabled) .control:hover slot[name='indeterminate-indicator']{forced-color-adjust:none;fill:${SystemColors.GrayText}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled) .control:hover slot[name='checked-indicator']{forced-color-adjust:none;fill:${SystemColors.GrayText}}`));
+        .control{border-color:${SystemColors.FieldText};background:${SystemColors.Field}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${SystemColors.Highlight};background:${SystemColors.Field}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{fill:${SystemColors.FieldText}}:host(:${focusVisible}) .control{forced-color-adjust:none;box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText};background:${SystemColors.Field};border-color:${SystemColors.Highlight}}:host(.checked) .control{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked:${focusVisible}) .control{box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText}}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${SystemColors.HighlightText}}:host(.checked:hover ) .control slot[name='checked-indicator'],:host(.checked:hover ) .control slot[name='indeterminate-indicator']{fill:${SystemColors.Highlight}}:host(.disabled){opacity:1}:host(.disabled) .control{border-color:${SystemColors.GrayText};background:${SystemColors.Field}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled:hover) .control slot[name='checked-indicator'],:host(.disabled) slot[name='indeterminate-indicator'],:host(.checked.disabled:hover) .control slot[name='indeterminate-indicator']{fill:${SystemColors.GrayText}}`));
 
 /**
  * The Fluent Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox},
@@ -21786,12 +22404,13 @@ const fluentCheckbox = Checkbox.compose({
 const checkboxStyles = checkboxStyles$1;
 
 const selectFilledStyles = (context, definition) => css`
-  :host{background:${neutralFillSecondaryRest};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${neutralFillSecondaryHover};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${neutralFillSecondaryActive};border-color:transparent}`;
+  :host{background:${neutralFillSecondaryRest};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${neutralFillSecondaryHover};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${neutralFillSecondaryActive};border-color:transparent}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      :host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):not([open]):hover),:host(:not([disabled]):not([open]):active){border-color:${SystemColors.Highlight}}:host(:${focusVisible}){forced-color-adjust:none;background:transparent;border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px inset ${SystemColors.Highlight}}`));
 const selectStealthStyles = (context, definition) => css`
   :host{background:${neutralFillStealthRest};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${neutralFillStealthHover};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${neutralFillStealthActive};border-color:transparent}`;
 const selectStyles$1 = (context, definition) => css`
-    ${display('inline-flex')} :host{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;color:${neutralForegroundRest};fill:currentcolor;font-family:${bodyFont};height:calc(${heightNumber} * 1px);position:relative;user-select:none;min-width:250px;vertical-align:top}:host .listbox{box-shadow:${elevationShadowFlyout};background:${fillColor};border-radius:calc(${layerCornerRadius} * 1px);box-sizing:border-box;display:inline-flex;flex-direction:column;left:0;max-height:calc(var(--max-height) - (${heightNumber} * 1px));padding:calc(${designUnit} * 1px) 0;overflow-y:auto;position:absolute;width:100%;z-index:1;margin:1px 0}:host .listbox[hidden]{display:none}:host .control{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:${typeRampBaseFontSize};font-family:inherit;min-height:100%;line-height:${typeRampBaseLineHeight};padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter};outline:none;box-shadow:0 0 0 1px inset ${focusStrokeOuter}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}:host([disabled]) .control{cursor:${disabledCursor};user-select:none}:host([open][position='above']) .listbox{bottom:calc((${heightNumber} + ${designUnit} * 2) * 1px)}:host([open][position='below']) .listbox{top:calc((${heightNumber} + ${designUnit} * 2) * 1px)}.selected-value{font-family:inherit;flex:1 1 auto;text-align:start}.indicator{flex:0 0 auto;margin-inline-start:1em}slot[name='listbox']{display:none;width:100%}:host([open]) slot[name='listbox']{display:flex;position:absolute}.start{margin-inline-end:11px}.end{margin-inline-start:11px}.start,.end,.indicator,::slotted(svg){display:flex}::slotted([role='option']){flex:0 0 auto}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()), appearanceBehavior('stealth', selectStealthStyles()), forcedColorsStylesheetBehavior(css`
-        :host([disabled]){border-color:${SystemColors.GrayText};background-color:${SystemColors.ButtonFace};color:${SystemColors.GrayText};opacity:1;forced-color-adjust:none}:host([disabled]:hover){background:${SystemColors.ButtonFace}}:host([disabled]) .control{color:${SystemColors.GrayText};border-color:${SystemColors.GrayText}}:host(:not([disabled]):hover){background:${SystemColors.ButtonFace};border-color:${SystemColors.Highlight}}:host(:${focusVisible}){forced-color-adjust:none;background:${SystemColors.ButtonFace};border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px inset ${SystemColors.Highlight};color:${SystemColors.ButtonText};fill:currentcolor}:host([open]) .listbox{background:${SystemColors.ButtonFace};border:1px solid ${SystemColors.ButtonText}}:host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])){background:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};color:${SystemColors.HighlightText};fill:currentcolor}::slotted([role='option']:not([aria-selected='true']):not([disabled]):hover){forced-color-adjust:none;color:${SystemColors.ButtonText};background:${SystemColors.ButtonFace};border-color:${SystemColors.Highlight};box-shadow:none}`));
+    ${display('inline-flex')} :host{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;color:${neutralForegroundRest};fill:currentcolor;font-family:${bodyFont};height:calc(${heightNumber} * 1px);position:relative;user-select:none;min-width:250px;vertical-align:top}:host .listbox{box-shadow:${elevationShadowFlyout};background:${fillColor};border-radius:calc(${layerCornerRadius} * 1px);box-sizing:border-box;display:inline-flex;flex-direction:column;left:0;max-height:calc(var(--max-height) - (${heightNumber} * 1px));padding:calc((${designUnit} - ${strokeWidth} ) * 1px) 0;overflow-y:auto;position:absolute;width:100%;z-index:1;margin:1px 0;border:calc(${strokeWidth} * 1px) solid transparent}:host .listbox[hidden]{display:none}:host .control{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:${typeRampBaseFontSize};font-family:inherit;min-height:100%;line-height:${typeRampBaseLineHeight};padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter};outline:none;box-shadow:0 0 0 1px inset ${focusStrokeOuter}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}:host([disabled]) .control{cursor:${disabledCursor};user-select:none}:host([open][position='above']) .listbox{bottom:calc((${heightNumber} + ${designUnit} * 2) * 1px)}:host([open][position='below']) .listbox{top:calc((${heightNumber} + ${designUnit} * 2) * 1px)}.selected-value{font-family:inherit;flex:1 1 auto;text-align:start}.indicator{flex:0 0 auto;margin-inline-start:1em}slot[name='listbox']{display:none;width:100%}:host([open]) slot[name='listbox']{display:flex;position:absolute}.start{margin-inline-end:11px}.end{margin-inline-start:11px}.start,.end,.indicator,::slotted(svg){display:flex}::slotted([role='option']){flex:0 0 auto}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()), appearanceBehavior('stealth', selectStealthStyles()), forcedColorsStylesheetBehavior(css`
+      :host{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):hover){border-color:${SystemColors.Highlight}}:host(:${focusVisible}){forced-color-adjust:none;border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px inset ${SystemColors.Highlight}}:host([open]) .listbox{background:${SystemColors.ButtonFace};border-color:${SystemColors.CanvasText}}.start,.end,.indicator,::slotted(svg){fill:${SystemColors.FieldText}}:host([disabled]){border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};opacity:1}:host([disabled]) .start,:host([disabled]) .end,:host([disabled]) .indicator,:host([disabled]) ::slotted(svg){fill:${SystemColors.GrayText}}`));
 
 const comboboxStyles$1 = (context, definition) => css`
     ${selectStyles$1()}
@@ -22355,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},
@@ -22380,8 +22999,8 @@ 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`
-        :host{background:${SystemColors.Canvas}}:host .next,:host .previous{color:${SystemColors.ButtonText};fill:currentcolor}:host{background:${SystemColors.Canvas};border-color:${SystemColors.ButtonText}}:host(:not(.disabled):hover){forced-color-adjust:none;background:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};opacity:1}:host(:not(.disabled):hover) .next,:host(:not(.disabled):hover) .previous{forced-color-adjust:none;color:${SystemColors.HighlightText};fill:currentcolor}:host(.disabled){opacity:1}:host(.disabled),:host(.disabled:hover),:host(.disabled) .next,:host(.disabled) .previous,:host(.disabled:hover) .next,:host(.disabled:hover) .previous{forced-color-adjust:none;background:${SystemColors.Canvas};border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:${SystemColors.GrayText}}:host(:${focusVisible}){forced-color-adjust:none;border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}`));
+    ${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}}`));
 
 /**
  * The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
@@ -22477,8 +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}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]){background:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};color:${SystemColors.HighlightText};fill:currentcolor}:host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]){background:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};color:${SystemColors.HighlightText};fill:currentcolor}::slotted([role='option']:not([aria-selected='true']):not([disabled]):hover){forced-color-adjust:none;color:${SystemColors.ButtonText};background:${SystemColors.ButtonFace};border-color:${SystemColors.Highlight};box-shadow:none}`));
+    ${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}
@@ -22504,8 +23122,8 @@ 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`
-        :host{border-color:transparent;color:${SystemColors.ButtonText};forced-color-adjust:none}:host(:not([aria-selected='true']):hover),:host([aria-selected='true']){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host([disabled]),:host([disabled]:not([aria-selected='true']):hover){background:${SystemColors.Canvas};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}`));
+    ${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}`));
 
 /**
  * The Fluent option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption}
@@ -22531,7 +23149,8 @@ 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}}`;
+    ${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}}`));
 
 /**
  * The Fluent menu class
@@ -22572,8 +23191,8 @@ 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`
-        :host{forced-color-adjust:none;border-color:transparent;color:${SystemColors.ButtonText};fill:${SystemColors.ButtonText}}:host(:hover){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:hover) .start,:host(:hover) .end,:host(:hover)::slotted(svg),:host(:active) .start,:host(:active) .end,:host(:active)::slotted(svg){fill:${SystemColors.HighlightText}}: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){background:${SystemColors.Canvas};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}: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`
+    ${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)}`));
 
@@ -22628,7 +23247,7 @@ const numberFieldStyles$1 = (context, definition) => css`
 
     .root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.start,.end{margin:auto;fill:currentcolor}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}.controls{opacity:0;position:relative;top:-1px;z-index:3}:host(:hover:not([disabled])) .controls,:host(:focus-within:not([disabled])) .controls{opacity:1}.step-up,.step-down{display:flex;padding:0 8px;cursor:pointer}.step-up{padding-top:3px}`.withBehaviors(appearanceBehavior('filled', numberFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css`
         ${inputForcedColorStyles(context, definition, '.root')}
-      `));
+        .step-up,.step-down{fill:${SystemColors.FieldText}}`));
 
 /**
  * The Fluent number field class
@@ -22690,8 +23309,8 @@ 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`
-        .indeterminate-indicator-1,.indeterminate-indicator-2,.determinate{forced-color-adjust:none;background-color:${SystemColors.FieldText}}.progress{background-color:${SystemColors.Field};border:calc(${strokeWidth} * 1px) solid ${SystemColors.FieldText}}:host(.paused) .indeterminate-indicator-1,.indeterminate-indicator-2{background-color:${SystemColors.Field}}:host(.paused) .determinate{background-color:${SystemColors.GrayText}}`));
+    ${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}}`));
 
 /**
  * Progress base class
@@ -22728,8 +23347,8 @@ 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`
-        .indeterminate-indicator-1,.determinate{stroke:${SystemColors.FieldText}}.background{stroke:${SystemColors.Field}}:host(.paused) .indeterminate-indicator-1{stroke:${SystemColors.Field}}:host(.paused) .determinate{stroke:${SystemColors.GrayText}}`));
+    ${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}}`));
 
 /**
  * Progress Ring base class
@@ -22778,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?
@@ -22786,7 +23405,7 @@ const radioStyles = (context, definition) => css`
 ''} user-select:none;position:relative;flex-direction:row;transition:all 0.2s ease-in-out}.control{position:relative;width:calc(var(--input-size) * 1px);height:calc(var(--input-size) * 1px);box-sizing:border-box;border-radius:50%;border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{font-family:${bodyFont};color:${neutralForegroundRest};${
 /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
 ''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.control,slot[name='checked-indicator']{flex-shrink:0}slot[name='checked-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${foregroundOnAccentRest};opacity:0;pointer-events:none}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:not(.disabled):active) slot[name='checked-indicator']{opacity:1}:host(:${focusVisible}) .control{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked) slot[name='checked-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        .control{forced-color-adjust:none;border-color:${SystemColors.FieldText};background:${SystemColors.Field}}:host(:not(.disabled)) .control:hover,.control:active{border-color:${SystemColors.Highlight};background:${SystemColors.Field}}:host(:${focusVisible}) .control{border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}:host(.checked:${focusVisible}:not(.disabled)) .control{border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}:host(.checked:not(.disabled)) .control:hover,.control:active{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight}}:host(.checked) slot[name='checked-indicator']{fill:${SystemColors.Highlight}}:host(.checked) .control:hover slot[name='checked-indicator']{fill:${SystemColors.HighlightText}}:host(.disabled){forced-color-adjust:none;opacity:1}:host(.disabled) .label{color:${SystemColors.GrayText}}:host(.disabled) .control,:host(.checked.disabled) .control:hover,.control:active{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled) .control:hover slot[name='checked-indicator']{fill:${SystemColors.GrayText}}`));
+        .control{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${SystemColors.Highlight}}:host(:${focusVisible}) .control{forced-color-adjust:none;box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText};background:${SystemColors.Field};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight}}:host(.checked:${focusVisible}) .control{box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText}}:host(.checked) slot[name='checked-indicator']{fill:${SystemColors.Highlight}}:host(.checked:hover) .control slot[name='checked-indicator']{fill:${SystemColors.HighlightText}}:host(.disabled){opacity:1}:host(.disabled) .label{color:${SystemColors.GrayText}}:host(.disabled) .control,:host(.checked.disabled) .control{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled) slot[name='checked-indicator']{fill:${SystemColors.GrayText}}`));
 
 /**
  * The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
@@ -22816,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},
@@ -22910,7 +23529,8 @@ const selectStyles = selectStyles$1;
 const skeletonStyles$1 = (context, definition) => css`
     ${display('block')} :host{--skeleton-fill-default:${neutralFillSecondaryRest};overflow:hidden;width:100%;position:relative;background-color:var(--skeleton-fill,var(--skeleton-fill-default));--skeleton-animation-gradient-default:linear-gradient(
         270deg,var(--skeleton-fill,var(--skeleton-fill-default)) 0%,${neutralFillSecondaryHover} 51%,var(--skeleton-fill,var(--skeleton-fill-default)) 100%
-      );--skeleton-animation-timing-default:ease-in-out}:host(.rect){border-radius:calc(${controlCornerRadius} * 1px)}:host(.circle){border-radius:100%;overflow:hidden}object{position:absolute;width:100%;height:auto;z-index:2}object img{width:100%;height:auto}${display('block')} span.shimmer{position:absolute;width:100%;height:100%;background-image:var(--skeleton-animation-gradient,var(--skeleton-animation-gradient-default));background-size:0px 0px / 90% 100%;background-repeat:no-repeat;background-color:var(--skeleton-animation-fill,${neutralFillSecondaryRest});animation:shimmer 2s infinite;animation-timing-function:var(--skeleton-animation-timing,var(--skeleton-timing-default));animation-direction:normal;z-index:1}::slotted(svg){z-index:2}::slotted(.pattern){width:100%;height:100%}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`;
+      );--skeleton-animation-timing-default:ease-in-out}:host(.rect){border-radius:calc(${controlCornerRadius} * 1px)}:host(.circle){border-radius:100%;overflow:hidden}object{position:absolute;width:100%;height:auto;z-index:2}object img{width:100%;height:auto}${display('block')} span.shimmer{position:absolute;width:100%;height:100%;background-image:var(--skeleton-animation-gradient,var(--skeleton-animation-gradient-default));background-size:0px 0px / 90% 100%;background-repeat:no-repeat;background-color:var(--skeleton-animation-fill,${neutralFillSecondaryRest});animation:shimmer 2s infinite;animation-timing-function:var(--skeleton-animation-timing,var(--skeleton-timing-default));animation-direction:normal;z-index:1}::slotted(svg){z-index:2}::slotted(.pattern){width:100%;height:100%}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+        :host{background-color:${SystemColors.CanvasText}}`));
 
 /**
  * The Fluent Skeleton Element. Implements {@link @microsoft/fast-foundation#Skeleton},
@@ -22935,8 +23555,8 @@ 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`
-        .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}}:host(:${focusVisible}) .thumb-cursor{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}:host(.disabled){opacity:1}:host(.disabled) .track,:host(.disabled) .thumb-cursor{forced-color-adjust:none;background:${SystemColors.GrayText}}`));
+    ${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}}`));
 
 /**
  * The Fluent Slider Custom Element. Implements {@link @microsoft/fast-foundation#(Slider:class)},
@@ -22990,15 +23610,15 @@ 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`
-        slot[name='switch'],:host(:not(.disabled)) .switch:active slot[name='switch']{forced-color-adjust:none;background:${SystemColors.FieldText}}.switch{forced-color-adjust:none;background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:not(.disabled)) .switch:hover{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked) .switch{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled)) .switch:hover,:host(:not(.disabled)) .switch:active{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked) slot[name='switch']{background:${SystemColors.HighlightText}}:host(.checked:not(.disabled)) .switch:hover slot[name='switch']{background:${SystemColors.Highlight}}:host(:${focusVisible}) .switch{border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}:host(.checked:${focusVisible}:not(.disabled)) .switch{box-shadow:0 0 0 2px ${SystemColors.Field},0 0 0 4px ${SystemColors.FieldText}}:host(.disabled){opacity:1}:host(.disabled) slot[name='switch']{background:${SystemColors.GrayText}}:host(.disabled) .switch{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}.status-message,.label{color:${SystemColors.FieldText}}`));
+        :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}}`));
 
 /**
  * The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
@@ -23028,12 +23648,12 @@ 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`
-        .activeIndicator,:host(.vertical) .activeIndicator{forced-color-adjust:none;background:${SystemColors.Highlight}}`));
+      ${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`
       ${display('inline-flex')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};font-weight:400;line-height:${typeRampBaseLineHeight};height:calc((${heightNumber} + (${designUnit} * 2)) * 1px);padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;align-items:center;justify-content:center;grid-row:1 / 3;cursor:pointer;outline:none}:host([aria-selected='true']){z-index:2}:host(:hover),:host(:active){color:${neutralForegroundRest}}:host(:${focusVisible}){border-color:${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset}:host(.vertical){justify-content:start;grid-column:1 / 3}:host(.vertical[aria-selected='true']){z-index:2}:host(.vertical:hover),:host(.vertical:active){color:${neutralForegroundRest}}:host(.vertical:hover[aria-selected='true']){}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-          :host{forced-color-adjust:none;border-color:transparent;color:${SystemColors.ButtonText};fill:currentcolor}:host(:hover),:host(.vertical:hover),:host([aria-selected='true']:hover){background:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host([aria-selected='true']){background:${SystemColors.HighlightText};color:${SystemColors.Highlight};fill:currentcolor}:host(:${focusVisible}){border-color:${SystemColors.ButtonText};box-shadow:none}`));
+          :host{forced-color-adjust:none;border-color:transparent;color:${SystemColors.ButtonText};fill:currentcolor}:host(:hover),:host(.vertical:hover),:host([aria-selected='true']:hover){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host([aria-selected='true']){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host(:${focusVisible}){background:transparent;border-color:${SystemColors.ButtonText};box-shadow:none}`));
 
 /**
  * The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
@@ -23377,7 +23997,7 @@ const treeItemStyles$1 = (context, definition) => css`
 /* The french fry background needs to be calculated based on the selected background state for this control.
     We currently have no way of changing that, so setting to accent-foreground-rest for the time being */
 ''} background:${accentFillRest};border-radius:calc(${controlCornerRadius} * 1px)}::slotted(fluent-tree-item){--tree-item-nested-width:1em;--expand-collapse-button-nested-width:calc(${heightNumber} * -1px)}`.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css`
-        :host{forced-color-adjust:none;border-color:transparent;background:${SystemColors.Field};color:${SystemColors.FieldText}}:host(:not([disabled])) .positioning-region:hover,:host([selected]) .positioning-region{background:${SystemColors.Highlight}}:host .positioning-region:hover .content-region,:host([selected]) .positioning-region .content-region{color:${SystemColors.HighlightText}}:host([selected])::after{background:${SystemColors.Field}}:host(:${focusVisible}) .positioning-region{border-color:${SystemColors.FieldText};box-shadow:0 0 0 2px inset ${SystemColors.Field}}:host([disabled]) .content-region,:host([disabled]) .positioning-region:hover .content-region{opacity:1;color:${SystemColors.GrayText}}:host(.nested) .expand-collapse-button:hover{background:${SystemColors.Field};fill:${SystemColors.FieldText}}`));
+        :host{color:${SystemColors.ButtonText}}.positioning-region{border-color:${SystemColors.ButtonFace};background:${SystemColors.ButtonFace}}:host(:not([disabled])) .positioning-region:hover,:host(:not([disabled])) .positioning-region:active,:host(:not([disabled])[selected]) .positioning-region{background:${SystemColors.Highlight}}:host .positioning-region:hover .content-region,:host([selected]) .positioning-region .content-region{forced-color-adjust:none;color:${SystemColors.HighlightText}}:host([disabled][selected]) .positioning-region .content-region{color:${SystemColors.GrayText}}:host([selected])::after{background:${SystemColors.HighlightText}}:host(:${focusVisible}) .positioning-region{forced-color-adjust:none;border-color:${SystemColors.ButtonText};box-shadow:0 0 0 2px inset ${SystemColors.ButtonFace}}:host([disabled]),:host([disabled]) .content-region,:host([disabled]) .positioning-region:hover .content-region{opacity:1;color:${SystemColors.GrayText}}:host(.nested) .expand-collapse-button:hover,:host(:not([disabled])[selected]) .expand-collapse-button:hover{background:${SystemColors.ButtonFace};fill:${SystemColors.ButtonText}}`));
 
 /**
  * The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem}
@@ -23421,6 +24041,7 @@ const allComponents = {
   fluentBreadcrumb,
   fluentBreadcrumbItem,
   fluentButton,
+  fluentCalendar,
   fluentCard,
   fluentCheckbox,
   fluentCombobox,
@@ -23496,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 };