@fluentui/web-components 3.0.0-beta.28 → 3.0.0-beta.29

package/dist/web-components.js

@@ -3401,70 +3401,70 @@ function uniqueId(prefix = "") {
   return `${prefix}${uniqueIdCounter++}`;
 }
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$r([attr({
+__decorateClass$s([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -3633,12 +3633,12 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 class AccordionItem extends FASTElement {
@@ -3660,23 +3660,23 @@ class AccordionItem extends FASTElement {
     };
   }
 }
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], AccordionItem.prototype, "headinglevel", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "expanded", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "disabled", 2);
-__decorateClass$q([attr], AccordionItem.prototype, "id", 2);
-__decorateClass$q([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr], AccordionItem.prototype, "id", 2);
+__decorateClass$r([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$r([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "expand-icon-position"
 })], AccordionItem.prototype, "expandIconPosition", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -3696,6 +3696,12 @@ const colorNeutralForeground3Hover = "var(--colorNeutralForeground3Hover)";
 const colorNeutralForeground3Pressed = "var(--colorNeutralForeground3Pressed)";
 const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
 const colorNeutralForegroundDisabled = "var(--colorNeutralForegroundDisabled)";
+const colorBrandForegroundLink = "var(--colorBrandForegroundLink)";
+const colorBrandForegroundLinkHover = "var(--colorBrandForegroundLinkHover)";
+const colorBrandForegroundLinkPressed = "var(--colorBrandForegroundLinkPressed)";
+const colorNeutralForeground2Link = "var(--colorNeutralForeground2Link)";
+const colorNeutralForeground2LinkHover = "var(--colorNeutralForeground2LinkHover)";
+const colorNeutralForeground2LinkPressed = "var(--colorNeutralForeground2LinkPressed)";
 const colorCompoundBrandForeground1 = "var(--colorCompoundBrandForeground1)";
 const colorCompoundBrandForeground1Hover = "var(--colorCompoundBrandForeground1Hover)";
 const colorCompoundBrandForeground1Pressed = "var(--colorCompoundBrandForeground1Pressed)";
@@ -3910,7 +3916,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$t = css`
+const styles$u = css`
   ${display("block")}
 
   :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;vertical-align:middle;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.heading-content{height:100%;display:flex;align-items:center}.button{box-sizing:border-box;appearance:none;border:none;outline:none;text-align:start;cursor:pointer;font-family:inherit;height:44px;color:${colorNeutralForeground1};background:${colorTransparentBackground};line-height:${lineHeightBase300};height:auto;padding:0;font-size:inherit;grid-column:auto / span 2;grid-row:1}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}.icon{display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-right:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.region{margin:0 ${spacingHorizontalM}}::slotted([slot='start']),::slotted([slot='end']){justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1 / span 1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .region{display:block}:host([expanded]) .default-collapsed-icon,:host([expanded]) ::slotted([slot='collapsed-icon']),:host(:not([expanded])) .default-expanded-icon,:host(:not([expanded])) ::slotted([slot='expanded-icon']),:host([expanded]) ::slotted([slot='end']),::slotted([slot='start']),.region{display:none}:host([expanded]) ::slotted([slot='start']),:host([expanded]) ::slotted([slot='expanded-icon']),:host(:not([expanded])) ::slotted([slot='collapsed-icon']),::slotted([slot='end']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([expand-icon-position='end']) :slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) ::slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) .icon{grid-column:4 / span 1;grid-row:1;display:flex;padding-left:10px;padding-right:0}:host([expand-icon-position='end']) .button{grid-column:2 / span 3;grid-row:1}:host([block]){max-width:100%}:host([expand-icon-position='end']) .heading{grid-template-columns:auto auto 28px}:host([expand-icon-position='end']) .icon{grid-column:5 / span 1}:host([block][expand-icon-position='end']) .heading{grid-template-columns:auto 1fr}:host([block][expand-icon-position='end']) .icon{grid-column:5 / span 1}`;
@@ -3944,30 +3950,30 @@ const chevronDown20Filled = html.partial(`<svg
 function accordionItemTemplate(options = {}) {
   return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}" @click="${(x, c) => x.clickHandler(c.event)}"><span class="heading-content" part="heading-content"><slot name="heading"></slot></span></button>${startSlotTemplate(options)} ${endSlotTemplate(options)}<span class="icon" part="icon" aria-hidden="true"><slot name="expanded-icon">${staticallyCompose(options.expandedIcon)}</slot><slot name="collapsed-icon">${staticallyCompose(options.collapsedIcon)}</slot><span></div><div class="region" part="region" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
-const template$u = accordionItemTemplate({
+const template$v = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$u = AccordionItem.compose({
+const definition$v = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$u,
-  styles: styles$t
+  template: template$v,
+  styles: styles$u
 });
 
-definition$u.define(FluentDesignSystem.registry);
+definition$v.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
   multi: "multi"
 };
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -4145,12 +4151,12 @@ class Accordion extends FASTElement {
     }
   }
 }
-__decorateClass$p([attr({
+__decorateClass$q([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$p([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$q([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$s = css`
+const styles$t = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -4161,15 +4167,15 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$t = accordionTemplate();
+const template$u = accordionTemplate();
 
-const definition$t = Accordion.compose({
+const definition$u = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$t,
-  styles: styles$s
+  template: template$u,
+  styles: styles$t
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
 
 const ButtonType = {
   submit: "submit",
@@ -4188,15 +4194,15 @@ const AnchorAttributes = {
   type: "type"
 };
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
-class AnchorButton extends FASTElement {
+class BaseAnchor extends FASTElement {
   constructor() {
     super();
     /**
@@ -4210,7 +4216,6 @@ class AnchorButton extends FASTElement {
      * @internal
      */
     this.internalProxyAnchor = this.createProxyElement();
-    this.iconOnly = false;
     this.elementInternals.role = "link";
   }
   connectedCallback() {
@@ -4228,8 +4233,8 @@ class AnchorButton extends FASTElement {
   /**
    * Handles changes to observable properties
    * @internal
-   * @param source
-   * @param propertyName
+   * @param source - the source of the change
+   * @param propertyName - the property name being changed
    */
   handleChange(source, propertyName) {
     if (propertyName in AnchorAttributes) {
@@ -4266,8 +4271,8 @@ class AnchorButton extends FASTElement {
   /**
    * A method for updating proxy attributes when attributes have changed
    * @internal
-   * @param attribute
-   * @param value
+   * @param attribute - an attribute to set/remove
+   * @param value - the value of the attribute
    */
   handleProxyAttributeChange(attribute, value) {
     if (value) {
@@ -4282,18 +4287,24 @@ class AnchorButton extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$o([attr], AnchorButton.prototype, "download", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "href", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "hreflang", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "ping", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "referrerpolicy", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "rel", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "target", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "type", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$o([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$o([attr({
+__decorateClass$p([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "type", 2);
+class AnchorButton extends BaseAnchor {
+  constructor() {
+    super(...arguments);
+    this.iconOnly = false;
+  }
+}
+__decorateClass$p([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$p([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -4303,27 +4314,27 @@ const baseButtonStyles = 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([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}: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([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}`;
-const styles$r = css`
+const styles$s = css`
   ${baseButtonStyles}
 
   :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}:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover:active){border-color:transparent}:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{background:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight}`));
 
-const styles$q = baseButtonStyles.withBehaviors(forcedColorsStylesheetBehavior(css`
+const styles$r = baseButtonStyles.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:LinkText;color:LinkText}`));
 
-function anchorTemplate(options = {}) {
+function anchorTemplate$1(options = {}) {
   return html`<template tabindex="0" @click="${x => x.clickHandler()}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$s = anchorTemplate();
+const template$t = anchorTemplate$1();
 
-const definition$s = AnchorButton.compose({
+const definition$t = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$s,
-  styles: styles$q
+  template: template$t,
+  styles: styles$r
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$t.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -4405,12 +4416,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 const _Avatar = class _Avatar extends FASTElement {
@@ -4446,16 +4457,16 @@ const _Avatar = class _Avatar extends FASTElement {
  * 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({
+__decorateClass$o([attr], _Avatar.prototype, "name", 2);
+__decorateClass$o([attr], _Avatar.prototype, "initials", 2);
+__decorateClass$o([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);
-__decorateClass$n([attr({
+__decorateClass$o([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$o([attr], _Avatar.prototype, "active", 2);
+__decorateClass$o([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$o([attr], _Avatar.prototype, "color", 2);
+__decorateClass$o([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -4480,22 +4491,22 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$p = css`
+const styles$q = css`
   ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
 function avatarTemplate() {
   return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
 }
-const template$r = avatarTemplate();
+const template$s = avatarTemplate();
 
-const definition$r = Avatar.compose({
+const definition$s = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$r,
-  styles: styles$p
+  template: template$s,
+  styles: styles$q
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$s.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -4514,12 +4525,12 @@ const BadgeColor = {
   warning: "warning"
 };
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -4529,10 +4540,10 @@ class Badge extends FASTElement {
     this.color = BadgeColor.brand;
   }
 }
-__decorateClass$m([attr], Badge.prototype, "appearance", 2);
-__decorateClass$m([attr], Badge.prototype, "color", 2);
-__decorateClass$m([attr], Badge.prototype, "shape", 2);
-__decorateClass$m([attr], Badge.prototype, "size", 2);
+__decorateClass$n([attr], Badge.prototype, "appearance", 2);
+__decorateClass$n([attr], Badge.prototype, "color", 2);
+__decorateClass$n([attr], Badge.prototype, "shape", 2);
+__decorateClass$n([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const textPadding = spacingHorizontalXXS;
@@ -4887,7 +4898,7 @@ css.partial`
   font-weight: ${fontWeightSemibold};
 `;
 
-const styles$o = css`
+const styles$p = css`
   :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -4900,22 +4911,22 @@ const styles$o = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$q = badgeTemplate();
+const template$r = badgeTemplate();
 
-const definition$q = Badge.compose({
+const definition$r = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$q,
-  styles: styles$o
+  template: template$r,
+  styles: styles$p
 });
 
-definition$q.define(FluentDesignSystem.registry);
+definition$r.define(FluentDesignSystem.registry);
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 class Button extends FASTElement {
@@ -5119,60 +5130,60 @@ class Button extends FASTElement {
  * @public
  */
 Button.formAssociated = true;
-__decorateClass$l([attr], Button.prototype, "appearance", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr], Button.prototype, "appearance", 2);
+__decorateClass$m([attr({
   mode: "boolean"
 })], Button.prototype, "autofocus", 2);
-__decorateClass$l([observable], Button.prototype, "defaultSlottedContent", 2);
-__decorateClass$l([attr({
+__decorateClass$m([observable], Button.prototype, "defaultSlottedContent", 2);
+__decorateClass$m([attr({
   mode: "boolean"
 })], Button.prototype, "disabled", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], Button.prototype, "disabledFocusable", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "formaction"
 })], Button.prototype, "formAction", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "form"
 })], Button.prototype, "formAttribute", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "formenctype"
 })], Button.prototype, "formEnctype", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "formmethod"
 })], Button.prototype, "formMethod", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], Button.prototype, "formNoValidate", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "formtarget"
 })], Button.prototype, "formTarget", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
-__decorateClass$l([attr], Button.prototype, "name", 2);
-__decorateClass$l([attr], Button.prototype, "shape", 2);
-__decorateClass$l([attr], Button.prototype, "size", 2);
-__decorateClass$l([attr], Button.prototype, "type", 2);
-__decorateClass$l([attr], Button.prototype, "value", 2);
+__decorateClass$m([attr], Button.prototype, "name", 2);
+__decorateClass$m([attr], Button.prototype, "shape", 2);
+__decorateClass$m([attr], Button.prototype, "size", 2);
+__decorateClass$m([attr], Button.prototype, "type", 2);
+__decorateClass$m([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
 function buttonTemplate$1(options = {}) {
   return html`<template tabindex="${x => x.disabled ? -1 : 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$p = buttonTemplate$1();
+const template$q = buttonTemplate$1();
 
-const definition$p = Button.compose({
+const definition$q = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$p,
-  styles: styles$r
+  template: template$q,
+  styles: styles$s
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
 const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
 function toggleState(elementInternals, state, force) {
@@ -5188,12 +5199,12 @@ function toggleState(elementInternals, state, force) {
   elementInternals.states.delete(state);
 }
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -5520,35 +5531,35 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$k([attr({
+__decorateClass$l([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$k([attr({
+__decorateClass$l([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$k([attr({
+__decorateClass$l([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$k([observable], BaseCheckbox.prototype, "indeterminate", 2);
-__decorateClass$k([attr({
+__decorateClass$l([observable], BaseCheckbox.prototype, "indeterminate", 2);
+__decorateClass$l([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$k([attr({
+__decorateClass$l([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$k([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$k([attr({
+__decorateClass$l([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$l([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 class Checkbox extends BaseCheckbox {}
-__decorateClass$k([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$k([attr], Checkbox.prototype, "size", 2);
+__decorateClass$l([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$l([attr], Checkbox.prototype, "size", 2);
 
 const checkedState$1 = css.partial`:is([state--checked], :state(checked))`;
 const indeterminateState = css.partial`:is([state--indeterminate], :state(indeterminate))`;
-const styles$n = css`
+const styles$o = css`
   ${display("inline-flex")}
 
   :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState$1}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState$1}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState$1})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState$1}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState$1}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState$1}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState$1}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -5574,23 +5585,23 @@ const indeterminateIndicator = html.partial( /* html */
 function checkboxTemplate(options = {}) {
   return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
-const template$o = checkboxTemplate({
+const template$p = checkboxTemplate({
   checkedIndicator,
   indeterminateIndicator
 });
 
-const definition$o = Checkbox.compose({
+const definition$p = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$o,
-  styles: styles$n
+  template: template$p,
+  styles: styles$o
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$p.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$m = css`
-  ${styles$r}
+const styles$n = css`
+  ${styles$s}
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:hover,[appearance='primary']:active))
     ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
@@ -5600,22 +5611,22 @@ const styles$m = css`
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$n = buttonTemplate();
+const template$o = buttonTemplate();
 
-const definition$n = CompoundButton.compose({
+const definition$o = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$n,
-  styles: styles$m
+  template: template$o,
+  styles: styles$n
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$o.define(FluentDesignSystem.registry);
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -5646,27 +5657,27 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$j([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$j([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$j([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$j([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$j([attr({
+__decorateClass$k([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$k([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$k([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$k([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$k([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$j([attr({
+__decorateClass$k([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$j([attr({
+__decorateClass$k([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$j([attr({
+__decorateClass$k([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const styles$l = css`
+const styles$m = css`
   :host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -5679,15 +5690,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$m = composeTemplate();
+const template$n = composeTemplate();
 
-const definition$m = CounterBadge.compose({
+const definition$n = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$m,
-  styles: styles$l
+  template: template$n,
+  styles: styles$m
 });
 
-definition$m.define(FluentDesignSystem.registry);
+definition$n.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -5695,12 +5706,12 @@ const DialogType = {
   alert: "alert"
 };
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -5768,35 +5779,35 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$i([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$i([attr({
+__decorateClass$j([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$j([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$i([attr({
+__decorateClass$j([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$i([attr], Dialog.prototype, "type", 2);
+__decorateClass$j([attr], Dialog.prototype, "type", 2);
 
-const template$l = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+const template$m = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
-const styles$k = css`
+const styles$l = css`
   @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:calc(-48px + 100vh);padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
 
-const definition$l = Dialog.compose({
+const definition$m = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$l,
-  styles: styles$k
+  template: template$m,
+  styles: styles$l
 });
 
-definition$l.define(FluentDesignSystem.registry);
+definition$m.define(FluentDesignSystem.registry);
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 class DialogBody extends FASTElement {
@@ -5805,7 +5816,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$h([attr({
+__decorateClass$i([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -5824,20 +5835,20 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$k = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
+const template$l = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
 
-const styles$j = css`
+const styles$k = css`
   ${display("grid")}
 
   :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL};position:sticky;z-index:1}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL};position:sticky;z-index:2}:not(:has(:is([slot='title'],[slot='title-action']))) .title:not(:has(.title-action)),:not(:has([slot='action'])) .actions{display:none}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}`;
 
-const definition$k = DialogBody.compose({
+const definition$l = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$k,
-  styles: styles$j
+  template: template$l,
+  styles: styles$k
 });
 
-definition$k.define(FluentDesignSystem.registry);
+definition$l.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -5851,12 +5862,12 @@ const DividerRole = {
 };
 const DividerOrientation = Orientation;
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 class Divider extends FASTElement {
@@ -5904,34 +5915,34 @@ class Divider extends FASTElement {
     }
   }
 }
-__decorateClass$g([attr], Divider.prototype, "role", 2);
-__decorateClass$g([attr], Divider.prototype, "orientation", 2);
-__decorateClass$g([attr({
+__decorateClass$h([attr], Divider.prototype, "role", 2);
+__decorateClass$h([attr], Divider.prototype, "orientation", 2);
+__decorateClass$h([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$g([attr], Divider.prototype, "appearance", 2);
-__decorateClass$g([attr({
+__decorateClass$h([attr], Divider.prototype, "appearance", 2);
+__decorateClass$h([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
 function dividerTemplate() {
   return html`<slot></slot>`;
 }
-const template$j = dividerTemplate();
+const template$k = dividerTemplate();
 
-const styles$i = css`
+const styles$j = css`
   ${display("flex")}
 
   :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
-const definition$j = Divider.compose({
+const definition$k = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$j,
-  styles: styles$i
+  template: template$k,
+  styles: styles$j
 });
 
-definition$j.define(FluentDesignSystem.registry);
+definition$k.define(FluentDesignSystem.registry);
 
 const LabelPosition = {
   above: "above",
@@ -5952,12 +5963,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 class Field extends FASTElement {
@@ -6077,11 +6088,11 @@ class Field extends FASTElement {
     }
   }
 }
-__decorateClass$f([attr({
+__decorateClass$g([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
-__decorateClass$f([observable], Field.prototype, "messageSlot", 2);
-__decorateClass$f([observable], Field.prototype, "slottedInputs", 2);
+__decorateClass$g([observable], Field.prototype, "messageSlot", 2);
+__decorateClass$g([observable], Field.prototype, "slottedInputs", 2);
 
 const disabledState = css.partial`:is([state--disabled], :state(disabled))`;
 const focusVisibleState = css.partial`:is([state--focus-visible], :state(focus-visible))`;
@@ -6096,12 +6107,12 @@ const tooShortState = css.partial`:is([state--${ValidationFlags.tooShort}], :sta
 const typeMismatchState = css.partial`:is([state--${ValidationFlags.typeMismatch}], :state(${ValidationFlags.typeMismatch}))`;
 const validState = css.partial`:is([state-${ValidationFlags.valid}], :state(${ValidationFlags.valid}))`;
 const valueMissingState = css.partial`:is([state--${ValidationFlags.valueMissing}], :state(${ValidationFlags.valueMissing}))`;
-const styles$h = css`
+const styles$i = css`
   ${display("inline-grid")}
 
   :host{align-items:center;cursor:pointer;gap:0 ${spacingHorizontalM};justify-items:start;padding:${spacingVerticalS}}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message'}::slotted([slot='label']){cursor:pointer;grid-area:label}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label){display:inline-flex;color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}) ::slotted(label){color:${colorNeutralForeground1};cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
-const template$i = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
+const template$j = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
   property: "slottedInputs",
   attributes: true,
   attributeFilter: ["disabled", "required", "readonly"],
@@ -6113,57 +6124,57 @@ const template$i = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
   filter: elements("[flag]")
 })}></slot></template>`;
 
-const definition$i = Field.compose({
+const definition$j = Field.compose({
   name: `${FluentDesignSystem.prefix}-field`,
-  template: template$i,
-  styles: styles$h,
+  template: template$j,
+  styles: styles$i,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$i.define(FluentDesignSystem.registry);
+definition$j.define(FluentDesignSystem.registry);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class Image extends FASTElement {}
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$e([attr], Image.prototype, "fit", 2);
-__decorateClass$e([attr], Image.prototype, "shape", 2);
+__decorateClass$f([attr], Image.prototype, "fit", 2);
+__decorateClass$f([attr], Image.prototype, "shape", 2);
 
-const template$h = html`<slot></slot>`;
+const template$i = html`<slot></slot>`;
 
-const styles$g = css`
+const styles$h = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
-const definition$h = Image.compose({
+const definition$i = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$h,
-  styles: styles$g
+  template: template$i,
+  styles: styles$h
 });
 
-definition$h.define(FluentDesignSystem.registry);
+definition$i.define(FluentDesignSystem.registry);
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -6173,16 +6184,16 @@ class Label extends FASTElement {
     this.required = false;
   }
 }
-__decorateClass$d([attr], Label.prototype, "size", 2);
-__decorateClass$d([attr], Label.prototype, "weight", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr], Label.prototype, "size", 2);
+__decorateClass$e([attr], Label.prototype, "weight", 2);
+__decorateClass$e([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
-const styles$f = css`
+const styles$g = css`
   ${display("inline-flex")}
 
   :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']),:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
@@ -6190,10 +6201,48 @@ const styles$f = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$g = labelTemplate();
+const template$h = labelTemplate();
 
-const definition$g = Label.compose({
+const definition$h = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
+  template: template$h,
+  styles: styles$g
+});
+
+definition$h.define(FluentDesignSystem.registry);
+
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$d(target, key, result);
+  return result;
+};
+class Link extends BaseAnchor {
+  constructor() {
+    super(...arguments);
+    this.inline = false;
+  }
+}
+__decorateClass$d([attr], Link.prototype, "appearance", 2);
+__decorateClass$d([attr({
+  mode: "boolean"
+})], Link.prototype, "inline", 2);
+
+const styles$f = css`
+  ${display("inline")}
+
+  :host{box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};margin:0;padding:0;overflow:inherit;text-align:left;text-decoration:none;text-decoration-thinkness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{color:LinkText}`));
+
+function anchorTemplate() {
+  return html`<template tabindex="0" @click="${x => x.clickHandler()}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><slot></slot></template>`;
+}
+const template$g = anchorTemplate();
+
+const definition$g = Link.compose({
+  name: `${FluentDesignSystem.prefix}-link`,
   template: template$g,
   styles: styles$f
 });
@@ -6214,7 +6263,7 @@ const template$f = buttonTemplate$1({
 const definition$f = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
   template: template$f,
-  styles: styles$r
+  styles: styles$s
 });
 
 definition$f.define(FluentDesignSystem.registry);
@@ -10505,7 +10554,7 @@ __decorateClass([attr({
 })], ToggleButton.prototype, "mixed", 2);
 
 const styles = css`
-  ${styles$r}
+  ${styles$s}
 
   :host([aria-pressed='true']){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover),:host([aria-pressed='true'][appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active),:host([aria-pressed='true'][appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-pressed='true']),:host([aria-pressed='true'][appearance='primary']),:host([aria-pressed='true'][appearance='subtle']),:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background:SelectedItem;color:SelectedItemText}`));