@fluentui/web-components 3.0.0-beta.15 → 3.0.0-beta.17

package/dist/web-components.js

@@ -256,7 +256,6 @@ const DOM = Object.freeze({
     if (defaultPolicy !== fastPolicy) {
       throw FAST.error(1201 /* Message.onlySetDOMPolicyOnce */);
     }
-
     defaultPolicy = value;
   },
   /**
@@ -530,7 +529,6 @@ const Observable = FAST.getById(KernelServiceId.observable, () => {
   let createArrayObserver = array => {
     throw FAST.error(1101 /* Message.needsArrayObservation */);
   };
-
   function getNotifier(source) {
     var _a;
     let found = (_a = source.$fastController) !== null && _a !== void 0 ? _a : notifierLookup.get(source);
@@ -1454,7 +1452,6 @@ class HTMLBindingDirective {
       if (!sink) {
         throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
       }
-
       this.data = `${this.id}-d`;
       this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
     }
@@ -1830,7 +1827,6 @@ class CompilationContext {
     for (const id of this.nodeIds) {
       targets[id]; // trigger locator
     }
-
     return new HTMLView(fragment, this.factories, targets);
   }
 }
@@ -2116,11 +2112,9 @@ class ViewTemplate {
     if (this.result) {
       throw FAST.error(1208 /* Message.cannotSetTemplatePolicyAfterCompilation */);
     }
-
     if (this.policy) {
       throw FAST.error(1207 /* Message.onlySetTemplatePolicyOnce */);
     }
-
     this.policy = policy;
     return this;
   }
@@ -2193,7 +2187,6 @@ const html = (strings, ...values) => {
   }
   throw FAST.error(1206 /* Message.directCallToHTMLTagNotAllowed */);
 };
-
 html.partial = html => {
   return new InlineTemplateDirective(html);
 };
@@ -3052,7 +3045,6 @@ class ElementController extends PropertyChangeNotifier {
     if (definition === void 0) {
       throw FAST.error(1401 /* Message.missingElementDefinition */);
     }
-
     return element.$fastController = new elementControllerStrategy(element, definition);
   }
   /**
@@ -3388,8 +3380,7 @@ __decorateClass$r([attr({
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
 const getDirection = rootNode => {
-  var _a;
-  return ((_a = rootNode.closest("[dir]")) == null ? void 0 : _a.dir) === "rtl" ? Direction.rtl : Direction.ltr;
+  return rootNode.closest("[dir]")?.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
 
 function staticallyCompose(item) {
@@ -3405,10 +3396,7 @@ function staticallyCompose(item) {
   return item;
 }
 
-const whitespaceFilter = value => {
-  var _a;
-  return value.nodeType !== Node.TEXT_NODE || !!((_a = value.nodeValue) == null ? void 0 : _a.trim().length);
-};
+const whitespaceFilter = value => value.nodeType !== Node.TEXT_NODE || !!value.nodeValue?.trim().length;
 
 const hidden = `:host([hidden]){display:none}`;
 function display(displayValue) {
@@ -3416,10 +3404,23 @@ function display(displayValue) {
 }
 
 class MatchMediaBehavior {
+  /**
+   *
+   * @param query - The media query to operate from.
+   */
   constructor(query) {
+    /**
+     * The behavior needs to operate on element instances but elements might share a behavior instance.
+     * To ensure proper attachment / detachment per instance, we construct a listener for
+     * each bind invocation and cache the listeners by element reference.
+     */
     this.listenerCache = /* @__PURE__ */new WeakMap();
     this.query = query;
   }
+  /**
+   * Binds the behavior to the element.
+   * @param controller - The host controller orchestrating this behavior.
+   */
   connectedCallback(controller) {
     const {
       query
@@ -3432,6 +3433,10 @@ class MatchMediaBehavior {
     listener.bind(query)();
     query.addEventListener("change", listener);
   }
+  /**
+   * Unbinds the behavior from the element.
+   * @param controller - The host controller orchestrating this behavior.
+   */
   disconnectedCallback(controller) {
     const listener = this.listenerCache.get(controller);
     if (listener) {
@@ -3440,15 +3445,54 @@ class MatchMediaBehavior {
   }
 }
 class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+  /**
+   * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+   * @param query - The media query to operate from.
+   * @param styles - The styles to coordinate with the query.
+   */
   constructor(query, styles) {
     super(query);
     this.styles = styles;
   }
+  /**
+   * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+   * a provided query.
+   * @param query - The media query to operate from.
+   *
+   * @public
+   * @example
+   *
+   * ```ts
+   * import { css } from "@microsoft/fast-element";
+   * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
+   *
+   * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+   *   window.matchMedia("(orientation: landscape)")
+   * );
+   *
+   * const styles = css`
+   *   :host {
+   *     width: 200px;
+   *     height: 400px;
+   *   }
+   * `
+   * .withBehaviors(landscapeBehavior(css`
+   *   :host {
+   *     width: 400px;
+   *     height: 200px;
+   *   }
+   * `))
+   * ```
+   */
   static with(query) {
     return styles => {
       return new MatchMediaStyleSheetBehavior(query, styles);
     };
   }
+  /**
+   * Constructs a match-media listener for a provided element.
+   * @param source - the element for which to attach or detach styles.
+   */
   constructListener(controller) {
     let attached = false;
     const styles = this.styles;
@@ -3465,6 +3509,11 @@ class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
       }
     };
   }
+  /**
+   * Unbinds the behavior from the element.
+   * @param controller - The host controller orchestrating this behavior.
+   * @internal
+   */
   removedCallback(controller) {
     controller.removeStyles(this.styles);
   }
@@ -3486,7 +3535,8 @@ 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));
       }
     });
     const baseAttributes = AttributeConfiguration.locate(baseCtor);
@@ -3510,6 +3560,9 @@ class AccordionItem extends FASTElement {
     this.disabled = false;
     this.id = uniqueId("accordion-");
     this.block = false;
+    /**
+     * @internal
+     */
     this.clickHandler = e => {
       if (this.disabled) {
         return;
@@ -3657,16 +3710,22 @@ class Accordion extends FASTElement {
       return;
     }
     if (next !== AccordionExpandMode.single) {
-      expandedItem == null ? void 0 : expandedItem.expandbutton.removeAttribute("aria-disabled");
+      expandedItem?.expandbutton.removeAttribute("aria-disabled");
     } else {
       this.setSingleExpandMode(expandedItem);
     }
   }
+  /**
+   * @internal
+   */
   slottedAccordionItemsChanged(oldValue, newValue) {
     if (this.$fastController.isConnected) {
       this.setItems();
     }
   }
+  /**
+   * @internal
+   */
   handleChange(source, propertyName) {
     if (propertyName === "disabled") {
       this.setItems();
@@ -3677,11 +3736,10 @@ class Accordion extends FASTElement {
     }
   }
   findExpandedItem() {
-    var _a;
     if (this.accordionItems.length === 0) {
       return null;
     }
-    return (_a = this.accordionItems.find(item => item instanceof AccordionItem && item.expanded)) != null ? _a : this.accordionItems[0];
+    return this.accordionItems.find(item => item instanceof AccordionItem && item.expanded) ?? this.accordionItems[0];
   }
   setSingleExpandMode(expandedItem) {
     if (this.accordionItems.length === 0) {
@@ -3808,6 +3866,8 @@ const colorNeutralForegroundInvertedLinkSelected = "var(--colorNeutralForeground
 const colorNeutralForegroundInvertedDisabled = "var(--colorNeutralForegroundInvertedDisabled)";
 const colorBrandForeground1 = "var(--colorBrandForeground1)";
 const colorBrandForeground2 = "var(--colorBrandForeground2)";
+const colorBrandForeground2Hover = "var(--colorBrandForeground2Hover)";
+const colorBrandForeground2Pressed = "var(--colorBrandForeground2Pressed)";
 const colorNeutralForeground1Static = "var(--colorNeutralForeground1Static)";
 const colorBrandForegroundInverted = "var(--colorBrandForegroundInverted)";
 const colorBrandForegroundInvertedHover = "var(--colorBrandForegroundInvertedHover)";
@@ -3837,8 +3897,10 @@ const colorNeutralBackground5Hover = "var(--colorNeutralBackground5Hover)";
 const colorNeutralBackground5Pressed = "var(--colorNeutralBackground5Pressed)";
 const colorNeutralBackground5Selected = "var(--colorNeutralBackground5Selected)";
 const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
-const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
 const colorNeutralBackgroundInverted = "var(--colorNeutralBackgroundInverted)";
+const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
+const colorNeutralBackgroundAlpha = "var(--colorNeutralBackgroundAlpha)";
+const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroundAlpha2)";
 const colorSubtleBackground = "var(--colorSubtleBackground)";
 const colorSubtleBackgroundHover = "var(--colorSubtleBackgroundHover)";
 const colorSubtleBackgroundPressed = "var(--colorSubtleBackgroundPressed)";
@@ -3871,10 +3933,19 @@ const colorCompoundBrandBackgroundHover = "var(--colorCompoundBrandBackgroundHov
 const colorCompoundBrandBackgroundPressed = "var(--colorCompoundBrandBackgroundPressed)";
 const colorBrandBackgroundStatic = "var(--colorBrandBackgroundStatic)";
 const colorBrandBackground2 = "var(--colorBrandBackground2)";
+const colorBrandBackground2Hover = "var(--colorBrandBackground2Hover)";
+const colorBrandBackground2Pressed = "var(--colorBrandBackground2Pressed)";
+const colorBrandBackground3Static = "var(--colorBrandBackground3Static)";
+const colorBrandBackground4Static = "var(--colorBrandBackground4Static)";
 const colorBrandBackgroundInverted = "var(--colorBrandBackgroundInverted)";
 const colorBrandBackgroundInvertedHover = "var(--colorBrandBackgroundInvertedHover)";
 const colorBrandBackgroundInvertedPressed = "var(--colorBrandBackgroundInvertedPressed)";
 const colorBrandBackgroundInvertedSelected = "var(--colorBrandBackgroundInvertedSelected)";
+const colorNeutralCardBackground = "var(--colorNeutralCardBackground)";
+const colorNeutralCardBackgroundHover = "var(--colorNeutralCardBackgroundHover)";
+const colorNeutralCardBackgroundPressed = "var(--colorNeutralCardBackgroundPressed)";
+const colorNeutralCardBackgroundSelected = "var(--colorNeutralCardBackgroundSelected)";
+const colorNeutralCardBackgroundDisabled = "var(--colorNeutralCardBackgroundDisabled)";
 const colorNeutralStrokeAccessible = "var(--colorNeutralStrokeAccessible)";
 const colorNeutralStrokeAccessibleHover = "var(--colorNeutralStrokeAccessibleHover)";
 const colorNeutralStrokeAccessiblePressed = "var(--colorNeutralStrokeAccessiblePressed)";
@@ -3885,6 +3956,7 @@ const colorNeutralStroke1Pressed = "var(--colorNeutralStroke1Pressed)";
 const colorNeutralStroke1Selected = "var(--colorNeutralStroke1Selected)";
 const colorNeutralStroke2 = "var(--colorNeutralStroke2)";
 const colorNeutralStroke3 = "var(--colorNeutralStroke3)";
+const colorNeutralStrokeSubtle = "var(--colorNeutralStrokeSubtle)";
 const colorNeutralStrokeOnBrand = "var(--colorNeutralStrokeOnBrand)";
 const colorNeutralStrokeOnBrand2 = "var(--colorNeutralStrokeOnBrand2)";
 const colorNeutralStrokeOnBrand2Hover = "var(--colorNeutralStrokeOnBrand2Hover)";
@@ -3892,6 +3964,9 @@ const colorNeutralStrokeOnBrand2Pressed = "var(--colorNeutralStrokeOnBrand2Press
 const colorNeutralStrokeOnBrand2Selected = "var(--colorNeutralStrokeOnBrand2Selected)";
 const colorBrandStroke1 = "var(--colorBrandStroke1)";
 const colorBrandStroke2 = "var(--colorBrandStroke2)";
+const colorBrandStroke2Hover = "var(--colorBrandStroke2Hover)";
+const colorBrandStroke2Pressed = "var(--colorBrandStroke2Pressed)";
+const colorBrandStroke2Contrast = "var(--colorBrandStroke2Contrast)";
 const colorCompoundBrandStroke = "var(--colorCompoundBrandStroke)";
 const colorCompoundBrandStrokeHover = "var(--colorCompoundBrandStrokeHover)";
 const colorCompoundBrandStrokePressed = "var(--colorCompoundBrandStrokePressed)";
@@ -3900,6 +3975,8 @@ const colorNeutralStrokeInvertedDisabled = "var(--colorNeutralStrokeInvertedDisa
 const colorTransparentStroke = "var(--colorTransparentStroke)";
 const colorTransparentStrokeInteractive = "var(--colorTransparentStrokeInteractive)";
 const colorTransparentStrokeDisabled = "var(--colorTransparentStrokeDisabled)";
+const colorNeutralStrokeAlpha = "var(--colorNeutralStrokeAlpha)";
+const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)";
 const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
 const colorStrokeFocus2 = "var(--colorStrokeFocus2)";
 const colorNeutralShadowAmbient = "var(--colorNeutralShadowAmbient)";
@@ -4060,6 +4137,38 @@ const colorPaletteSteelForeground2 = "var(--colorPaletteSteelForeground2)";
 const colorPaletteTealBackground2 = "var(--colorPaletteTealBackground2)";
 const colorPaletteTealBorderActive = "var(--colorPaletteTealBorderActive)";
 const colorPaletteTealForeground2 = "var(--colorPaletteTealForeground2)";
+const colorStatusSuccessBackground1 = "var(--colorStatusSuccessBackground1)";
+const colorStatusSuccessBackground2 = "var(--colorStatusSuccessBackground2)";
+const colorStatusSuccessBackground3 = "var(--colorStatusSuccessBackground3)";
+const colorStatusSuccessForeground1 = "var(--colorStatusSuccessForeground1)";
+const colorStatusSuccessForeground2 = "var(--colorStatusSuccessForeground2)";
+const colorStatusSuccessForeground3 = "var(--colorStatusSuccessForeground3)";
+const colorStatusSuccessForegroundInverted = "var(--colorStatusSuccessForegroundInverted)";
+const colorStatusSuccessBorderActive = "var(--colorStatusSuccessBorderActive)";
+const colorStatusSuccessBorder1 = "var(--colorStatusSuccessBorder1)";
+const colorStatusSuccessBorder2 = "var(--colorStatusSuccessBorder2)";
+const colorStatusWarningBackground1 = "var(--colorStatusWarningBackground1)";
+const colorStatusWarningBackground2 = "var(--colorStatusWarningBackground2)";
+const colorStatusWarningBackground3 = "var(--colorStatusWarningBackground3)";
+const colorStatusWarningForeground1 = "var(--colorStatusWarningForeground1)";
+const colorStatusWarningForeground2 = "var(--colorStatusWarningForeground2)";
+const colorStatusWarningForeground3 = "var(--colorStatusWarningForeground3)";
+const colorStatusWarningForegroundInverted = "var(--colorStatusWarningForegroundInverted)";
+const colorStatusWarningBorderActive = "var(--colorStatusWarningBorderActive)";
+const colorStatusWarningBorder1 = "var(--colorStatusWarningBorder1)";
+const colorStatusWarningBorder2 = "var(--colorStatusWarningBorder2)";
+const colorStatusDangerBackground1 = "var(--colorStatusDangerBackground1)";
+const colorStatusDangerBackground2 = "var(--colorStatusDangerBackground2)";
+const colorStatusDangerBackground3 = "var(--colorStatusDangerBackground3)";
+const colorStatusDangerBackground3Hover = "var(--colorStatusDangerBackground3Hover)";
+const colorStatusDangerBackground3Pressed = "var(--colorStatusDangerBackground3Pressed)";
+const colorStatusDangerForeground1 = "var(--colorStatusDangerForeground1)";
+const colorStatusDangerForeground2 = "var(--colorStatusDangerForeground2)";
+const colorStatusDangerForeground3 = "var(--colorStatusDangerForeground3)";
+const colorStatusDangerForegroundInverted = "var(--colorStatusDangerForegroundInverted)";
+const colorStatusDangerBorderActive = "var(--colorStatusDangerBorderActive)";
+const colorStatusDangerBorder1 = "var(--colorStatusDangerBorder1)";
+const colorStatusDangerBorder2 = "var(--colorStatusDangerBorder2)";
 const borderRadiusNone = "var(--borderRadiusNone)";
 const borderRadiusSmall = "var(--borderRadiusSmall)";
 const borderRadiusMedium = "var(--borderRadiusMedium)";
@@ -4135,6 +4244,7 @@ const durationUltraFast = "var(--durationUltraFast)";
 const durationFaster = "var(--durationFaster)";
 const durationFast = "var(--durationFast)";
 const durationNormal = "var(--durationNormal)";
+const durationGentle = "var(--durationGentle)";
 const durationSlow = "var(--durationSlow)";
 const durationSlower = "var(--durationSlower)";
 const durationUltraSlow = "var(--durationUltraSlow)";
@@ -4195,6 +4305,8 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorNeutralForegroundInvertedDisabled: colorNeutralForegroundInvertedDisabled,
     colorBrandForeground1: colorBrandForeground1,
     colorBrandForeground2: colorBrandForeground2,
+    colorBrandForeground2Hover: colorBrandForeground2Hover,
+    colorBrandForeground2Pressed: colorBrandForeground2Pressed,
     colorNeutralForeground1Static: colorNeutralForeground1Static,
     colorBrandForegroundInverted: colorBrandForegroundInverted,
     colorBrandForegroundInvertedHover: colorBrandForegroundInvertedHover,
@@ -4224,8 +4336,10 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorNeutralBackground5Pressed: colorNeutralBackground5Pressed,
     colorNeutralBackground5Selected: colorNeutralBackground5Selected,
     colorNeutralBackground6: colorNeutralBackground6,
-    colorNeutralBackgroundStatic: colorNeutralBackgroundStatic,
     colorNeutralBackgroundInverted: colorNeutralBackgroundInverted,
+    colorNeutralBackgroundStatic: colorNeutralBackgroundStatic,
+    colorNeutralBackgroundAlpha: colorNeutralBackgroundAlpha,
+    colorNeutralBackgroundAlpha2: colorNeutralBackgroundAlpha2,
     colorSubtleBackground: colorSubtleBackground,
     colorSubtleBackgroundHover: colorSubtleBackgroundHover,
     colorSubtleBackgroundPressed: colorSubtleBackgroundPressed,
@@ -4258,10 +4372,19 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorCompoundBrandBackgroundPressed: colorCompoundBrandBackgroundPressed,
     colorBrandBackgroundStatic: colorBrandBackgroundStatic,
     colorBrandBackground2: colorBrandBackground2,
+    colorBrandBackground2Hover: colorBrandBackground2Hover,
+    colorBrandBackground2Pressed: colorBrandBackground2Pressed,
+    colorBrandBackground3Static: colorBrandBackground3Static,
+    colorBrandBackground4Static: colorBrandBackground4Static,
     colorBrandBackgroundInverted: colorBrandBackgroundInverted,
     colorBrandBackgroundInvertedHover: colorBrandBackgroundInvertedHover,
     colorBrandBackgroundInvertedPressed: colorBrandBackgroundInvertedPressed,
     colorBrandBackgroundInvertedSelected: colorBrandBackgroundInvertedSelected,
+    colorNeutralCardBackground: colorNeutralCardBackground,
+    colorNeutralCardBackgroundHover: colorNeutralCardBackgroundHover,
+    colorNeutralCardBackgroundPressed: colorNeutralCardBackgroundPressed,
+    colorNeutralCardBackgroundSelected: colorNeutralCardBackgroundSelected,
+    colorNeutralCardBackgroundDisabled: colorNeutralCardBackgroundDisabled,
     colorNeutralStrokeAccessible: colorNeutralStrokeAccessible,
     colorNeutralStrokeAccessibleHover: colorNeutralStrokeAccessibleHover,
     colorNeutralStrokeAccessiblePressed: colorNeutralStrokeAccessiblePressed,
@@ -4272,6 +4395,7 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorNeutralStroke1Selected: colorNeutralStroke1Selected,
     colorNeutralStroke2: colorNeutralStroke2,
     colorNeutralStroke3: colorNeutralStroke3,
+    colorNeutralStrokeSubtle: colorNeutralStrokeSubtle,
     colorNeutralStrokeOnBrand: colorNeutralStrokeOnBrand,
     colorNeutralStrokeOnBrand2: colorNeutralStrokeOnBrand2,
     colorNeutralStrokeOnBrand2Hover: colorNeutralStrokeOnBrand2Hover,
@@ -4279,6 +4403,9 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorNeutralStrokeOnBrand2Selected: colorNeutralStrokeOnBrand2Selected,
     colorBrandStroke1: colorBrandStroke1,
     colorBrandStroke2: colorBrandStroke2,
+    colorBrandStroke2Hover: colorBrandStroke2Hover,
+    colorBrandStroke2Pressed: colorBrandStroke2Pressed,
+    colorBrandStroke2Contrast: colorBrandStroke2Contrast,
     colorCompoundBrandStroke: colorCompoundBrandStroke,
     colorCompoundBrandStrokeHover: colorCompoundBrandStrokeHover,
     colorCompoundBrandStrokePressed: colorCompoundBrandStrokePressed,
@@ -4287,6 +4414,8 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorTransparentStroke: colorTransparentStroke,
     colorTransparentStrokeInteractive: colorTransparentStrokeInteractive,
     colorTransparentStrokeDisabled: colorTransparentStrokeDisabled,
+    colorNeutralStrokeAlpha: colorNeutralStrokeAlpha,
+    colorNeutralStrokeAlpha2: colorNeutralStrokeAlpha2,
     colorStrokeFocus1: colorStrokeFocus1,
     colorStrokeFocus2: colorStrokeFocus2,
     colorNeutralShadowAmbient: colorNeutralShadowAmbient,
@@ -4447,6 +4576,38 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorPaletteTealBackground2: colorPaletteTealBackground2,
     colorPaletteTealBorderActive: colorPaletteTealBorderActive,
     colorPaletteTealForeground2: colorPaletteTealForeground2,
+    colorStatusSuccessBackground1: colorStatusSuccessBackground1,
+    colorStatusSuccessBackground2: colorStatusSuccessBackground2,
+    colorStatusSuccessBackground3: colorStatusSuccessBackground3,
+    colorStatusSuccessForeground1: colorStatusSuccessForeground1,
+    colorStatusSuccessForeground2: colorStatusSuccessForeground2,
+    colorStatusSuccessForeground3: colorStatusSuccessForeground3,
+    colorStatusSuccessForegroundInverted: colorStatusSuccessForegroundInverted,
+    colorStatusSuccessBorderActive: colorStatusSuccessBorderActive,
+    colorStatusSuccessBorder1: colorStatusSuccessBorder1,
+    colorStatusSuccessBorder2: colorStatusSuccessBorder2,
+    colorStatusWarningBackground1: colorStatusWarningBackground1,
+    colorStatusWarningBackground2: colorStatusWarningBackground2,
+    colorStatusWarningBackground3: colorStatusWarningBackground3,
+    colorStatusWarningForeground1: colorStatusWarningForeground1,
+    colorStatusWarningForeground2: colorStatusWarningForeground2,
+    colorStatusWarningForeground3: colorStatusWarningForeground3,
+    colorStatusWarningForegroundInverted: colorStatusWarningForegroundInverted,
+    colorStatusWarningBorderActive: colorStatusWarningBorderActive,
+    colorStatusWarningBorder1: colorStatusWarningBorder1,
+    colorStatusWarningBorder2: colorStatusWarningBorder2,
+    colorStatusDangerBackground1: colorStatusDangerBackground1,
+    colorStatusDangerBackground2: colorStatusDangerBackground2,
+    colorStatusDangerBackground3: colorStatusDangerBackground3,
+    colorStatusDangerBackground3Hover: colorStatusDangerBackground3Hover,
+    colorStatusDangerBackground3Pressed: colorStatusDangerBackground3Pressed,
+    colorStatusDangerForeground1: colorStatusDangerForeground1,
+    colorStatusDangerForeground2: colorStatusDangerForeground2,
+    colorStatusDangerForeground3: colorStatusDangerForeground3,
+    colorStatusDangerForegroundInverted: colorStatusDangerForegroundInverted,
+    colorStatusDangerBorderActive: colorStatusDangerBorderActive,
+    colorStatusDangerBorder1: colorStatusDangerBorder1,
+    colorStatusDangerBorder2: colorStatusDangerBorder2,
     borderRadiusNone: borderRadiusNone,
     borderRadiusSmall: borderRadiusSmall,
     borderRadiusMedium: borderRadiusMedium,
@@ -4522,6 +4683,7 @@ var tokens = /*#__PURE__*/Object.freeze({
     durationFaster: durationFaster,
     durationFast: durationFast,
     durationNormal: durationNormal,
+    durationGentle: durationGentle,
     durationSlow: durationSlow,
     durationSlower: durationSlower,
     durationUltraSlow: durationUltraSlow,
@@ -4595,6 +4757,9 @@ class AnchorButton extends FASTElement {
     this.iconOnly = false;
     this.disabled = false;
     this.disabledFocusable = false;
+    /**
+     * Prevents disabledFocusable click events
+     */
     this.handleDisabledFocusableClick = e => {
       if (e && this.disabled || this.disabledFocusable) {
         e.stopImmediatePropagation();
@@ -4701,7 +4866,8 @@ const template$q = anchorTemplate();
 const styles$p = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit;text-align:center}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active) .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
+  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit;text-align:center}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary'])) .control,:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover) .control,:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline'])) .control,:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover) .control,:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle'])) .control,:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover) .control,:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent'])) .control,:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover) .control,:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover:active)
+    .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
     .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='transparent']:hover) .control{border-color:Highlight}`));
 
@@ -4749,10 +4915,10 @@ function getInitials(displayName, isRtl, options) {
     return "";
   }
   displayName = cleanupDisplayName(displayName);
-  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || !(options == null ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName)) {
+  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || !options?.allowPhoneInitials && PHONENUMBER_REGEX.test(displayName)) {
     return "";
   }
-  return getInitialsLatin(displayName, isRtl, options == null ? void 0 : options.firstInitialOnly);
+  return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
 const AvatarActive = {
@@ -4831,43 +4997,52 @@ var __decorateClass$n = (decorators, target, key, kind) => {
   if (kind && result) __defProp$n(target, key, result);
   return result;
 };
-const _Avatar = class extends FASTElement {
+const _Avatar = class _Avatar extends FASTElement {
   constructor() {
     super(...arguments);
     this.color = "neutral";
   }
+  /**
+   * Sets the data-color attribute used for the visual presentation
+   * @internal
+   */
   generateColor() {
-    var _a, _b;
     if (!this.color) {
       return;
     }
-    return this.color === AvatarColor.colorful ? _Avatar.colors[getHashCode((_b = (_a = this.colorId) != null ? _a : this.name) != null ? _b : "") % _Avatar.colors.length] : this.color;
+    return this.color === AvatarColor.colorful ? _Avatar.colors[getHashCode(this.colorId ?? this.name ?? "") % _Avatar.colors.length] : this.color;
   }
+  /**
+   * Generates and sets the initials for the template
+   * @internal
+   */
   generateInitials() {
-    var _a, _b;
     if (!this.name && !this.initials) {
       return;
     }
-    const size = (_a = this.size) != null ? _a : 32;
-    return (_b = this.initials) != null ? _b : getInitials(this.name, window.getComputedStyle(this).direction === "rtl", {
+    const size = this.size ?? 32;
+    return this.initials ?? getInitials(this.name, window.getComputedStyle(this).direction === "rtl", {
       firstInitialOnly: size <= 16
     });
   }
 };
-let Avatar = _Avatar;
-Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$n([attr], Avatar.prototype, "name", 2);
-__decorateClass$n([attr], Avatar.prototype, "initials", 2);
+/**
+ * An array of the available Avatar named colors
+ */
+_Avatar.colors = Object.values(AvatarNamedColor);
+__decorateClass$n([attr], _Avatar.prototype, "name", 2);
+__decorateClass$n([attr], _Avatar.prototype, "initials", 2);
 __decorateClass$n([attr({
   converter: nullableNumberConverter
-})], Avatar.prototype, "size", 2);
-__decorateClass$n([attr], Avatar.prototype, "shape", 2);
-__decorateClass$n([attr], Avatar.prototype, "active", 2);
-__decorateClass$n([attr], Avatar.prototype, "appearance", 2);
-__decorateClass$n([attr], Avatar.prototype, "color", 2);
+})], _Avatar.prototype, "size", 2);
+__decorateClass$n([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$n([attr], _Avatar.prototype, "active", 2);
+__decorateClass$n([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$n([attr], _Avatar.prototype, "color", 2);
 __decorateClass$n([attr({
   attribute: "color-id"
-})], Avatar.prototype, "colorId", 2);
+})], _Avatar.prototype, "colorId", 2);
+let Avatar = _Avatar;
 const getHashCode = str => {
   let hashCode = 0;
   for (let len = str.length - 1; len >= 0; len--) {
@@ -5339,28 +5514,62 @@ class Button extends FASTElement {
   constructor() {
     super();
     this.disabledFocusable = false;
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
     this.elementInternals = this.attachInternals();
     this.iconOnly = false;
     this.elementInternals.role = "button";
   }
+  /**
+   * Sets the element's internal disabled state when the element is focusable while disabled.
+   *
+   * @param previous - the previous disabledFocusable value
+   * @param next - the current disabledFocusable value
+   * @internal
+   */
   disabledFocusableChanged(previous, next) {
     if (this.$fastController.isConnected) {
       this.elementInternals.ariaDisabled = `${!!next}`;
     }
   }
+  /**
+   * The associated form element.
+   *
+   * @public
+   */
   get form() {
     return this.elementInternals.form;
   }
+  /**
+   * A reference to all associated label elements.
+   *
+   * @public
+   */
   get labels() {
     return Object.freeze(Array.from(this.elementInternals.labels));
   }
+  /**
+   * Removes the form submission fallback control when the type changes.
+   *
+   * @param previous - the previous type value
+   * @param next - the new type value
+   * @internal
+   */
   typeChanged(previous, next) {
-    var _a, _b, _c;
     if (next !== ButtonType.submit) {
-      (_a = this.formSubmissionFallbackControl) == null ? void 0 : _a.remove();
-      (_c = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector('slot[name="internal"]')) == null ? void 0 : _c.remove();
+      this.formSubmissionFallbackControl?.remove();
+      this.shadowRoot?.querySelector('slot[name="internal"]')?.remove();
     }
   }
+  /**
+   * Handles the button click event.
+   *
+   * @param e - The event object
+   * @internal
+   */
   clickHandler(e) {
     if (e && this.disabledFocusable) {
       e.stopImmediatePropagation();
@@ -5373,20 +5582,27 @@ class Button extends FASTElement {
     super.connectedCallback();
     this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
   }
+  /**
+   * This fallback creates a new slot, then creates a submit button to mirror the custom element's
+   * properties. The submit button is then appended to the slot and the form is submitted.
+   *
+   * @internal
+   * @privateRemarks
+   * This is a workaround until {@link https://github.com/WICG/webcomponents/issues/814 | WICG/webcomponents/issues/814} is resolved.
+   */
   createAndInsertFormSubmissionFallbackControl() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const internalSlot = (_a = this.formSubmissionFallbackControlSlot) != null ? _a : document.createElement("slot");
+    const internalSlot = this.formSubmissionFallbackControlSlot ?? document.createElement("slot");
     internalSlot.setAttribute("name", "internal");
-    (_b = this.shadowRoot) == null ? void 0 : _b.appendChild(internalSlot);
+    this.shadowRoot?.appendChild(internalSlot);
     this.formSubmissionFallbackControlSlot = internalSlot;
-    const fallbackControl = (_c = this.formSubmissionFallbackControl) != null ? _c : document.createElement("button");
+    const fallbackControl = this.formSubmissionFallbackControl ?? document.createElement("button");
     fallbackControl.style.display = "none";
     fallbackControl.setAttribute("type", "submit");
     fallbackControl.setAttribute("slot", "internal");
     if (this.formNoValidate) {
       fallbackControl.toggleAttribute("formnovalidate", true);
     }
-    if ((_d = this.elementInternals.form) == null ? void 0 : _d.id) {
+    if (this.elementInternals.form?.id) {
       fallbackControl.setAttribute("form", this.elementInternals.form.id);
     }
     if (this.name) {
@@ -5396,23 +5612,37 @@ class Button extends FASTElement {
       fallbackControl.setAttribute("value", this.value);
     }
     if (this.formAction) {
-      fallbackControl.setAttribute("formaction", (_e = this.formAction) != null ? _e : "");
+      fallbackControl.setAttribute("formaction", this.formAction ?? "");
     }
     if (this.formEnctype) {
-      fallbackControl.setAttribute("formenctype", (_f = this.formEnctype) != null ? _f : "");
+      fallbackControl.setAttribute("formenctype", this.formEnctype ?? "");
     }
     if (this.formMethod) {
-      fallbackControl.setAttribute("formmethod", (_g = this.formMethod) != null ? _g : "");
+      fallbackControl.setAttribute("formmethod", this.formMethod ?? "");
     }
     if (this.formTarget) {
-      fallbackControl.setAttribute("formtarget", (_h = this.formTarget) != null ? _h : "");
+      fallbackControl.setAttribute("formtarget", this.formTarget ?? "");
     }
     this.append(fallbackControl);
     this.formSubmissionFallbackControl = fallbackControl;
   }
+  /**
+   * Invoked when a connected component's form or fieldset has its disabled state changed.
+   *
+   * @param disabled - the disabled value of the form / fieldset
+   *
+   * @internal
+   */
   formDisabledCallback(disabled) {
     this.disabled = disabled;
   }
+  /**
+   * Handles keypress events for the button.
+   *
+   * @param e - the keyboard event
+   * @returns - the return value of the click handler
+   * @public
+   */
   keypressHandler(e) {
     if (e && this.disabledFocusable) {
       e.stopImmediatePropagation();
@@ -5424,6 +5654,11 @@ class Button extends FASTElement {
     }
     return true;
   }
+  /**
+   * Presses the button.
+   *
+   * @public
+   */
   press() {
     switch (this.type) {
       case ButtonType.reset:
@@ -5438,12 +5673,20 @@ class Button extends FASTElement {
         }
     }
   }
+  /**
+   * Resets the associated form.
+   *
+   * @public
+   */
   resetForm() {
-    var _a;
-    (_a = this.elementInternals.form) == null ? void 0 : _a.reset();
+    this.elementInternals.form?.reset();
   }
+  /**
+   * Submits the associated form.
+   *
+   * @internal
+   */
   submitForm() {
-    var _a;
     if (!this.elementInternals.form || this.disabled || this.type !== ButtonType.submit) {
       return;
     }
@@ -5452,7 +5695,7 @@ class Button extends FASTElement {
       return;
     }
     try {
-      this.elementInternals.setFormValue((_a = this.value) != null ? _a : "");
+      this.elementInternals.setFormValue(this.value ?? "");
       this.elementInternals.form.requestSubmit(this);
     } catch (e) {
       this.createAndInsertFormSubmissionFallbackControl();
@@ -5461,6 +5704,12 @@ class Button extends FASTElement {
     }
   }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
 Button.formAssociated = true;
 __decorateClass$l([attr], Button.prototype, "appearance", 2);
 __decorateClass$l([attr({
@@ -5512,7 +5761,7 @@ const template$n = buttonTemplate$1();
 const styles$m = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active){border-color:transparent}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active){background-color:${colorTransparentBackground}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover:active){border-color:transparent}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='transparent']:hover){border-color:Highlight}`));
 
 const definition$n = Button.compose({
@@ -5529,9 +5778,32 @@ function FormAssociated(BaseCtor) {
   const C = class extends BaseCtor {
     constructor(...args) {
       super(...args);
+      /**
+       * Track whether the value has been changed from the initial value
+       */
       this.dirtyValue = false;
+      /**
+       * The initial value of the form. This value sets the `value` property
+       * only when the `value` property has not been explicitly set.
+       *
+       * @remarks
+       * HTML Attribute: value
+       */
       this.initialValue = "";
+      /**
+       * Sets the element's disabled state. A disabled element will not be included during form submission.
+       *
+       * @remarks
+       * HTML Attribute: disabled
+       */
       this.disabled = false;
+      /**
+       * These are events that are still fired by the proxy
+       * element based on user / programmatic interaction.
+       *
+       * The proxy implementation should be transparent to
+       * the app author, so block these events from emitting.
+       */
       this.proxyEventsToBlock = ["change", "click"];
       this.proxyInitialized = false;
       this.required = false;
@@ -5540,21 +5812,51 @@ function FormAssociated(BaseCtor) {
         this.formResetCallback = this.formResetCallback.bind(this);
       }
     }
+    /**
+     * Must evaluate to true to enable elementInternals.
+     * Feature detects API support and resolve respectively
+     *
+     * @internal
+     */
     static get formAssociated() {
       return supportsElementInternals;
     }
+    /**
+     * Returns the validity state of the element
+     *
+     * @beta
+     */
     get validity() {
       return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
     }
+    /**
+     * Retrieve a reference to the associated form.
+     * Returns null if not associated to any form.
+     *
+     * @beta
+     */
     get form() {
       return this.elementInternals ? this.elementInternals.form : this.proxy.form;
     }
+    /**
+     * Retrieve the localized validation message,
+     * or custom validation message if set.
+     *
+     * @beta
+     */
     get validationMessage() {
       return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
     }
+    /**
+     * Whether the element will be validated when the
+     * form is submitted
+     */
     get willValidate() {
       return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
     }
+    /**
+     * A reference to all associated label elements
+     */
     get labels() {
       if (this.elementInternals) {
         return Object.freeze(Array.from(this.elementInternals.labels));
@@ -5567,6 +5869,16 @@ function FormAssociated(BaseCtor) {
         return emptyArray;
       }
     }
+    /**
+     * Invoked when the `value` property changes
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `valueChanged` method
+     * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
     valueChanged(previous, next) {
       this.dirtyValue = true;
       if (this.proxy instanceof HTMLElement) {
@@ -5579,23 +5891,67 @@ function FormAssociated(BaseCtor) {
     currentValueChanged() {
       this.value = this.currentValue;
     }
+    /**
+     * Invoked when the `initialValue` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `initialValueChanged` method
+     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
     initialValueChanged(previous, next) {
       if (!this.dirtyValue) {
         this.value = this.initialValue;
         this.dirtyValue = false;
       }
     }
+    /**
+     * Invoked when the `disabled` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `disabledChanged` method
+     * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
     disabledChanged(previous, next) {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.disabled = this.disabled;
       }
       Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
     }
+    /**
+     * Invoked when the `name` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `nameChanged` method
+     * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
     nameChanged(previous, next) {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.name = this.name;
       }
     }
+    /**
+     * Invoked when the `required` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `requiredChanged` method
+     * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
     requiredChanged(prev, next) {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.required = this.required;
@@ -5603,6 +5959,10 @@ function FormAssociated(BaseCtor) {
       Updates.enqueue(() => this.classList.toggle("required", this.required));
       this.validate();
     }
+    /**
+     * The element internals object. Will only exist
+     * in browsers supporting the attachInternals API
+     */
     get elementInternals() {
       if (!supportsElementInternals) {
         return null;
@@ -5614,6 +5974,9 @@ function FormAssociated(BaseCtor) {
       }
       return internals;
     }
+    /**
+     * @internal
+     */
     connectedCallback() {
       super.connectedCallback();
       this.addEventListener("keypress", this._keypressHandler);
@@ -5628,18 +5991,37 @@ function FormAssociated(BaseCtor) {
         }
       }
     }
+    /**
+     * @internal
+     */
     disconnectedCallback() {
       this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
       if (!this.elementInternals && this.form) {
         this.form.removeEventListener("reset", this.formResetCallback);
       }
     }
+    /**
+     * Return the current validity of the element.
+     */
     checkValidity() {
       return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
     }
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
     reportValidity() {
       return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
     }
+    /**
+     * Set the validity of the control. In cases when the elementInternals object is not
+     * available (and the proxy element is used to report validity), this function will
+     * do nothing unless a message is provided, at which point the setCustomValidity method
+     * of the proxy element will be invoked with the provided message.
+     * @param flags - Validity flags
+     * @param message - Optional message to supply
+     * @param anchor - Optional element used by UA to display an interactive validation UI
+     */
     setValidity(flags, message, anchor) {
       if (this.elementInternals) {
         this.elementInternals.setValidity(flags, message, anchor);
@@ -5647,6 +6029,11 @@ 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;
     }
@@ -5654,8 +6041,10 @@ function FormAssociated(BaseCtor) {
       this.value = this.initialValue;
       this.dirtyValue = false;
     }
+    /**
+     * Attach the proxy element to the DOM
+     */
     attachProxy() {
-      var _a;
       if (!this.proxyInitialized) {
         this.proxyInitialized = true;
         this.proxy.style.display = "none";
@@ -5672,19 +6061,27 @@ function FormAssociated(BaseCtor) {
         this.proxySlot = document.createElement("slot");
         this.proxySlot.setAttribute("name", proxySlotName);
       }
-      (_a = this.shadowRoot) == null ? void 0 : _a.appendChild(this.proxySlot);
+      this.shadowRoot?.appendChild(this.proxySlot);
       this.appendChild(this.proxy);
     }
+    /**
+     * Detach the proxy element from the DOM
+     */
     detachProxy() {
-      var _a;
       this.removeChild(this.proxy);
-      (_a = this.shadowRoot) == null ? void 0 : _a.removeChild(this.proxySlot);
+      this.shadowRoot?.removeChild(this.proxySlot);
     }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
     validate(anchor) {
       if (this.proxy instanceof HTMLElement) {
         this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
       }
     }
+    /**
+     * Associates the provided value (and optional state) with the parent form.
+     * @param value - The value to set
+     * @param state - The state object provided to during session restores and when autofilling.
+     */
     setFormValue(value, state) {
       if (this.elementInternals) {
         this.elementInternals.setFormValue(value, state || value);
@@ -5695,11 +6092,15 @@ function FormAssociated(BaseCtor) {
         case keyEnter:
           if (this.form instanceof HTMLFormElement) {
             const defaultButton = this.form.querySelector("[type=submit]");
-            defaultButton == null ? void 0 : defaultButton.click();
+            defaultButton?.click();
           }
           break;
       }
     }
+    /**
+     * Used to stop propagation of proxy element events
+     * @param e - Event object
+     */
     stopPropagation(e) {
       e.stopPropagation();
     }
@@ -5726,14 +6127,35 @@ function CheckableFormAssociated(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;
       this.dirtyChecked = false;
     }
     checkedAttributeChanged() {
       this.defaultChecked = this.checkedAttribute;
     }
+    /**
+     * @internal
+     */
     defaultCheckedChanged() {
       if (!this.dirtyChecked) {
         this.checked = this.defaultChecked;
@@ -5803,8 +6225,17 @@ var __decorateClass$k = (decorators, target, key, kind) => {
 class Checkbox extends FormAssociatedCheckbox {
   constructor() {
     super();
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
     this.initialValue = "on";
     this.indeterminate = false;
+    /**
+     * @internal
+     */
     this.keypressHandler = e => {
       if (this.disabled) {
         return;
@@ -5815,6 +6246,9 @@ class Checkbox extends FormAssociatedCheckbox {
           break;
       }
     };
+    /**
+     * @internal
+     */
     this.clickHandler = e => {
       if (!this.disabled) {
         this.toggleChecked();
@@ -5931,9 +6365,14 @@ class CounterBadge extends FASTElement {
   overflowCountChanged() {
     this.setCount();
   }
+  /**
+   * @internal
+   * Function to set the count
+   * This is the default slotted content for the counter badge
+   * If children are slotted, that will override the value returned
+   */
   setCount() {
-    var _a;
-    const count = (_a = this.count) != null ? _a : 0;
+    const count = this.count ?? 0;
     if ((count !== 0 || this.showZero) && !this.dot) {
       return count > this.overflowCount ? `${this.overflowCount}+` : `${count}`;
     }
@@ -6374,21 +6813,40 @@ var __decorateClass$i = (decorators, target, key, kind) => {
   if (kind && result) __defProp$i(target, key, result);
   return result;
 };
-const _Dialog = class extends FASTElement {
+const _Dialog = class _Dialog extends FASTElement {
   constructor() {
     super(...arguments);
+    /**
+     * @private
+     * Indicates whether focus is being trapped within the dialog
+     */
     this.isTrappingFocus = false;
     this.titleAction = [];
     this.modalType = DialogModalType.modal;
     this.open = false;
     this.noTitleAction = false;
+    /**
+     * @private
+     * Indicates whether focus should be trapped within the dialog
+     */
     this.trapFocus = false;
+    /**
+     * @public
+     * Method to emit an event when the dialog's open state changes
+     * @param dismissed - Indicates whether the dialog was dismissed
+     */
     this.onOpenChangeEvent = (dismissed = false) => {
       this.$emit("onOpenChange", {
         open: this.dialog.open,
         dismissed
       });
     };
+    /**
+     * @public
+     * Handles keydown events on the dialog
+     * @param e - The keydown event
+     * @returns boolean | void
+     */
     this.handleKeydown = e => {
       if (e.defaultPrevented) {
         return;
@@ -6404,6 +6862,11 @@ const _Dialog = class extends FASTElement {
           return true;
       }
     };
+    /**
+     * @private
+     * Handles keydown events on the document
+     * @param e - The keydown event
+     */
     this.handleDocumentKeydown = e => {
       if (!e.defaultPrevented && this.dialog.open) {
         switch (e.key) {
@@ -6413,6 +6876,11 @@ const _Dialog = class extends FASTElement {
         }
       }
     };
+    /**
+     * @private
+     * Handles tab keydown events
+     * @param e - The keydown event
+     */
     this.handleTabKeyDown = e => {
       if (!this.trapFocus || !this.dialog.open) {
         return;
@@ -6432,10 +6900,19 @@ const _Dialog = class extends FASTElement {
       }
       return;
     };
+    /**
+     * @private
+     * Gets the bounds of the tab queue
+     * @returns (HTMLElement | SVGElement)[]
+     */
     this.getTabQueueBounds = () => {
       const bounds = [];
       return _Dialog.reduceTabbableItems(bounds, this);
     };
+    /**
+     * @private
+     * Focuses the first element in the tab queue
+     */
     this.focusFirstElement = () => {
       const bounds = this.getTabQueueBounds();
       if (bounds.length > 0) {
@@ -6446,18 +6923,39 @@ const _Dialog = class extends FASTElement {
         }
       }
     };
+    /**
+     * @private
+     * Determines if focus should be forced
+     * @param currentFocusElement - The currently focused element
+     * @returns boolean
+     */
     this.shouldForceFocus = currentFocusElement => {
       return this.isTrappingFocus && !this.contains(currentFocusElement);
     };
+    /**
+     * @private
+     * Determines if focus should be trapped
+     * @returns boolean
+     */
     this.shouldTrapFocus = () => {
       return this.trapFocus && this.dialog.open;
     };
+    /**
+     * @private
+     * Handles focus events on the document
+     * @param e - The focus event
+     */
     this.handleDocumentFocus = e => {
       if (!e.defaultPrevented && this.shouldForceFocus(e.target)) {
         this.focusFirstElement();
         e.preventDefault();
       }
     };
+    /**
+     * @private
+     * Updates the state of focus trapping
+     * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
+     */
     this.updateTrapFocus = shouldTrapFocusOverride => {
       const shouldTrapFocus = shouldTrapFocusOverride === void 0 ? this.shouldTrapFocus() : shouldTrapFocusOverride;
       if (shouldTrapFocus && !this.isTrappingFocus) {
@@ -6474,6 +6972,10 @@ const _Dialog = class extends FASTElement {
       }
     };
   }
+  /**
+   * @public
+   * Lifecycle method called when the element is connected to the DOM
+   */
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener("keydown", this.handleDocumentKeydown);
@@ -6482,11 +6984,19 @@ const _Dialog = class extends FASTElement {
       this.setComponent();
     });
   }
+  /**
+   * @public
+   * Lifecycle method called when the element is disconnected from the DOM
+   */
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("keydown", this.handleDocumentKeydown);
     this.updateTrapFocus(false);
   }
+  /**
+   * @public
+   * Method called when the 'open' attribute changes
+   */
   openChanged(oldValue, newValue) {
     if (newValue !== oldValue) {
       if (newValue && !oldValue) {
@@ -6496,6 +7006,10 @@ const _Dialog = class extends FASTElement {
       }
     }
   }
+  /**
+   * @public
+   * Method called when the 'modalType' attribute changes
+   */
   modalTypeChanged(oldValue, newValue) {
     if (newValue !== oldValue) {
       if (newValue == DialogModalType.alert || newValue == DialogModalType.modal) {
@@ -6505,6 +7019,10 @@ const _Dialog = class extends FASTElement {
       }
     }
   }
+  /**
+   * @public
+   * Method to set the component's state based on its attributes
+   */
   setComponent() {
     if (this.modalType == DialogModalType.modal || this.modalType == DialogModalType.alert) {
       this.trapFocus = true;
@@ -6512,6 +7030,10 @@ const _Dialog = class extends FASTElement {
       this.trapFocus = false;
     }
   }
+  /**
+   * @public
+   * Method to show the dialog
+   */
   show() {
     Updates.enqueue(() => {
       if (this.modalType === DialogModalType.alert || this.modalType === DialogModalType.modal) {
@@ -6525,17 +7047,32 @@ const _Dialog = class extends FASTElement {
       this.onOpenChangeEvent();
     });
   }
+  /**
+   * @public
+   * Method to hide the dialog
+   * @param dismissed - Indicates whether the dialog was dismissed
+   */
   hide(dismissed = false) {
     this.dialog.close();
     this.open = false;
     this.onOpenChangeEvent(dismissed);
   }
+  /**
+   * @public
+   * Method to dismiss the dialog
+   */
   dismiss() {
     if (this.modalType === DialogModalType.alert) {
       return;
     }
     this.hide(true);
   }
+  /**
+   * @public
+   * Handles click events on the dialog
+   * @param event - The click event
+   * @returns boolean
+   */
   handleClick(event) {
     event.preventDefault();
     if (this.dialog.open && this.modalType !== DialogModalType.alert && event.target === this.dialog) {
@@ -6543,6 +7080,13 @@ const _Dialog = class extends FASTElement {
     }
     return true;
   }
+  /**
+   * @private
+   * Reduces the list of tabbable items
+   * @param elements - The current list of elements
+   * @param element - The element to consider adding to the list
+   * @returns HTMLElement[]
+   */
   static reduceTabbableItems(elements, element) {
     if (element.getAttribute("tabindex") === "-1") {
       return elements;
@@ -6553,37 +7097,47 @@ const _Dialog = class extends FASTElement {
     }
     return Array.from(element.children).reduce((elements2, currentElement) => _Dialog.reduceTabbableItems(elements2, currentElement), elements);
   }
+  /**
+   * @private
+   * Determines if an element is a focusable FASTElement
+   * @param element - The element to check
+   * @returns boolean
+   */
   static isFocusableFastElement(element) {
-    var _a, _b;
-    return !!((_b = (_a = element.$fastController) == null ? void 0 : _a.definition.shadowOptions) == null ? void 0 : _b.delegatesFocus);
+    return !!element.$fastController?.definition.shadowOptions?.delegatesFocus;
   }
+  /**
+   * @private
+   * Determines if an element has a tabbable shadow
+   * @param element - The element to check
+   * @returns boolean
+   */
   static hasTabbableShadow(element) {
-    var _a, _b;
-    return Array.from((_b = (_a = element.shadowRoot) == null ? void 0 : _a.querySelectorAll("*")) != null ? _b : []).some(x => {
+    return Array.from(element.shadowRoot?.querySelectorAll("*") ?? []).some(x => {
       return isTabbable(x);
     });
   }
 };
-let Dialog = _Dialog;
-__decorateClass$i([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$i([observable], Dialog.prototype, "titleAction", 2);
-__decorateClass$i([observable], Dialog.prototype, "defaultTitleAction", 2);
+__decorateClass$i([observable], _Dialog.prototype, "dialog", 2);
+__decorateClass$i([observable], _Dialog.prototype, "titleAction", 2);
+__decorateClass$i([observable], _Dialog.prototype, "defaultTitleAction", 2);
 __decorateClass$i([attr({
   attribute: "aria-describedby"
-})], Dialog.prototype, "ariaDescribedby", 2);
+})], _Dialog.prototype, "ariaDescribedby", 2);
 __decorateClass$i([attr({
   attribute: "aria-labelledby"
-})], Dialog.prototype, "ariaLabelledby", 2);
+})], _Dialog.prototype, "ariaLabelledby", 2);
 __decorateClass$i([attr({
   attribute: "modal-type"
-})], Dialog.prototype, "modalType", 2);
+})], _Dialog.prototype, "modalType", 2);
 __decorateClass$i([attr({
   mode: "boolean"
-})], Dialog.prototype, "open", 2);
+})], _Dialog.prototype, "open", 2);
 __decorateClass$i([attr({
   mode: "boolean",
   attribute: "no-title-action"
-})], Dialog.prototype, "noTitleAction", 2);
+})], _Dialog.prototype, "noTitleAction", 2);
+let Dialog = _Dialog;
 
 const dismissed16Regular = html.partial(`
   <svg
@@ -6616,7 +7170,13 @@ const definition$j = Dialog.compose({
 });
 
 const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
   separator: "separator",
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
   presentation: "presentation"
 };
 const DividerOrientation = Orientation;
@@ -7702,6 +8262,10 @@ class Menu extends FASTElement {
     this.open = false;
     this.slottedMenuList = [];
     this.slottedTriggers = [];
+    /**
+     * Toggles the open state of the menu.
+     * @public
+     */
     this.toggleMenu = () => {
       if (this.open) {
         this.closeMenu();
@@ -7709,13 +8273,21 @@ class Menu extends FASTElement {
         this.openMenu();
       }
     };
+    /**
+     * Closes the menu.
+     * @public
+     */
     this.closeMenu = () => {
       this.open = false;
       if (this.closeOnScroll) {
         document.removeEventListener("scroll", this.closeMenu);
       }
     };
-    this.openMenu = e => {
+    /**
+     * Opens the menu.
+     * @public
+     */
+    this.openMenu = e => {
       this.open = true;
       if (e && this.openOnContext) {
         e.preventDefault();
@@ -7724,9 +8296,20 @@ class Menu extends FASTElement {
         document.addEventListener("scroll", this.closeMenu);
       }
     };
+    /**
+     * The task to set the positioning of the menu.
+     * @protected
+     */
     this.setPositioningTask = () => {
       this.setPositioning();
     };
+    /**
+     * Handles keyboard interaction for the trigger.
+     * Toggles the menu when the Space or Enter key is pressed.
+     * If the menu is open, focuses on the menu list.
+     * @public
+     * @param {KeyboardEvent} e - the keyboard event
+     */
     this.handleTriggerKeydown = e => {
       if (e.defaultPrevented) {
         return;
@@ -7745,22 +8328,41 @@ class Menu extends FASTElement {
           return true;
       }
     };
+    /**
+     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+     * @private
+     * @param {Event} e - The event triggered on document click.
+     */
     this.handleDocumentClick = e => {
       if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
         this.closeMenu();
       }
     };
   }
+  /**
+   * Called when the element is connected to the DOM.
+   * Sets up the component.
+   * @public
+   */
   connectedCallback() {
     super.connectedCallback();
     Updates.enqueue(() => this.setComponent());
   }
+  /**
+   * Called when the element is disconnected from the DOM.
+   * Removes event listeners.
+   * @public
+   */
   disconnectedCallback() {
-    var _a;
     super.disconnectedCallback();
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup?.();
     this.removeListeners();
   }
+  /**
+   * Sets the component.
+   * Sets the trigger and menu list elements and adds event listeners.
+   * @public
+   */
   setComponent() {
     if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
       this._trigger = this.slottedTriggers[0];
@@ -7770,6 +8372,10 @@ class Menu extends FASTElement {
       this.addListeners();
     }
   }
+  /**
+   * Focuses on the menu list.
+   * @public
+   */
   focusMenuList() {
     if (this.open && this._menuList) {
       Updates.enqueue(() => {
@@ -7777,6 +8383,10 @@ class Menu extends FASTElement {
       });
     }
   }
+  /**
+   * Focuses on the menu trigger.
+   * @public
+   */
   focusTrigger() {
     if (!this.open && this._trigger) {
       Updates.enqueue(() => {
@@ -7784,43 +8394,76 @@ class Menu extends FASTElement {
       });
     }
   }
+  /**
+   * Called whenever the open state changes.
+   * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
+   * Sets menu list position
+   * emits openChanged event
+   * @public
+   * @param {boolean} oldValue - The previous value of 'open'.
+   * @param {boolean} newValue - The new value of 'open'.
+   */
   openChanged(oldValue, newValue) {
-    var _a;
     if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
       this._trigger.setAttribute("aria-expanded", `${this.open}`);
       if (this._menuList && this.open) {
         Updates.enqueue(this.setPositioningTask);
       }
     }
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup?.();
     this.$emit("onOpenChange", {
       open: newValue
     });
   }
+  /**
+   * Called whenever the 'openOnHover' property changes.
+   * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+   * @public
+   * @param {boolean} oldValue - The previous value of 'openOnHover'.
+   * @param {boolean} newValue - The new value of 'openOnHover'.
+   */
   openOnHoverChanged(oldValue, newValue) {
-    var _a, _b;
     if (newValue) {
-      (_a = this._trigger) == null ? void 0 : _a.addEventListener("mouseover", this.openMenu);
+      this._trigger?.addEventListener("mouseover", this.openMenu);
     } else {
-      (_b = this._trigger) == null ? void 0 : _b.removeEventListener("mouseover", this.openMenu);
+      this._trigger?.removeEventListener("mouseover", this.openMenu);
     }
   }
+  /**
+   * Called whenever the 'persistOnItemClick' property changes.
+   * Adds or removes a 'click' event listener to the menu list based on the new value.
+   * @public
+   * @param {boolean} oldValue - The previous value of 'persistOnItemClick'.
+   * @param {boolean} newValue - The new value of 'persistOnItemClick'.
+   */
   persistOnItemClickChanged(oldValue, newValue) {
-    var _a, _b;
     if (!newValue) {
-      (_a = this._menuList) == null ? void 0 : _a.addEventListener("click", this.closeMenu);
+      this._menuList?.addEventListener("click", this.closeMenu);
     } else {
-      (_b = this._menuList) == null ? void 0 : _b.removeEventListener("click", this.closeMenu);
+      this._menuList?.removeEventListener("click", this.closeMenu);
     }
   }
+  /**
+   * Called whenever the 'openOnContext' property changes.
+   * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
+   * @public
+   * @param {boolean} oldValue - The previous value of 'openOnContext'.
+   * @param {boolean} newValue - The new value of 'openOnContext'.
+   */
   openOnContextChanged(oldValue, newValue) {
-    var _a, _b;
     if (newValue) {
-      (_a = this._trigger) == null ? void 0 : _a.addEventListener("contextmenu", this.openMenu);
+      this._trigger?.addEventListener("contextmenu", this.openMenu);
     } else {
-      (_b = this._trigger) == null ? void 0 : _b.removeEventListener("contextmenu", this.openMenu);
+      this._trigger?.removeEventListener("contextmenu", this.openMenu);
     }
   }
+  /**
+   * Called whenever the 'closeOnScroll' property changes.
+   * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
+   * @public
+   * @param {boolean} oldValue - The previous value of 'closeOnScroll'.
+   * @param {boolean} newValue - The new value of 'closeOnScroll'.
+   */
   closeOnScrollChanged(oldValue, newValue) {
     if (newValue) {
       document.addEventListener("scroll", this.closeMenu);
@@ -7828,10 +8471,13 @@ class Menu extends FASTElement {
       document.removeEventListener("scroll", this.closeMenu);
     }
   }
+  /**
+   * Sets the positioning of the menu.
+   * @protected
+   */
   setPositioning() {
     if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
       this.cleanup = P(this, this.positioningContainer, async () => {
-        var _a, _b;
         const {
           middlewareData,
           x,
@@ -7844,19 +8490,18 @@ class Menu extends FASTElement {
               availableHeight,
               rects
             }) => {
-              var _a2;
-              ((_a2 = this.positioningContainer) == null ? void 0 : _a2.style) && Object.assign(this.positioningContainer.style, {
+              this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
                 maxHeight: `${availableHeight}px`,
                 width: `${rects.reference.width}px`
               });
             }
           }), P$1()]
         });
-        if ((_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden) {
+        if (middlewareData.hide?.referenceHidden) {
           this.open = false;
           return;
         }
-        ((_b = this.positioningContainer) == null ? void 0 : _b.style) && Object.assign(this.positioningContainer.style, {
+        this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
           position: "fixed",
           top: "0",
           left: "0",
@@ -7865,37 +8510,54 @@ class Menu extends FASTElement {
       });
     }
   }
+  /**
+   * Adds event listeners.
+   * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+   * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
+   * @public
+   */
   addListeners() {
-    var _a, _b, _c, _d, _e;
     document.addEventListener("click", this.handleDocumentClick);
-    (_a = this._trigger) == null ? void 0 : _a.addEventListener("keydown", this.handleTriggerKeydown);
+    this._trigger?.addEventListener("keydown", this.handleTriggerKeydown);
     if (!this.persistOnItemClick) {
-      (_b = this._menuList) == null ? void 0 : _b.addEventListener("click", this.closeMenu);
+      this._menuList?.addEventListener("click", this.closeMenu);
     }
     if (this.openOnHover) {
-      (_c = this._trigger) == null ? void 0 : _c.addEventListener("mouseover", this.openMenu);
+      this._trigger?.addEventListener("mouseover", this.openMenu);
     } else if (this.openOnContext) {
-      (_d = this._trigger) == null ? void 0 : _d.addEventListener("contextmenu", this.openMenu);
+      this._trigger?.addEventListener("contextmenu", this.openMenu);
     } else {
-      (_e = this._trigger) == null ? void 0 : _e.addEventListener("click", this.toggleMenu);
+      this._trigger?.addEventListener("click", this.toggleMenu);
     }
   }
+  /**
+   * Removes event listeners.
+   * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+   * Also removes 'mouseover' event listeners from the trigger.
+   * @private
+   */
   removeListeners() {
-    var _a, _b, _c, _d, _e;
     document.removeEventListener("click", this.handleDocumentClick);
-    (_a = this._trigger) == null ? void 0 : _a.removeEventListener("keydown", this.handleTriggerKeydown);
+    this._trigger?.removeEventListener("keydown", this.handleTriggerKeydown);
     if (!this.persistOnItemClick) {
-      (_b = this._menuList) == null ? void 0 : _b.removeEventListener("click", this.closeMenu);
+      this._menuList?.removeEventListener("click", this.closeMenu);
     }
     if (this.openOnHover) {
-      (_c = this._trigger) == null ? void 0 : _c.removeEventListener("mouseover", this.openMenu);
+      this._trigger?.removeEventListener("mouseover", this.openMenu);
     }
     if (this.openOnContext) {
-      (_d = this._trigger) == null ? void 0 : _d.removeEventListener("contextmenu", this.openMenu);
+      this._trigger?.removeEventListener("contextmenu", this.openMenu);
     } else {
-      (_e = this._trigger) == null ? void 0 : _e.removeEventListener("click", this.toggleMenu);
+      this._trigger?.removeEventListener("click", this.toggleMenu);
     }
   }
+  /**
+   * Handles keyboard interaction for the menu.
+   * Closes the menu and focuses on the trigger when the Escape key is pressed.
+   * Closes the menu when the Tab key is pressed.
+   * @public
+   * @param {KeyboardEvent} e - the keyboard event
+   */
   handleMenuKeydown(e) {
     if (e.defaultPrevented) {
       return;
@@ -7970,7 +8632,8 @@ const MenuButtonShape = ButtonShape;
 const MenuButtonSize = ButtonSize;
 
 const template$e = buttonTemplate$1({
-  end: html.partial(`
+  end: html.partial( /* html */
+  `
     <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path>
     </svg>
@@ -7984,8 +8647,17 @@ const definition$e = MenuButton.compose({
 });
 
 const MenuItemRole = {
+  /**
+   * The menu item has a "menuitem" role
+   */
   menuitem: "menuitem",
+  /**
+   * The menu item has a "menuitemcheckbox" role
+   */
   menuitemcheckbox: "menuitemcheckbox",
+  /**
+   * The menu item has a "menuitemradio" role
+   */
   menuitemradio: "menuitemradio"
 };
 const roleForMenuItem = {
@@ -8008,6 +8680,9 @@ class MenuItem extends FASTElement {
     this.role = MenuItemRole.menuitem;
     this.checked = false;
     this.focusSubmenuOnLoad = false;
+    /**
+     * @internal
+     */
     this.handleMenuItemKeyDown = e => {
       if (e.defaultPrevented) {
         return false;
@@ -8034,6 +8709,9 @@ class MenuItem extends FASTElement {
       }
       return true;
     };
+    /**
+     * @internal
+     */
     this.handleMenuItemClick = e => {
       if (e.defaultPrevented || this.disabled) {
         return false;
@@ -8041,6 +8719,9 @@ class MenuItem extends FASTElement {
       this.invoke();
       return false;
     };
+    /**
+     * @internal
+     */
     this.submenuLoaded = () => {
       if (!this.focusSubmenuOnLoad) {
         return;
@@ -8051,6 +8732,9 @@ class MenuItem extends FASTElement {
         this.setAttribute("tabindex", "-1");
       }
     };
+    /**
+     * @internal
+     */
     this.handleMouseOver = e => {
       if (this.disabled || !this.hasSubmenu || this.expanded) {
         return false;
@@ -8058,6 +8742,9 @@ class MenuItem extends FASTElement {
       this.expanded = true;
       return false;
     };
+    /**
+     * @internal
+     */
     this.handleMouseOut = e => {
       if (!this.expanded || this.contains(document.activeElement)) {
         return false;
@@ -8065,10 +8752,16 @@ class MenuItem extends FASTElement {
       this.expanded = false;
       return false;
     };
+    /**
+     * @internal
+     */
     this.closeSubMenu = () => {
       this.expanded = false;
       this.focus();
     };
+    /**
+     * @internal
+     */
     this.expandAndFocus = () => {
       if (!this.hasSubmenu) {
         return;
@@ -8076,6 +8769,9 @@ class MenuItem extends FASTElement {
       this.focusSubmenuOnLoad = true;
       this.expanded = true;
     };
+    /**
+     * @internal
+     */
     this.invoke = () => {
       if (this.disabled) {
         return;
@@ -8114,23 +8810,37 @@ class MenuItem extends FASTElement {
       this.$emit("change");
     }
   }
+  /**
+   * @internal
+   */
   get hasSubmenu() {
     return !!this.submenu;
   }
+  /**
+   * Sets the submenu and updates its position.
+   *
+   * @internal
+   */
   slottedSubmenuChanged(prev, next) {
     if (next.length) {
       this.submenu = next[0];
       this.updateSubmenu();
     }
   }
+  /**
+   * @internal
+   */
   disconnectedCallback() {
-    var _a;
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup?.();
     super.disconnectedCallback();
   }
+  /**
+   * Calculate and apply submenu positioning.
+   *
+   * @public
+   */
   updateSubmenu() {
-    var _a;
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup?.();
     if (!this.submenu || !this.expanded) {
       return;
     }
@@ -8216,14 +8926,25 @@ var __decorateClass$c = (decorators, target, key, kind) => {
   if (kind && result) __defProp$c(target, key, result);
   return result;
 };
-const _MenuList = class extends FASTElement {
+const _MenuList = class _MenuList extends FASTElement {
   constructor() {
     super(...arguments);
     this.expandedItem = null;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
     this.focusIndex = -1;
+    /**
+     * @internal
+     */
     this.isNestedMenu = () => {
       return this.parentElement !== null && isHTMLElement(this.parentElement) && this.parentElement.getAttribute("role") === "menuitem";
     };
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
     this.handleFocusOut = e => {
       if (!this.contains(e.relatedTarget) && this.menuItems !== void 0) {
         this.collapseExpandedItem();
@@ -8261,6 +8982,9 @@ const _MenuList = class extends FASTElement {
         changedItem.setAttribute("tabindex", "0");
       }
     };
+    /**
+     * handle change from child element
+     */
     this.changeHandler = e => {
       if (this.menuItems === void 0) {
         return;
@@ -8294,9 +9018,15 @@ const _MenuList = class extends FASTElement {
         }
       }
     };
+    /**
+     * check if the item is a menu item
+     */
     this.isMenuItemElement = el => {
       return el instanceof MenuItem || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
     };
+    /**
+     * check if the item is focusable
+     */
     this.isFocusableElement = el => {
       return this.isMenuItemElement(el);
     };
@@ -8306,6 +9036,9 @@ const _MenuList = class extends FASTElement {
       this.setItems();
     }
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     Updates.enqueue(() => {
@@ -8313,21 +9046,37 @@ const _MenuList = class extends FASTElement {
     });
     this.addEventListener("change", this.changeHandler);
   }
+  /**
+   * @internal
+   */
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeItemListeners();
     this.menuItems = void 0;
     this.removeEventListener("change", this.changeHandler);
   }
+  /**
+   * Focuses the first item in the menu.
+   *
+   * @public
+   */
   focus() {
     this.setFocus(0, 1);
   }
+  /**
+   * Collapses any expanded menu items.
+   *
+   * @public
+   */
   collapseExpandedItem() {
     if (this.expandedItem !== null) {
       this.expandedItem.expanded = false;
       this.expandedItem = null;
     }
   }
+  /**
+   * @internal
+   */
   handleMenuKeyDown(e) {
     if (e.defaultPrevented || this.menuItems === void 0) {
       return;
@@ -8365,7 +9114,6 @@ const _MenuList = class extends FASTElement {
     return startSlot ? 1 : 0;
   }
   setItems() {
-    var _a;
     const children = Array.from(this.children);
     this.removeItemListeners(children);
     children.forEach(child => Observable.getNotifier(child).subscribe(this, "hidden"));
@@ -8380,9 +9128,9 @@ const _MenuList = class extends FASTElement {
       item.addEventListener("expanded-change", this.handleExpandedChanged);
       item.addEventListener("focus", this.handleItemFocus);
     });
-    const filteredMenuListItems = (_a = this.menuItems) == null ? void 0 : _a.filter(this.isMenuItemElement);
-    filteredMenuListItems == null ? void 0 : filteredMenuListItems.forEach((item, index) => {
-      const indent = filteredMenuListItems == null ? void 0 : filteredMenuListItems.reduce((accum, current) => {
+    const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
+    filteredMenuListItems?.forEach((item, index) => {
+      const indent = filteredMenuListItems?.reduce((accum, current) => {
         const elementValue = _MenuList.elementIndent(current);
         return Math.max(accum, elementValue);
       }, 0);
@@ -8415,9 +9163,9 @@ const _MenuList = class extends FASTElement {
     }
   }
 };
+_MenuList.focusableElementRoles = MenuItemRole;
+__decorateClass$c([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
-MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$c([observable], MenuList.prototype, "items", 2);
 
 function menuTemplate() {
   return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" role="menu" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
@@ -8461,6 +9209,9 @@ class BaseProgress extends FASTElement {
       this.updatePercentComplete();
     }
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     this.updatePercentComplete();
@@ -8567,26 +9318,36 @@ var __decorateClass$9 = (decorators, target, key, kind) => {
 class Radio extends FormAssociatedRadio {
   constructor() {
     super();
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
     this.initialValue = "on";
     this.proxy.setAttribute("type", "radio");
   }
   get radioGroup() {
     return this.closest("[role=radiogroup]");
   }
+  /**
+   * @internal
+   */
   defaultCheckedChanged() {
-    var _a;
     if (this.$fastController.isConnected && !this.dirtyChecked) {
       if (!this.isInsideRadioGroup()) {
-        this.checked = (_a = this.defaultChecked) != null ? _a : false;
+        this.checked = this.defaultChecked ?? false;
         this.dirtyChecked = false;
       }
     }
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
-    var _a, _b;
     super.connectedCallback();
     this.validate();
-    if (((_a = this.parentElement) == null ? void 0 : _a.getAttribute("role")) !== "radiogroup" && this.getAttribute("tabindex") === null) {
+    if (this.parentElement?.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
       }
@@ -8594,7 +9355,7 @@ class Radio extends FormAssociatedRadio {
     if (this.checkedAttribute) {
       if (!this.dirtyChecked) {
         if (!this.isInsideRadioGroup()) {
-          this.checked = (_b = this.defaultChecked) != null ? _b : false;
+          this.checked = this.defaultChecked ?? false;
           this.dirtyChecked = false;
         }
       }
@@ -8603,11 +9364,14 @@ class Radio extends FormAssociatedRadio {
   isInsideRadioGroup() {
     return this.radioGroup !== null;
   }
+  /**
+   * Handles key presses on the radio.
+   * @beta
+   */
   keypressHandler(e) {
-    var _a;
     switch (e.key) {
       case keySpace:
-        if (!this.checked && !((_a = this.radioGroup) == null ? void 0 : _a.readOnly)) {
+        if (!this.checked && !this.radioGroup?.readOnly) {
           this.checked = true;
         }
         return;
@@ -8625,10 +9389,7 @@ const styles$a = css`
     :host .control{border-color:InactiveBorder}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator{background-color:Highlight;border-color:ActiveBorder}`));
 
 function radioTemplate(options = {}) {
-  return html`<template role="radio" aria-checked="${x => x.checked}" aria-required="${x => x.required}" aria-disabled="${x => x.disabled}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><div part="control" class="control"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></div><label part="label" class="${x => {
-    var _a;
-    return ["label", !((_a = x.defaultSlottedNodes) == null ? void 0 : _a.length) && "label__hidden"].filter(Boolean).join(" ");
-  }}"><slot ${slotted({
+  return html`<template role="radio" aria-checked="${x => x.checked}" aria-required="${x => x.required}" aria-disabled="${x => x.disabled}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><div part="control" class="control"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></div><label part="label" class="${x => ["label", !x.defaultSlottedNodes?.length && "label__hidden"].filter(Boolean).join(" ")}"><slot ${slotted({
     property: "defaultSlottedNodes",
     filter: whitespaceFilter
   })}></slot></label></template>`;
@@ -8687,13 +9448,14 @@ class RadioGroup extends FASTElement {
       radio.focus();
     };
     this.moveRightOffGroup = () => {
-      var _a;
-      (_a = this.nextElementSibling) == null ? void 0 : _a.focus();
+      this.nextElementSibling?.focus();
     };
     this.moveLeftOffGroup = () => {
-      var _a;
-      (_a = this.previousElementSibling) == null ? void 0 : _a.focus();
+      this.previousElementSibling?.focus();
     };
+    /**
+     * @internal
+     */
     this.focusOutHandler = e => {
       const group = this.slottedRadioButtons;
       const radio = e.target;
@@ -8722,6 +9484,9 @@ class RadioGroup extends FASTElement {
       }
       return true;
     };
+    /**
+     * @internal
+     */
     this.handleDisabledClick = e => {
       if (this.disabled) {
         e.preventDefault();
@@ -8729,6 +9494,9 @@ class RadioGroup extends FASTElement {
       }
       return true;
     };
+    /**
+     * @internal
+     */
     this.clickHandler = e => {
       if (this.disabled) {
         return;
@@ -8806,6 +9574,12 @@ class RadioGroup extends FASTElement {
         }
       }
     };
+    /**
+     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+     * navigation is different when there is an ancestor with role='toolbar'
+     *
+     * @internal
+     */
     this.keydownHandler = e => {
       const key = e.key;
       if (key in ArrowKeys && (this.isInsideFoundationToolbar || this.disabled)) {
@@ -8873,13 +9647,14 @@ class RadioGroup extends FASTElement {
     return this.closest('[role="toolbar"]');
   }
   get isInsideToolbar() {
-    var _a;
-    return (_a = this.parentToolbar) != null ? _a : false;
+    return this.parentToolbar ?? false;
   }
   get isInsideFoundationToolbar() {
-    var _a;
-    return !!((_a = this.parentToolbar) == null ? void 0 : _a.hasOwnProperty("$fastController"));
+    return !!this.parentToolbar?.hasOwnProperty("$fastController");
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     this.direction = getDirection(this);
@@ -9059,6 +9834,7 @@ class Slider extends FormAssociatedSlider {
         this.trackWidth = 1;
       }
     };
+    //Remove
     this.setupListeners = (remove = false) => {
       this.addEventListener("keydown", this.keypressHandler);
       this.addEventListener("mousedown", this.handleMouseDown);
@@ -9067,7 +9843,14 @@ class Slider extends FormAssociatedSlider {
         this.removeEventListener("mousedown", this.handleMouseDown);
       }
     };
+    /**
+     * @internal
+     */
     this.initialValue = "";
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
+     */
     this.handleThumbMouseDown = event => {
       const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
       windowFn("mouseup", this.handleWindowMouseUp);
@@ -9080,6 +9863,9 @@ class Slider extends FormAssociatedSlider {
       windowFn("touchend", this.handleWindowMouseUp);
       this.isDragging = event !== null;
     };
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
     this.handleMouseMove = e => {
       if (this.readOnly || this.disabled || e.defaultPrevented) {
         return;
@@ -9088,6 +9874,9 @@ class Slider extends FormAssociatedSlider {
       const eventValue = this.orientation === Orientation.horizontal ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft : sourceEvent.pageY - document.documentElement.scrollTop;
       this.value = `${this.calculateNewValue(eventValue)}`;
     };
+    /**
+     * Handle a window mouse up during a drag operation
+     */
     this.handleWindowMouseUp = event => {
       this.stopDragging();
     };
@@ -9096,6 +9885,10 @@ class Slider extends FormAssociatedSlider {
       this.handleMouseDown(null);
       this.handleThumbMouseDown(null);
     };
+    /**
+     *
+     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     */
     this.handleMouseDown = e => {
       if (e === null || !this.disabled && !this.readOnly) {
         const windowFn = e !== null ? window.addEventListener : window.removeEventListener;
@@ -9120,6 +9913,10 @@ class Slider extends FormAssociatedSlider {
         break;
     }
   }
+  /**
+   * Handles changes to step styling based on the step value
+   * NOTE: This function is not a changed callback, stepStyles is not observable
+   */
   handleStepStyles() {
     if (this.step) {
       const totalSteps = 100 / Math.floor((this.max - this.min) / this.step);
@@ -9133,17 +9930,26 @@ class Slider extends FormAssociatedSlider {
       this.$fastController.removeStyles(this.stepStyles);
     }
   }
+  // Map to proxy element
   readOnlyChanged() {
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
   }
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
   get valueAsNumber() {
     return parseFloat(super.value);
   }
   set valueAsNumber(next) {
     this.value = next.toString();
   }
+  /**
+   * @internal
+   */
   valueChanged(previous, next) {
     if (this.$fastController.isConnected) {
       const nextAsNumber = parseFloat(next);
@@ -9157,12 +9963,14 @@ class Slider extends FormAssociatedSlider {
       this.$emit("change");
     }
   }
+  // Map to proxy element.
   minChanged() {
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.min = `${this.min}`;
     }
     this.validate();
   }
+  // Map to proxy element.
   maxChanged() {
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.max = `${this.max}`;
@@ -9181,6 +9989,9 @@ class Slider extends FormAssociatedSlider {
       this.setThumbPositionForOrientation(this.direction);
     }
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     this.proxy.setAttribute("type", "range");
@@ -9195,6 +10006,9 @@ class Slider extends FormAssociatedSlider {
     Observable.getNotifier(this).subscribe(this, "step");
     this.handleStepStyles();
   }
+  /**
+   * @internal
+   */
   disconnectedCallback() {
     super.disconnectedCallback();
     this.setupListeners(true);
@@ -9202,21 +10016,41 @@ class Slider extends FormAssociatedSlider {
     Observable.getNotifier(this).unsubscribe(this, "min");
     Observable.getNotifier(this).unsubscribe(this, "step");
   }
+  /**
+   * Increment the value by the step
+   *
+   * @public
+   */
   increment() {
     const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.stepValue) : Number(this.value) + Number(this.stepValue);
     const incrementedVal = this.convertToConstrainedValue(newVal);
     const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
     this.value = incrementedValString;
   }
+  /**
+   * Decrement the value by the step
+   *
+   * @public
+   */
   decrement() {
     const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.stepValue) : Number(this.value) - Number(this.stepValue);
     const decrementedVal = this.convertToConstrainedValue(newVal);
     const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
     this.value = decrementedValString;
   }
+  /**
+   * Gets the actual step value for the slider
+   *
+   */
   get stepValue() {
     return this.step === void 0 ? 1 : this.step;
   }
+  /**
+   * Places the thumb based on the current value
+   *
+   * @public
+   * @param direction - writing mode
+   */
   setThumbPositionForOrientation(direction) {
     const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
     const percentage = (1 - newPct) * 100;
@@ -9226,6 +10060,10 @@ class Slider extends FormAssociatedSlider {
       this.position = this.isDragging ? `top: ${percentage}%; transition: none;` : `top: ${percentage}%; transition: all 0.2s ease;`;
     }
   }
+  /**
+   * Update the step multiplier used to ensure rounding errors from steps that
+   * are not whole numbers
+   */
   updateStepMultiplier() {
     const stepString = this.stepValue + "";
     const decimalPlacesOfStep = !!(this.stepValue % 1) ? stepString.length - stepString.indexOf(".") - 1 : 0;
@@ -9246,6 +10084,14 @@ class Slider extends FormAssociatedSlider {
       }
     }
   }
+  /**
+   * Calculate the new value based on the given raw pixel value.
+   *
+   * @param rawValue - the value to be converted to a constrained value
+   * @returns the constrained value
+   *
+   * @internal
+   */
   calculateNewValue(rawValue) {
     this.setupTrackConstraints();
     const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.horizontal ? this.trackMinWidth : this.trackMinHeight, this.orientation === Orientation.horizontal ? this.trackWidth : this.trackHeight, this.direction);
@@ -9316,7 +10162,18 @@ var __decorateClass$6 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$6(target, key, result);
   return result;
 };
-class Spinner extends BaseProgress {}
+class Spinner extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "progressbar";
+  }
+}
 __decorateClass$6([attr], Spinner.prototype, "size", 2);
 __decorateClass$6([attr], Spinner.prototype, "appearance", 2);
 
@@ -9334,35 +10191,12 @@ const SpinnerSize = {
   huge: "huge"
 };
 
-const progressSegments = 44;
-function progressRingTemplate(options = {}) {
-  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`, html`<slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator)}</slot>`)}</template>`;
-}
-const template$7 = progressRingTemplate({
-  indeterminateIndicator: `
-    <svg class="progress" part="progress" viewBox="0 0 16 16">
-        <circle
-            class="background"
-            part="background"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-        <circle
-            class="indeterminate-indicator-1"
-            part="indeterminate-indicator-1"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-    </svg>
-  `
-});
+const template$7 = html`<slot name="indicator"><svg class="progress" part="progress" viewBox="0 0 16 16"><circle class="background" cx="8px" cy="8px" r="7px"></circle><circle class="indicator" cx="8px" cy="8px" r="7px"></circle></svg></slot>`;
 
 const styles$7 = css`
   ${display("flex")}
 
-  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host([size='tiny']){height:20px;width:20px}:host([size='extra-small']){height:24px;width:24px}:host([size='small']){height:28px;width:28px}:host([size='large']){height:36px;width:36px}:host([size='extra-large']){height:40px;width:40px}:host([size='huge']){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.determinate{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}:host([appearance='inverted']) .determinite{stroke:${colorNeutralStrokeOnBrand2}}.indeterminate-indicator-1{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host([appearance='inverted']) .indeterminate-indicator-1{stroke:${colorNeutralStrokeOnBrand2}}@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)}}`;
+  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host([size='tiny']){height:20px;width:20px}:host([size='extra-small']){height:24px;width:24px}:host([size='small']){height:28px;width:28px}:host([size='large']){height:36px;width:36px}:host([size='extra-large']){height:40px;width:40px}:host([size='huge']){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.indicator{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host([appearance='inverted']) .indicator{stroke:${colorNeutralStrokeOnBrand2}}@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)}}`;
 
 const definition$7 = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,
@@ -9389,7 +10223,16 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
 class Switch extends FormAssociatedSwitch {
   constructor() {
     super();
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
     this.initialValue = "on";
+    /**
+     * @internal
+     */
     this.keypressHandler = e => {
       if (this.readOnly) {
         return;
@@ -9401,6 +10244,9 @@ class Switch extends FormAssociatedSwitch {
           break;
       }
     };
+    /**
+     * @internal
+     */
     this.clickHandler = e => {
       if (!this.disabled && !this.readOnly) {
         this.checked = !this.checked;
@@ -9408,6 +10254,7 @@ class Switch extends FormAssociatedSwitch {
     };
     this.proxy.setAttribute("type", "checkbox");
   }
+  // Map to proxy element
   readOnlyChanged() {
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
@@ -9588,17 +10435,26 @@ class BaseTabs extends FASTElement {
       }
     };
   }
+  /**
+   * @internal
+   */
   orientationChanged() {
     if (this.$fastController.isConnected) {
       this.setTabs();
     }
   }
+  /**
+   * @internal
+   */
   activeidChanged(oldValue, newValue) {
     if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
       this.prevActiveTabIndex = this.tabs.findIndex(item => item.id === oldValue);
       this.setTabs();
     }
   }
+  /**
+   * @internal
+   */
   tabsChanged() {
     if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
       this.tabIds = this.getTabIds();
@@ -9606,6 +10462,9 @@ class BaseTabs extends FASTElement {
       this.setTabs();
     }
   }
+  /**
+   * @internal
+   */
   tabpanelsChanged() {
     if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
       this.tabIds = this.getTabIds();
@@ -9621,6 +10480,11 @@ class BaseTabs extends FASTElement {
       return 0;
     }
   }
+  /**
+   * Function that is invoked whenever the selected tab or the tab collection changes.
+   *
+   * @public
+   */
   setTabs() {
     const gridHorizontalProperty = "gridColumn";
     const gridVerticalProperty = "gridRow";
@@ -9660,14 +10524,12 @@ class BaseTabs extends FASTElement {
   }
   getTabIds() {
     return this.tabs.map(tab => {
-      var _a;
-      return (_a = tab.getAttribute("id")) != null ? _a : `tab-${uniqueId()}`;
+      return tab.getAttribute("id") ?? `tab-${uniqueId()}`;
     });
   }
   getTabPanelIds() {
     return this.tabpanels.map(tabPanel => {
-      var _a;
-      return (_a = tabPanel.getAttribute("id")) != null ? _a : `panel-${uniqueId()}`;
+      return tabPanel.getAttribute("id") ?? `panel-${uniqueId()}`;
     });
   }
   setComponent() {
@@ -9680,6 +10542,12 @@ class BaseTabs extends FASTElement {
   isHorizontal() {
     return this.orientation === TabsOrientation.horizontal;
   }
+  /**
+   * The adjust method for FASTTabs
+   * @public
+   * @remarks
+   * This method allows the active index to be adjusted by numerical increments
+   */
   adjust(adjustment) {
     const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
     const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
@@ -9736,6 +10604,9 @@ class BaseTabs extends FASTElement {
   focusTab() {
     this.tabs[this.activeTabIndex].focus();
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     this.tabIds = this.getTabIds();
@@ -9750,41 +10621,80 @@ __decorateClass$3([observable], BaseTabs.prototype, "tabpanels", 2);
 class Tabs extends BaseTabs {
   constructor() {
     super(...arguments);
+    /**
+     * activeTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
     this.activeTabData = {
       x: 0,
       y: 0,
       height: 0,
       width: 0
     };
+    /**
+     * previousActiveTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
     this.previousActiveTabData = {
       x: 0,
       y: 0,
       height: 0,
       width: 0
     };
+    /**
+     * activeTabOffset
+     * Used to position the active indicator for animations of the active indicator on active tab changes.
+     */
     this.activeTabOffset = 0;
+    /**
+     * activeTabScale
+     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
+     */
     this.activeTabScale = 1;
     this.appearance = TabsAppearance.transparent;
   }
+  /**
+   * calculateAnimationProperties
+   *
+   * Recalculates the active tab offset and scale.
+   * These values will be applied to css variables that control the tab active indicator position animations
+   */
   calculateAnimationProperties(tab) {
     this.activeTabOffset = this.getTabPosition(tab);
     this.activeTabScale = this.getTabScale(tab);
   }
+  /**
+   * getSelectedTabPosition - gets the x or y coordinates of the tab
+   */
   getTabPosition(tab) {
     if (this.orientation === TabsOrientation.horizontal) {
       return this.previousActiveTabData.x - (tab.getBoundingClientRect().x - this.getBoundingClientRect().x);
     } else return this.previousActiveTabData.y - (tab.getBoundingClientRect().y - this.getBoundingClientRect().y);
   }
+  /**
+   * getSelectedTabScale - gets the scale of the tab
+   */
   getTabScale(tab) {
     if (this.orientation === TabsOrientation.horizontal) {
       return this.previousActiveTabData.width / tab.getBoundingClientRect().width;
     } else return this.previousActiveTabData.height / tab.getBoundingClientRect().height;
   }
+  /**
+   * applyUpdatedCSSValues
+   *
+   * calculates and applies updated values to CSS variables
+   * @param tab
+   */
   applyUpdatedCSSValues(tab) {
     this.calculateAnimationProperties(tab);
     this.setTabScaleCSSVar();
     this.setTabOffsetCSSVar();
   }
+  /**
+   * animationLoop
+   * runs through all the operations required for setting the tab active indicator to its starting location, ending location, and applying the animated css class to the tab.
+   * @param tab
+   */
   animationLoop(tab) {
     tab.setAttribute("data-animate", "false");
     this.applyUpdatedCSSValues(tab);
@@ -9792,12 +10702,15 @@ class Tabs extends BaseTabs {
     this.applyUpdatedCSSValues(tab);
     tab.setAttribute("data-animate", "true");
   }
+  /**
+   * setTabData
+   * sets the data from the active tab onto the class. used for making all the animation calculations for the active tab indicator.
+   */
   setTabData() {
-    var _a, _b, _c, _d;
     if (this.tabs && this.tabs.length > 0) {
       const tabs = this.tabs;
       const activeTab = this.activetab || tabs[0];
-      const activeRect = activeTab == null ? void 0 : activeTab.getBoundingClientRect();
+      const activeRect = activeTab?.getBoundingClientRect();
       const parentRect = this.getBoundingClientRect();
       this.activeTabData = {
         x: activeRect.x - parentRect.x,
@@ -9805,7 +10718,7 @@ class Tabs extends BaseTabs {
         height: activeRect.height,
         width: activeRect.width
       };
-      if (((_a = this.previousActiveTabData) == null ? void 0 : _a.x) !== ((_b = this.activeTabData) == null ? void 0 : _b.x) && ((_c = this.previousActiveTabData) == null ? void 0 : _c.y) !== ((_d = this.activeTabData) == null ? void 0 : _d.y)) {
+      if (this.previousActiveTabData?.x !== this.activeTabData?.x && this.previousActiveTabData?.y !== this.activeTabData?.y) {
         this.previousActiveTabData = this.activeTabData;
       }
     }
@@ -9952,10 +10865,25 @@ const TextInputAppearance = {
   filledDarker: "filled-darker"
 };
 const TextInputType = {
+  /**
+   * An email TextInput
+   */
   email: "email",
+  /**
+   * A password TextInput
+   */
   password: "password",
+  /**
+   * A telephone TextInput
+   */
   tel: "tel",
+  /**
+   * A text TextInput
+   */
   text: "text",
+  /**
+   * A URL TextInput
+   */
   url: "url"
 };
 
@@ -10037,6 +10965,9 @@ class TextInput extends FormAssociatedTextField {
       this.proxy.spellcheck = this.spellcheck;
     }
   }
+  /**
+   * @internal
+   */
   connectedCallback() {
     super.connectedCallback();
     this.proxy.setAttribute("type", this.type);
@@ -10047,16 +10978,35 @@ class TextInput extends FormAssociatedTextField {
       });
     }
   }
+  /**
+   * Selects all the text in the text field
+   *
+   * @public
+   */
   select() {
     this.control.select();
     this.$emit("select");
   }
+  /**
+   * Handles the internal control's `input` event
+   * @internal
+   */
   handleTextInput() {
     this.value = this.control.value;
   }
+  /**
+   * Change event handler for inner control.
+   * @remarks
+   * "Change" events are not `composable` so they will not
+   * permeate the shadow DOM boundary. This fn effectively proxies
+   * the change event, emitting a `change` event whenever the internal
+   * control emits a `change` event
+   * @internal
+   */
   handleChange() {
     this.$emit("change");
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
   validate() {
     super.validate(this.control);
   }
@@ -10121,12 +11071,29 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class ToggleButton extends Button {
+  /**
+   * Updates the pressed state when the `pressed` property changes.
+   *
+   * @internal
+   */
   pressedChanged() {
     this.setPressedState();
   }
+  /**
+   * Updates the pressed state when the `mixed` property changes.
+   *
+   * @param previous - the previous mixed state
+   * @param next - the current mixed state
+   * @internal
+   */
   mixedChanged() {
     this.setPressedState();
   }
+  /**
+   * Toggles the pressed state of the button.
+   *
+   * @override
+   */
   press() {
     this.pressed = !this.pressed;
   }
@@ -10134,6 +11101,11 @@ class ToggleButton extends Button {
     super.connectedCallback();
     this.setPressedState();
   }
+  /**
+   * Sets the `aria-pressed` attribute based on the `pressed` and `mixed` properties.
+   *
+   * @internal
+   */
   setPressedState() {
     if (this.$fastController.isConnected) {
       const ariaPressed = `${this.mixed ? "mixed" : !!this.pressed}`;
@@ -10179,4 +11151,4 @@ const setThemeFor = (element, theme) => {
   }
 };
 
-export { Accordion, AccordionExpandMode, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$q as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$q as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$p as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$o as AvatarStyles, template$p as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$o as BadgeDefinition, BadgeShape, BadgeSize, styles$n as BadgeStyles, template$o as BadgeTemplate, Button, ButtonAppearance, definition$n as ButtonDefinition, ButtonShape, ButtonSize, styles$m as ButtonStyles, template$n as ButtonTemplate, ButtonType, Checkbox, definition$m as CheckboxDefinition, CheckboxLabelPosition, CheckboxShape, CheckboxSize, styles$l as CheckboxStyles, template$m as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$l as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$k as CompoundButtonStyles, template$l as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$k as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$j as CounterBadgeStyles, template$k as CounterBadgeTemplate, Dialog, definition$j as DialogDefinition, DialogModalType, styles$i as DialogStyles, template$j as DialogTemplate, Divider, DividerAlignContent, DividerAppearance, definition$i as DividerDefinition, DividerOrientation, DividerRole, styles$h as DividerStyles, template$i as DividerTemplate, FluentDesignSystem, Image, definition$h as ImageDefinition, ImageFit, ImageShape, styles$g as ImageStyles, template$h as ImageTemplate, Label, definition$g as LabelDefinition, LabelSize, styles$f as LabelStyles, template$g as LabelTemplate, LabelWeight, Menu, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$m as MenuButtonStyles, template$e as MenuButtonTemplate, definition$f as MenuDefinition, MenuItem, definition$d as MenuItemDefinition, MenuItemRole, styles$d as MenuItemStyles, template$d as MenuItemTemplate, MenuList, definition$c as MenuListDefinition, styles$c as MenuListStyles, template$c as MenuListTemplate, styles$e as MenuStyles, template$f as MenuTemplate, ProgressBar, definition$b as ProgressBarDefinition, ProgressBarShape, styles$b as ProgressBarStyles, template$b as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$a as RadioDefinition, RadioGroup, definition$9 as RadioGroupDefinition, RadioGroupOrientation, styles$9 as RadioGroupStyles, template$9 as RadioGroupTemplate, styles$a as RadioStyles, template$a as RadioTemplate, Slider, definition$8 as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$8 as SliderStyles, template$8 as SliderTemplate, Spinner, SpinnerAppearance, definition$7 as SpinnerDefinition, SpinnerSize, styles$7 as SpinnerStyles, template$7 as SpinnerTemplate, Switch, definition$6 as SwitchDefinition, SwitchLabelPosition, styles$6 as SwitchStyles, template$6 as SwitchTemplate, Tab, definition$5 as TabDefinition, TabPanel, definition$4 as TabPanelDefinition, styles$4 as TabPanelStyles, template$4 as TabPanelTemplate, styles$5 as TabStyles, template$5 as TabTemplate, Tabs, TabsAppearance, definition$3 as TabsDefinition, TabsOrientation, TabsSize, styles$3 as TabsStyles, template$3 as TabsTemplate, Text, TextAlign, definition$2 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$1 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextInputType, TextSize, styles$2 as TextStyles, template$2 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$s as accordionDefinition, definition$r as accordionItemDefinition, styles$q as accordionItemStyles, template$r as accordionItemTemplate, styles$r as accordionStyles, template$s as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, darkModeStylesheetBehavior, display, durationFast, durationFaster, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, forcedColorsStylesheetBehavior, getDirection, lightModeStylesheetBehavior, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, roleForMenuItem, setTheme, setThemeFor, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin };
+export { Accordion, AccordionExpandMode, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$q as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$q as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$p as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$o as AvatarStyles, template$p as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$o as BadgeDefinition, BadgeShape, BadgeSize, styles$n as BadgeStyles, template$o as BadgeTemplate, Button, ButtonAppearance, definition$n as ButtonDefinition, ButtonShape, ButtonSize, styles$m as ButtonStyles, template$n as ButtonTemplate, ButtonType, Checkbox, definition$m as CheckboxDefinition, CheckboxLabelPosition, CheckboxShape, CheckboxSize, styles$l as CheckboxStyles, template$m as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$l as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$k as CompoundButtonStyles, template$l as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$k as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$j as CounterBadgeStyles, template$k as CounterBadgeTemplate, Dialog, definition$j as DialogDefinition, DialogModalType, styles$i as DialogStyles, template$j as DialogTemplate, Divider, DividerAlignContent, DividerAppearance, definition$i as DividerDefinition, DividerOrientation, DividerRole, styles$h as DividerStyles, template$i as DividerTemplate, FluentDesignSystem, Image, definition$h as ImageDefinition, ImageFit, ImageShape, styles$g as ImageStyles, template$h as ImageTemplate, Label, definition$g as LabelDefinition, LabelSize, styles$f as LabelStyles, template$g as LabelTemplate, LabelWeight, Menu, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$m as MenuButtonStyles, template$e as MenuButtonTemplate, definition$f as MenuDefinition, MenuItem, definition$d as MenuItemDefinition, MenuItemRole, styles$d as MenuItemStyles, template$d as MenuItemTemplate, MenuList, definition$c as MenuListDefinition, styles$c as MenuListStyles, template$c as MenuListTemplate, styles$e as MenuStyles, template$f as MenuTemplate, ProgressBar, definition$b as ProgressBarDefinition, ProgressBarShape, styles$b as ProgressBarStyles, template$b as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$a as RadioDefinition, RadioGroup, definition$9 as RadioGroupDefinition, RadioGroupOrientation, styles$9 as RadioGroupStyles, template$9 as RadioGroupTemplate, styles$a as RadioStyles, template$a as RadioTemplate, Slider, definition$8 as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$8 as SliderStyles, template$8 as SliderTemplate, Spinner, SpinnerAppearance, definition$7 as SpinnerDefinition, SpinnerSize, styles$7 as SpinnerStyles, template$7 as SpinnerTemplate, Switch, definition$6 as SwitchDefinition, SwitchLabelPosition, styles$6 as SwitchStyles, template$6 as SwitchTemplate, Tab, definition$5 as TabDefinition, TabPanel, definition$4 as TabPanelDefinition, styles$4 as TabPanelStyles, template$4 as TabPanelTemplate, styles$5 as TabStyles, template$5 as TabTemplate, Tabs, TabsAppearance, definition$3 as TabsDefinition, TabsOrientation, TabsSize, styles$3 as TabsStyles, template$3 as TabsTemplate, Text, TextAlign, definition$2 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$1 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextInputType, TextSize, styles$2 as TextStyles, template$2 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$s as accordionDefinition, definition$r as accordionItemDefinition, styles$q as accordionItemStyles, template$r as accordionItemTemplate, styles$r as accordionStyles, template$s as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackground2Hover, colorBrandBackground2Pressed, colorBrandBackground3Static, colorBrandBackground4Static, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForeground2Hover, colorBrandForeground2Pressed, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorBrandStroke2Contrast, colorBrandStroke2Hover, colorBrandStroke2Pressed, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundAlpha, colorNeutralBackgroundAlpha2, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralCardBackground, colorNeutralCardBackgroundDisabled, colorNeutralCardBackgroundHover, colorNeutralCardBackgroundPressed, colorNeutralCardBackgroundSelected, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeAlpha, colorNeutralStrokeAlpha2, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorNeutralStrokeSubtle, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStatusDangerBackground1, colorStatusDangerBackground2, colorStatusDangerBackground3, colorStatusDangerBackground3Hover, colorStatusDangerBackground3Pressed, colorStatusDangerBorder1, colorStatusDangerBorder2, colorStatusDangerBorderActive, colorStatusDangerForeground1, colorStatusDangerForeground2, colorStatusDangerForeground3, colorStatusDangerForegroundInverted, colorStatusSuccessBackground1, colorStatusSuccessBackground2, colorStatusSuccessBackground3, colorStatusSuccessBorder1, colorStatusSuccessBorder2, colorStatusSuccessBorderActive, colorStatusSuccessForeground1, colorStatusSuccessForeground2, colorStatusSuccessForeground3, colorStatusSuccessForegroundInverted, colorStatusWarningBackground1, colorStatusWarningBackground2, colorStatusWarningBackground3, colorStatusWarningBorder1, colorStatusWarningBorder2, colorStatusWarningBorderActive, colorStatusWarningForeground1, colorStatusWarningForeground2, colorStatusWarningForeground3, colorStatusWarningForegroundInverted, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, darkModeStylesheetBehavior, display, durationFast, durationFaster, durationGentle, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, forcedColorsStylesheetBehavior, getDirection, lightModeStylesheetBehavior, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, roleForMenuItem, setTheme, setThemeFor, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin };