@fluentui/web-components 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/web-components.js

@@ -3381,70 +3381,70 @@ function uniqueId(prefix = "") {
   return `${prefix}${uniqueIdCounter++}`;
 }
 
-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;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(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$s(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$s([attr({
+__decorateClass$v([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -3613,12 +3613,12 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-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$u = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(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$u(target, key, result);
   return result;
 };
 class AccordionItem extends FASTElement {
@@ -3640,23 +3640,23 @@ class AccordionItem extends FASTElement {
     };
   }
 }
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], AccordionItem.prototype, "headinglevel", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "expanded", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "disabled", 2);
-__decorateClass$r([attr], AccordionItem.prototype, "id", 2);
-__decorateClass$r([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr], AccordionItem.prototype, "id", 2);
+__decorateClass$u([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$u([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "expand-icon-position"
 })], AccordionItem.prototype, "expandIconPosition", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -3750,6 +3750,7 @@ const colorPaletteRedForeground2 = "var(--colorPaletteRedForeground2)";
 const colorPaletteRedForeground3 = "var(--colorPaletteRedForeground3)";
 const colorPaletteGreenBackground1 = "var(--colorPaletteGreenBackground1)";
 const colorPaletteGreenBackground3 = "var(--colorPaletteGreenBackground3)";
+const colorPaletteGreenBorder1 = "var(--colorPaletteGreenBorder1)";
 const colorPaletteGreenBorder2 = "var(--colorPaletteGreenBorder2)";
 const colorPaletteGreenForeground1 = "var(--colorPaletteGreenForeground1)";
 const colorPaletteGreenForeground2 = "var(--colorPaletteGreenForeground2)";
@@ -3764,6 +3765,7 @@ const colorPaletteYellowBackground3 = "var(--colorPaletteYellowBackground3)";
 const colorPaletteYellowBorder1 = "var(--colorPaletteYellowBorder1)";
 const colorPaletteYellowForeground2 = "var(--colorPaletteYellowForeground2)";
 const colorPaletteMarigoldBackground2 = "var(--colorPaletteMarigoldBackground2)";
+const colorPaletteMarigoldBackground3 = "var(--colorPaletteMarigoldBackground3)";
 const colorPaletteMarigoldForeground2 = "var(--colorPaletteMarigoldForeground2)";
 const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
 const colorPaletteAnchorForeground2 = "var(--colorPaletteAnchorForeground2)";
@@ -3896,7 +3898,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$u = css`
+const styles$x = 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}`;
@@ -3930,30 +3932,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$v = accordionItemTemplate({
+const template$y = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$v = AccordionItem.compose({
+const definition$y = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$v,
-  styles: styles$u
+  template: template$y,
+  styles: styles$x
 });
 
-definition$v.define(FluentDesignSystem.registry);
+definition$y.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
   multi: "multi"
 };
 
-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$t = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(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$t(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -4131,12 +4133,12 @@ class Accordion extends FASTElement {
     }
   }
 }
-__decorateClass$q([attr({
+__decorateClass$t([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$q([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$t([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$t = css`
+const styles$w = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -4147,15 +4149,15 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$u = accordionTemplate();
+const template$x = accordionTemplate();
 
-const definition$u = Accordion.compose({
+const definition$x = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$u,
-  styles: styles$t
+  template: template$x,
+  styles: styles$w
 });
 
-definition$u.define(FluentDesignSystem.registry);
+definition$x.define(FluentDesignSystem.registry);
 
 const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
 function toggleState(elementInternals, state, force) {
@@ -4188,12 +4190,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-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$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$p(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -4301,14 +4303,14 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__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);
+__decorateClass$s([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$s([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$s([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$s([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$s([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$s([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$s([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$s([attr], BaseAnchor.prototype, "type", 2);
 class AnchorButton extends BaseAnchor {
   constructor() {
     super(...arguments);
@@ -4362,10 +4364,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$p([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$p([attr({
+__decorateClass$s([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$s([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$s([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$s([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -4401,23 +4403,27 @@ const errorState = css.partial`:is([state--error], :state(error))`;
 const dangerState = css.partial`:is([state--danger], :state(danger))`;
 const importantState = css.partial`:is([state--important], :state(important))`;
 const informativeState = css.partial`:is([state--informative], :state(informative))`;
+css.partial`:is([state--marigold], :state(marigold))`;
+const neutralState = css.partial`:is([state--neutral], :state(neutral))`;
 const severeState = css.partial`:is([state--severe], :state(severe))`;
 const successState = css.partial`:is([state--success], :state(success))`;
 const warningState = css.partial`:is([state--warning], :state(warning))`;
 const verticalState = css.partial`:is([state--vertical], :state(vertical))`;
 css.partial`:is([state--horizontal], :state(horizontal))`;
+css.partial`:is([state--singleline], :state(singleline))`;
+const multiLineState = css.partial`:is([state--multiline], :state(multiline))`;
 
 const baseButtonStyles = css`
   ${display("inline-flex")}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;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}:is([slot='start'],::slotted([slot='start'])){margin-inline-end:var(--icon-spacing)}:is([slot='end'],::slotted([slot='end'])){margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--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(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
-const styles$s = css`
+const styles$v = 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(${primaryState}:is(:disabled,[disabled-focusable])),:host(${primaryState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host(${outlineState}:is(:disabled,[disabled-focusable])),:host(${outlineState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host(${subtleState}:is(:disabled,[disabled-focusable])),:host(${subtleState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host(${transparentState}:is(:disabled,[disabled-focusable])),:host(${transparentState}:is(:disabled,[disabled-focusable]):is(:hover,: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$r = css`
+const styles$u = css`
   ${baseButtonStyles}
 
   ::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -4426,15 +4432,15 @@ const styles$r = css`
 function anchorTemplate$1(options = {}) {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$t = anchorTemplate$1();
+const template$w = anchorTemplate$1();
 
-const definition$t = AnchorButton.compose({
+const definition$w = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$t,
-  styles: styles$r
+  template: template$w,
+  styles: styles$u
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$w.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -4516,12 +4522,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-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$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$o(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 const _Avatar = class _Avatar extends FASTElement {
@@ -4587,16 +4593,16 @@ const _Avatar = class _Avatar extends FASTElement {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$o([attr], _Avatar.prototype, "name", 2);
-__decorateClass$o([attr], _Avatar.prototype, "initials", 2);
-__decorateClass$o([attr({
+__decorateClass$r([attr], _Avatar.prototype, "name", 2);
+__decorateClass$r([attr], _Avatar.prototype, "initials", 2);
+__decorateClass$r([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__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({
+__decorateClass$r([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$r([attr], _Avatar.prototype, "active", 2);
+__decorateClass$r([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$r([attr], _Avatar.prototype, "color", 2);
+__decorateClass$r([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -4621,22 +4627,22 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$q = css`
+const styles$t = 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(:is([state--brand],:state(brand))){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host(:is([state--dark-red],:state(dark-red))){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host(:is([state--cranberry],:state(cranberry))){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host(:is([state--red],:state(red))){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host(:is([state--pumpkin],:state(pumpkin))){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host(:is([state--peach],:state(peach))){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host(:is([state--marigold],:state(marigold))){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host(:is([state--gold],:state(gold))){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host(:is([state--brass],:state(brass))){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host(:is([state--brown],:state(brown))){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host(:is([state--forest],:state(forest))){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host(:is([state--seafoam],:state(seafoam))){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host(:is([state--dark-green],:state(dark-green))){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host(:is([state--light-teal],:state(light-teal))){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host(:is([state--teal],:state(teal))){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host(:is([state--steel],:state(steel))){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host(:is([state--blue],:state(blue))){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host(:is([state--royal-blue],:state(royal-blue))){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host(:is([state--cornflower],:state(cornflower))){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host(:is([state--navy],:state(navy))){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host(:is([state--lavender],:state(lavender))){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host(:is([state--purple],:state(purple))){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host(:is([state--grape],:state(grape))){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host(:is([state--lilac],:state(lilac))){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host(:is([state--pink],:state(pink))){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host(:is([state--magenta],:state(magenta))){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host(:is([state--plum],:state(plum))){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host(:is([state--beige],:state(beige))){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host(:is([state--mink],:state(mink))){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host(:is([state--platinum],:state(platinum))){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host(:is([state--anchor],:state(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`<slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot>`;
 }
-const template$s = avatarTemplate();
+const template$v = avatarTemplate();
 
-const definition$s = Avatar.compose({
+const definition$v = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$s,
-  styles: styles$q
+  template: template$v,
+  styles: styles$t
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$v.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -4655,12 +4661,12 @@ const BadgeColor = {
   warning: "warning"
 };
 
-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$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$n(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -4728,13 +4734,12 @@ class Badge extends FASTElement {
     }
   }
 }
-__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);
+__decorateClass$q([attr], Badge.prototype, "appearance", 2);
+__decorateClass$q([attr], Badge.prototype, "color", 2);
+__decorateClass$q([attr], Badge.prototype, "shape", 2);
+__decorateClass$q([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
-const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
   ${display("inline-flex")} :host {
     position: relative;
@@ -4747,7 +4752,7 @@ const badgeBaseStyles = css.partial`
     line-height: ${lineHeightBase200};
     min-width: 20px;
     height: 20px;
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
     border-radius: ${borderRadiusCircular};
     border-color: ${colorTransparentStroke};
     background-color: ${colorBrandBackground};
@@ -4800,7 +4805,7 @@ const badgeSizeStyles = css.partial`
     height: 16px;
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
-    padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
   }
   :host(${smallState}) ::slotted(svg) {
     font-size: 12px;
@@ -4810,7 +4815,7 @@ const badgeSizeStyles = css.partial`
     height: 24px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
   }
   :host(${largeState}) ::slotted(svg) {
     font-size: 16px;
@@ -4820,7 +4825,7 @@ const badgeSizeStyles = css.partial`
     height: 32px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
   }
   :host(${extraLargeState}) ::slotted(svg) {
     font-size: 20px;
@@ -5086,7 +5091,7 @@ css.partial`
   font-weight: ${fontWeightSemibold};
 `;
 
-const styles$p = css`
+const styles$s = css`
   :host(${squareState}){border-radius:${borderRadiusNone}}:host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -5099,22 +5104,22 @@ const styles$p = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$r = badgeTemplate();
+const template$u = badgeTemplate();
 
-const definition$r = Badge.compose({
+const definition$u = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$r,
-  styles: styles$p
+  template: template$u,
+  styles: styles$s
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
 
-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$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$m(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 class Button extends FASTElement {
@@ -5365,67 +5370,67 @@ class Button extends FASTElement {
  * @public
  */
 Button.formAssociated = true;
-__decorateClass$m([attr], Button.prototype, "appearance", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr], Button.prototype, "appearance", 2);
+__decorateClass$p([attr({
   mode: "boolean"
 })], Button.prototype, "autofocus", 2);
-__decorateClass$m([observable], Button.prototype, "defaultSlottedContent", 2);
-__decorateClass$m([attr({
+__decorateClass$p([observable], Button.prototype, "defaultSlottedContent", 2);
+__decorateClass$p([attr({
   mode: "boolean"
 })], Button.prototype, "disabled", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], Button.prototype, "disabledFocusable", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "formaction"
 })], Button.prototype, "formAction", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "form"
 })], Button.prototype, "formAttribute", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "formenctype"
 })], Button.prototype, "formEnctype", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "formmethod"
 })], Button.prototype, "formMethod", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], Button.prototype, "formNoValidate", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "formtarget"
 })], Button.prototype, "formTarget", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 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);
+__decorateClass$p([attr], Button.prototype, "name", 2);
+__decorateClass$p([attr], Button.prototype, "shape", 2);
+__decorateClass$p([attr], Button.prototype, "size", 2);
+__decorateClass$p([attr], Button.prototype, "type", 2);
+__decorateClass$p([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$q = buttonTemplate$1();
+const template$t = buttonTemplate$1();
 
-const definition$q = Button.compose({
+const definition$t = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$q,
-  styles: styles$s
+  template: template$t,
+  styles: styles$v
 });
 
-definition$q.define(FluentDesignSystem.registry);
+definition$t.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$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$l(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -5752,26 +5757,26 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$l([attr({
+__decorateClass$o([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$l([attr({
+__decorateClass$o([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$l([attr({
+__decorateClass$o([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$l([observable], BaseCheckbox.prototype, "indeterminate", 2);
-__decorateClass$l([attr({
+__decorateClass$o([observable], BaseCheckbox.prototype, "indeterminate", 2);
+__decorateClass$o([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$l([attr({
+__decorateClass$o([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$l([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$l([attr({
+__decorateClass$o([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$o([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 class Checkbox extends BaseCheckbox {
@@ -5802,12 +5807,12 @@ class Checkbox extends BaseCheckbox {
     }
   }
 }
-__decorateClass$l([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$l([attr], Checkbox.prototype, "size", 2);
+__decorateClass$o([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$o([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$o = css`
+const styles$r = 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(${largeState}){--size:20px}:host(${largeState}) ::slotted([slot='checked-indicator']),:host(${largeState}) .checked-indicator{width:16px}:host(${circularState}),:host(${circularState}) .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`
@@ -5833,23 +5838,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$p = checkboxTemplate({
+const template$s = checkboxTemplate({
   checkedIndicator,
   indeterminateIndicator
 });
 
-const definition$p = Checkbox.compose({
+const definition$s = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$p,
-  styles: styles$o
+  template: template$s,
+  styles: styles$r
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$s.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$n = css`
-  ${styles$s}
+const styles$q = css`
+  ${styles$v}
 
   :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(${largeState}) ::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(${primaryState},${primaryState}:hover,${primaryState}:active)) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is(${subtleState},${subtleState}:hover,${subtleState}:active)) ::slotted([slot='description']),:host(${transparentState}) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host(${transparentState}:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
     ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host(${smallState}){padding:8px;padding-bottom:10px}:host(${iconOnlyState}){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host(${iconOnlyState}${smallState}){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host(${iconOnlyState}${largeState}){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host(${largeState}){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
@@ -5857,22 +5862,22 @@ const styles$n = 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$o = buttonTemplate();
+const template$r = buttonTemplate();
 
-const definition$o = CompoundButton.compose({
+const definition$r = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$o,
-  styles: styles$n
+  template: template$r,
+  styles: styles$q
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$r.define(FluentDesignSystem.registry);
 
-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$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$k(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -5969,28 +5974,28 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__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({
+__decorateClass$n([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$n([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$n([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$n([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$n([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$k([attr({
+__decorateClass$n([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$k([attr({
+__decorateClass$n([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$k([attr({
+__decorateClass$n([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
 const dotState = css.partial`:is([state--dot], :state(dot))`;
-const styles$m = css`
+const styles$p = css`
   :host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -6003,15 +6008,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$n = composeTemplate();
+const template$q = composeTemplate();
 
-const definition$n = CounterBadge.compose({
+const definition$q = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$n,
-  styles: styles$m
+  template: template$q,
+  styles: styles$p
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -6019,12 +6024,12 @@ const DialogType = {
   alert: "alert"
 };
 
-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$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$j(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -6092,35 +6097,35 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$j([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$j([attr({
+__decorateClass$m([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$m([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$j([attr({
+__decorateClass$m([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$j([attr], Dialog.prototype, "type", 2);
+__decorateClass$m([attr], Dialog.prototype, "type", 2);
 
-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 template$p = 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$l = css`
+const styles$o = 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$m = Dialog.compose({
+const definition$p = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$m,
-  styles: styles$l
+  template: template$p,
+  styles: styles$o
 });
 
-definition$m.define(FluentDesignSystem.registry);
+definition$p.define(FluentDesignSystem.registry);
 
-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$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$i(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 class DialogBody extends FASTElement {
@@ -6129,7 +6134,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$i([attr({
+__decorateClass$l([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -6148,20 +6153,20 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-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 template$o = 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$k = css`
+const styles$n = 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$l = DialogBody.compose({
+const definition$o = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$l,
-  styles: styles$k
+  template: template$o,
+  styles: styles$n
 });
 
-definition$l.define(FluentDesignSystem.registry);
+definition$o.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -6175,12 +6180,12 @@ const DividerRole = {
 };
 const DividerOrientation = Orientation;
 
-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$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$h(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class Divider extends FASTElement {
@@ -6267,34 +6272,156 @@ class Divider extends FASTElement {
     }
   }
 }
-__decorateClass$h([attr], Divider.prototype, "role", 2);
-__decorateClass$h([attr], Divider.prototype, "orientation", 2);
-__decorateClass$h([attr({
+__decorateClass$k([attr], Divider.prototype, "role", 2);
+__decorateClass$k([attr], Divider.prototype, "orientation", 2);
+__decorateClass$k([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$h([attr], Divider.prototype, "appearance", 2);
-__decorateClass$h([attr({
+__decorateClass$k([attr], Divider.prototype, "appearance", 2);
+__decorateClass$k([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
 function dividerTemplate() {
   return html`<slot></slot>`;
 }
-const template$k = dividerTemplate();
+const template$n = dividerTemplate();
 
-const styles$j = css`
+const styles$m = 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(${insetState}){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host(${alignStartState})::before,:host(${alignEndState})::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host(${verticalState}){height:100%;min-height:84px}:host(${verticalState}):empty{min-height:20px}:host(${verticalState}){flex-direction:column;align-items:center}:host(${verticalState}${insetState})::before{margin-top:12px}:host(${verticalState}${insetState})::after{margin-bottom:12px}:host(${verticalState}):empty::before,:host(${verticalState}):empty::after{height:10px;min-height:10px;flex-grow:0}:host(${verticalState})::before,:host(${verticalState})::after{width:${strokeWidthThin};min-height:20px;height:100%}:host(${verticalState}) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host(${verticalState}${alignStartState})::before{min-height:8px}:host(${verticalState}${alignEndState})::after{min-height:8px}:host(${strongState})::before,:host(${strongState})::after{background:${colorNeutralStroke1}}:host(${strongState}) ::slotted(*){color:${colorNeutralForeground1}}:host(${brandState})::before,:host(${brandState})::after{background:${colorBrandStroke1}}:host(${brandState}) ::slotted(*){color:${colorBrandForeground1}}:host(${subtleState})::before,:host(${subtleState})::after{background:${colorNeutralStroke3}}:host(${subtleState}) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${strongState})::before,:host(${strongState})::after,:host(${brandState})::before,:host(${brandState})::after,:host(${subtleState})::before,:host(${subtleState})::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
-const definition$k = Divider.compose({
+const definition$n = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$k,
-  styles: styles$j
+  template: template$n,
+  styles: styles$m
 });
 
-definition$k.define(FluentDesignSystem.registry);
+definition$n.define(FluentDesignSystem.registry);
+
+const DrawerPosition = {
+  start: "start",
+  end: "end"
+};
+const DrawerSize = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  full: "full"
+};
+const DrawerType = {
+  nonModal: "non-modal",
+  modal: "modal",
+  inline: "inline"
+};
+
+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$j(target, key, result);
+  return result;
+};
+class Drawer extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.type = DrawerType.modal;
+    this.position = DrawerPosition.start;
+    this.size = DrawerSize.medium;
+    /**
+     * @public
+     * Method to emit an event after the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    this.emitToggle = () => {
+      this.$emit("toggle", {
+        oldState: this.dialog.open ? "closed" : "open",
+        newState: this.dialog.open ? "open" : "closed"
+      });
+    };
+    /**
+     * @public
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    this.emitBeforeToggle = () => {
+      this.$emit("beforetoggle", {
+        oldState: this.dialog.open ? "open" : "closed",
+        newState: this.dialog.open ? "closed" : "open"
+      });
+    };
+  }
+  /**
+   * @public
+   * Method to show the drawer
+   */
+  show() {
+    Updates.enqueue(() => {
+      this.emitBeforeToggle();
+      if (this.type === DrawerType.inline || this.type === DrawerType.nonModal) {
+        this.dialog.show();
+      } else {
+        this.dialog.showModal();
+      }
+      this.emitToggle();
+    });
+  }
+  /**
+   * @public
+   * Method to hide the drawer
+   */
+  hide() {
+    this.emitBeforeToggle();
+    this.dialog.close();
+    this.emitToggle();
+  }
+  /**
+   * @public
+   * @param event - The click event
+   * @returns boolean - Always returns true
+   * Handles click events on the drawer.
+   */
+  clickHandler(event) {
+    event.preventDefault();
+    if (this.dialog.open && event.target === this.dialog) {
+      this.hide();
+    }
+    return true;
+  }
+}
+__decorateClass$j([attr], Drawer.prototype, "type", 2);
+__decorateClass$j([attr({
+  attribute: "aria-labelledby"
+})], Drawer.prototype, "ariaLabelledby", 2);
+__decorateClass$j([attr({
+  attribute: "aria-describedby"
+})], Drawer.prototype, "ariaDescribedby", 2);
+__decorateClass$j([attr], Drawer.prototype, "position", 2);
+__decorateClass$j([attr({
+  attribute: "size"
+})], Drawer.prototype, "size", 2);
+__decorateClass$j([observable], Drawer.prototype, "dialog", 2);
+
+const styles$l = css`
+  ${display("block")}
+
+  :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
+
+function drawerTemplate() {
+  return html`<dialog class="dialog" part="dialog" role="${x => x.type === "modal" ? "dialog" : x.role}" aria-modal="${x => x.type === "modal" ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" type="${x => x.type}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+}
+const template$m = drawerTemplate();
+
+const definition$m = Drawer.compose({
+  name: `${FluentDesignSystem.prefix}-drawer`,
+  template: template$m,
+  styles: styles$l
+});
+
+definition$m.define(FluentDesignSystem.registry);
 
 const LabelPosition = {
   above: "above",
@@ -6315,12 +6442,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-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$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$g(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 class Field extends FASTElement {
@@ -6440,11 +6567,11 @@ class Field extends FASTElement {
     }
   }
 }
-__decorateClass$g([attr({
+__decorateClass$i([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
-__decorateClass$g([observable], Field.prototype, "messageSlot", 2);
-__decorateClass$g([observable], Field.prototype, "slottedInputs", 2);
+__decorateClass$i([observable], Field.prototype, "messageSlot", 2);
+__decorateClass$i([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))`;
@@ -6459,12 +6586,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$i = css`
+const styles$k = 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$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({
+const template$l = 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"],
@@ -6476,23 +6603,23 @@ const template$j = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
   filter: elements("[flag]")
 })}></slot></template>`;
 
-const definition$j = Field.compose({
+const definition$l = Field.compose({
   name: `${FluentDesignSystem.prefix}-field`,
-  template: template$j,
-  styles: styles$i,
+  template: template$l,
+  styles: styles$k,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$j.define(FluentDesignSystem.registry);
+definition$l.define(FluentDesignSystem.registry);
 
-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$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$f(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 class Image extends FASTElement {
@@ -6557,37 +6684,37 @@ class Image extends FASTElement {
     }
   }
 }
-__decorateClass$f([attr({
+__decorateClass$h([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$f([attr({
+__decorateClass$h([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$f([attr({
+__decorateClass$h([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$f([attr], Image.prototype, "fit", 2);
-__decorateClass$f([attr], Image.prototype, "shape", 2);
+__decorateClass$h([attr], Image.prototype, "fit", 2);
+__decorateClass$h([attr], Image.prototype, "shape", 2);
 
-const template$i = html`<slot></slot>`;
+const template$k = html`<slot></slot>`;
 
-const styles$h = css`
+const styles$j = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host(:is([state--block],:state(block))) ::slotted(img){width:100%;height:auto}:host(:is([state--bordered],:state(bordered))) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host(:is([state--fit-none],:state(fit-none))) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host(:is([state--fit-center],:state(fit-center))) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host(:is([state--fit-contain],:state(fit-contain))) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host(:is([state--fit-cover],:state(fit-cover))) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host(:is([state--shadowed],:state(shadowed))) ::slotted(img){box-shadow:${shadow4}}:host(${circularState}) ::slotted(img){border-radius:${borderRadiusCircular}}:host(${roundedState}) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
-const definition$i = Image.compose({
+const definition$k = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$i,
-  styles: styles$h
+  template: template$k,
+  styles: styles$j
 });
 
-definition$i.define(FluentDesignSystem.registry);
+definition$k.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$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$e(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -6637,16 +6764,16 @@ class Label extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$e([attr], Label.prototype, "size", 2);
-__decorateClass$e([attr], Label.prototype, "weight", 2);
-__decorateClass$e([attr({
+__decorateClass$g([attr], Label.prototype, "size", 2);
+__decorateClass$g([attr], Label.prototype, "weight", 2);
+__decorateClass$g([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$e([attr({
+__decorateClass$g([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
-const styles$g = css`
+const styles$i = 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(${smallState}){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}),:host(:is([state--semibold],:state(semibold))){font-weight:${fontWeightSemibold}}:host(:is([state--disabled],:state(disabled))),:host(:is([state--disabled],:state(disabled))) .asterisk{color:${colorNeutralForegroundDisabled}}`;
@@ -6654,22 +6781,22 @@ const styles$g = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$h = labelTemplate();
+const template$j = labelTemplate();
 
-const definition$h = Label.compose({
+const definition$j = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
-  template: template$h,
-  styles: styles$g
+  template: template$j,
+  styles: styles$i
 });
 
-definition$h.define(FluentDesignSystem.registry);
+definition$j.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$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$d(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class Link extends BaseAnchor {
@@ -6699,12 +6826,12 @@ class Link extends BaseAnchor {
     toggleState(this.elementInternals, "inline", next);
   }
 }
-__decorateClass$d([attr], Link.prototype, "appearance", 2);
-__decorateClass$d([attr({
+__decorateClass$f([attr], Link.prototype, "appearance", 2);
+__decorateClass$f([attr({
   mode: "boolean"
 })], Link.prototype, "inline", 2);
 
-const styles$f = css`
+const styles$h = css`
   ${display("inline")}
 
   :host{position:relative;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(${subtleState}:hover){color:${colorNeutralForeground2LinkHover}}:host(${subtleState}:active){color:${colorNeutralForeground2LinkPressed}}}:host(${subtleState}){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host(:is([state--inline],:state(inline))){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -6713,19 +6840,19 @@ const styles$f = css`
 function anchorTemplate() {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot></slot></template>`;
 }
-const template$g = anchorTemplate();
+const template$i = anchorTemplate();
 
-const definition$g = Link.compose({
+const definition$i = Link.compose({
   name: `${FluentDesignSystem.prefix}-link`,
-  template: template$g,
-  styles: styles$f
+  template: template$i,
+  styles: styles$h
 });
 
-definition$g.define(FluentDesignSystem.registry);
+definition$i.define(FluentDesignSystem.registry);
 
 class MenuButton extends Button {}
 
-const template$f = buttonTemplate$1({
+const template$h = buttonTemplate$1({
   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">
@@ -6734,13 +6861,13 @@ const template$f = buttonTemplate$1({
   `)
 });
 
-const definition$f = MenuButton.compose({
+const definition$h = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$f,
-  styles: styles$s
+  template: template$h,
+  styles: styles$v
 });
 
-definition$f.define(FluentDesignSystem.registry);
+definition$h.define(FluentDesignSystem.registry);
 
 const MenuItemRole = {
   /**
@@ -6762,12 +6889,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(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$c(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class MenuItem extends FASTElement {
@@ -6912,21 +7039,21 @@ class MenuItem extends FASTElement {
     }
   }
 }
-__decorateClass$c([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$c([attr], MenuItem.prototype, "role", 2);
-__decorateClass$c([attr({
+__decorateClass$e([attr], MenuItem.prototype, "role", 2);
+__decorateClass$e([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$c([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$c([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$c([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$e([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$e([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
-const styles$e = css`
+const styles$g = css`
   ${display("grid")}
 
   :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not([checked])) .indicator,:host(:not([checked])) ::slotted([slot='indicator']),:host(:not([aria-haspopup='menu'])) .submenu-glyph,:host(:not([aria-haspopup='menu'])) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){inset-area:inline-end span-block-end;margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-try-options:flip-inline,inset-area(block-start);z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -6940,25 +7067,25 @@ function menuItemTemplate(options = {}) {
     filter: elements("[role='menu']")
   })}></slot></template>`;
 }
-const template$e = menuItemTemplate({
+const template$g = menuItemTemplate({
   indicator: Checkmark16Filled,
   submenuGlyph: chevronRight16Filled
 });
 
-const definition$e = MenuItem.compose({
+const definition$g = MenuItem.compose({
   name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$e,
-  styles: styles$e
+  template: template$g,
+  styles: styles$g
 });
 
-definition$e.define(FluentDesignSystem.registry);
+definition$g.define(FluentDesignSystem.registry);
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+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$b(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -7167,10 +7294,10 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$b([observable], _MenuList.prototype, "items", 2);
+__decorateClass$d([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
-const styles$d = css`
+const styles$f = css`
   ${display("flex")}
 
   :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
@@ -7178,22 +7305,22 @@ const styles$d = css`
 function menuTemplate$1() {
   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>`;
 }
-const template$d = menuTemplate$1();
+const template$f = menuTemplate$1();
 
-const definition$d = MenuList.compose({
+const definition$f = MenuList.compose({
   name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$d,
-  styles: styles$d
+  template: template$f,
+  styles: styles$f
 });
 
-definition$d.define(FluentDesignSystem.registry);
+definition$f.define(FluentDesignSystem.registry);
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(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$a(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
@@ -7464,32 +7591,36 @@ class Menu extends FASTElement {
         break;
       case keyTab:
         if (this._open) this.closeMenu();
-        if (e.shiftKey) this.focusTrigger();
+        if (e.shiftKey && e.composedPath()[0] !== this._trigger) {
+          this.focusTrigger();
+        } else if (e.shiftKey) {
+          return true;
+        }
       default:
         return true;
     }
   }
 }
-__decorateClass$a([observable, attr({
+__decorateClass$c([observable, attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$a([observable, attr({
+__decorateClass$c([observable, attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$a([observable, attr({
+__decorateClass$c([observable, attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$a([observable, attr({
+__decorateClass$c([observable, attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$a([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$a([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$c([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$c([observable], Menu.prototype, "slottedTriggers", 2);
 
-const styles$c = css`
+const styles$e = css`
   ${display("inline-block")}
 
   ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){inset-area:block-end span-inline-end;margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-try-options:flip-block;position:absolute;z-index:1}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}`;
@@ -7503,22 +7634,112 @@ function menuTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$c = menuTemplate();
+const template$e = menuTemplate();
 
-const definition$c = Menu.compose({
+const definition$e = Menu.compose({
   name: `${FluentDesignSystem.prefix}-menu`,
-  template: template$c,
-  styles: styles$c
+  template: template$e,
+  styles: styles$e
 });
 
-definition$c.define(FluentDesignSystem.registry);
+definition$e.define(FluentDesignSystem.registry);
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(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$9(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
+  return result;
+};
+class MessageBar 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();
+    /**
+     * @public
+     * Method to emit a `dismiss` event when the message bar is dismissed
+     */
+    this.dismissMessageBar = () => {
+      this.$emit("dismiss", {});
+    };
+    this.elementInternals.role = "status";
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
+  /**
+   * Handles changes to the layout attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  layoutChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
+  /**
+   * Handles changes to the intent attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  intentChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
+}
+__decorateClass$b([attr], MessageBar.prototype, "shape", 2);
+__decorateClass$b([attr], MessageBar.prototype, "layout", 2);
+__decorateClass$b([attr], MessageBar.prototype, "intent", 2);
+
+const styles$d = css`
+  :host{display:grid;box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};width:100%;background:${colorNeutralBackground3};border:1px solid ${colorNeutralStroke1};padding-inline:${spacingHorizontalM};border-radius:${borderRadiusMedium};min-height:36px;align-items:center;grid-template:'icon body actions dismiss' / auto 1fr auto auto;contain:layout style paint}:host(${squareState}){border-radius:0}:host(${successState}){background-color:${colorPaletteGreenBackground1};border-color:${colorPaletteGreenBorder1}}:host(${warningState}){background-color:${colorPaletteDarkOrangeBackground1};border-color:${colorPaletteDarkOrangeBorder1}}:host(${errorState}){background-color:${colorPaletteRedBackground1};border-color:${colorPaletteRedBorder1}}:host(${multiLineState}){grid-template-areas:'icon body dismiss'
+      'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${spacingVerticalMNudge};padding-inline:${spacingHorizontalM}}.content{grid-area:body;max-width:520px;padding-block:${spacingVerticalMNudge};padding-inline:0}:host(${multiLineState}) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${colorNeutralForeground3};margin-inline-end:${spacingHorizontalS}}:host(${multiLineState}) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${spacingHorizontalS};gap:${spacingHorizontalS}}:host(${multiLineState}) .actions{margin-block-start:${spacingVerticalMNudge};margin-inline-end:0}:host(${multiLineState}) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${spacingVerticalS}}::slotted(*){font-size:inherit}`;
+
+function messageBarTemplate() {
+  return html`<slot name="icon"></slot><div class="content"><slot></slot></div><div class="actions"><slot name="actions"></slot></div><slot name="dismiss"></slot>`;
+}
+const template$d = messageBarTemplate();
+
+const definition$d = MessageBar.compose({
+  name: `${FluentDesignSystem.prefix}-message-bar`,
+  template: template$d,
+  styles: styles$d,
+  shadowOptions: {
+    mode: FluentDesignSystem.shadowRootMode
+  }
+});
+
+definition$d.define(FluentDesignSystem.registry);
+
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(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$a(target, key, result);
   return result;
 };
 class ProgressBar extends FASTElement {
@@ -7607,23 +7828,23 @@ class ProgressBar extends FASTElement {
     return range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
-__decorateClass$9([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$9([attr], ProgressBar.prototype, "shape", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$a([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$a([attr({
   attribute: "validation-state"
 })], ProgressBar.prototype, "validationState", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], ProgressBar.prototype, "value", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], ProgressBar.prototype, "min", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], ProgressBar.prototype, "max", 2);
-__decorateClass$9([volatile], ProgressBar.prototype, "percentComplete", 1);
+__decorateClass$a([volatile], ProgressBar.prototype, "percentComplete", 1);
 
-const styles$b = css`
+const styles$c = css`
   ${display("block")}
 
   :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content}:host(${largeState}){height:4px}:host(${squareState}){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
@@ -7634,15 +7855,15 @@ const styles$b = css`
 function progressTemplate() {
   return html`<div class="indicator" part="indicator" style="${x => typeof x.value === "number" ? `width: ${x.percentComplete}%` : void 0}"></div>`;
 }
-const template$b = progressTemplate();
+const template$c = progressTemplate();
 
-const definition$b = ProgressBar.compose({
+const definition$c = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
-  template: template$b,
-  styles: styles$b
+  template: template$c,
+  styles: styles$c
 });
 
-definition$b.define(FluentDesignSystem.registry);
+definition$c.define(FluentDesignSystem.registry);
 
 const proxySlotName = "form-associated-proxy";
 const ElementInternalsKey = "ElementInternals";
@@ -8088,12 +8309,12 @@ class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
   }
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 class Radio extends FormAssociatedRadio {
@@ -8160,17 +8381,17 @@ class Radio extends FormAssociatedRadio {
     return true;
   }
 }
-__decorateClass$8([observable], Radio.prototype, "name", 2);
-__decorateClass$8([observable], Radio.prototype, "defaultSlottedNodes", 2);
+__decorateClass$9([observable], Radio.prototype, "name", 2);
+__decorateClass$9([observable], Radio.prototype, "defaultSlottedNodes", 2);
 
 const RadioGroupOrientation = Orientation;
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$7(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 class RadioGroup extends FASTElement {
@@ -8473,24 +8694,24 @@ class RadioGroup extends FASTElement {
     }
   }
 }
-__decorateClass$7([attr({
+__decorateClass$8([attr({
   mode: "boolean"
 })], RadioGroup.prototype, "stacked", 2);
-__decorateClass$7([attr({
+__decorateClass$8([attr({
   attribute: "readonly",
   mode: "boolean"
 })], RadioGroup.prototype, "readOnly", 2);
-__decorateClass$7([attr({
+__decorateClass$8([attr({
   attribute: "disabled",
   mode: "boolean"
 })], RadioGroup.prototype, "disabled", 2);
-__decorateClass$7([attr], RadioGroup.prototype, "name", 2);
-__decorateClass$7([attr], RadioGroup.prototype, "value", 2);
-__decorateClass$7([attr], RadioGroup.prototype, "orientation", 2);
-__decorateClass$7([observable], RadioGroup.prototype, "childItems", 2);
-__decorateClass$7([observable], RadioGroup.prototype, "slottedRadioButtons", 2);
+__decorateClass$8([attr], RadioGroup.prototype, "name", 2);
+__decorateClass$8([attr], RadioGroup.prototype, "value", 2);
+__decorateClass$8([attr], RadioGroup.prototype, "orientation", 2);
+__decorateClass$8([observable], RadioGroup.prototype, "childItems", 2);
+__decorateClass$8([observable], RadioGroup.prototype, "slottedRadioButtons", 2);
 
-const styles$a = css`
+const styles$b = css`
   ${display("flex")}
 
   :host{align-items:flex-start;flex-direction:column;row-gap:${spacingVerticalS}}:host([disabled]) ::slotted([role='radio']){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}::slotted([slot='label']){color:${colorNeutralForeground1};padding:${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};cursor:default}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']) .positioning-region{flex-direction:row}:host([orientation='horizontal']) ::slotted([role='radio']){padding-inline-end:${spacingHorizontalS}}:host([orientation='horizontal'][stacked]) ::slotted([role='radio']){display:flex;flex-direction:column;padding-inline:${spacingHorizontalS};height:auto;align-items:center;justify-content:center}:host([disabled]) ::slotted([role='radio']){pointer-events:none}`;
@@ -8501,17 +8722,17 @@ function radioGroupTemplate() {
     filter: elements("[role=radio]")
   })}></slot></div></template>`;
 }
-const template$a = radioGroupTemplate();
+const template$b = radioGroupTemplate();
 
-const definition$a = RadioGroup.compose({
+const definition$b = RadioGroup.compose({
   name: `${FluentDesignSystem.prefix}-radio-group`,
-  template: template$a,
-  styles: styles$a
+  template: template$b,
+  styles: styles$b
 });
 
-definition$a.define(FluentDesignSystem.registry);
+definition$b.define(FluentDesignSystem.registry);
 
-const styles$9 = css`
+const styles$a = css`
   ${display("inline-grid")}
 
   :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -8523,12 +8744,111 @@ function radioTemplate(options = {}) {
     filter: whitespaceFilter
   })}></slot></label></template>`;
 }
-const template$9 = radioTemplate({
+const template$a = radioTemplate({
   checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
 });
 
-const definition$9 = Radio.compose({
+const definition$a = Radio.compose({
   name: `${FluentDesignSystem.prefix}-radio`,
+  template: template$a,
+  styles: styles$a
+});
+
+definition$a.define(FluentDesignSystem.registry);
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$7(target, key, result);
+  return result;
+};
+class RatingDisplay extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.compact = false;
+    this.intlNumberFormatter = new Intl.NumberFormat();
+    this.elementInternals.role = "img";
+  }
+  /**
+   * Handles changes to the color attribute.
+   *
+   * @param prev - The previous state
+   * @param next - The next state
+   */
+  colorChanged(prev, next) {
+    if (prev) toggleState(this.elementInternals, prev, false);
+    if (next) toggleState(this.elementInternals, next, true);
+  }
+  /**
+   * Handles changes to the size attribute.
+   *
+   * @param prev - The previous state
+   * @param next - The next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) toggleState(this.elementInternals, prev, false);
+    if (next) toggleState(this.elementInternals, next, true);
+  }
+  /**
+   * Returns "count" as string, formatted according to the locale.
+   *
+   * @internal
+   */
+  get formattedCount() {
+    return this.count ? this.intlNumberFormatter.format(this.count) : "";
+  }
+  /**
+   * Generates the icon SVG elements based on the "max" attribute.
+   *
+   * @internal
+   */
+  generateIcons() {
+    let htmlString = "";
+    const selectedValue = Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
+    for (let i = 0; i < (this.compact ? 1 : this.max ?? 5) * 2; i++) {
+      const iconValue = (i + 1) / 2;
+      htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? "selected" : ""}><use href="#star"></use></svg>`;
+    }
+    return htmlString;
+  }
+}
+__decorateClass$7([attr], RatingDisplay.prototype, "color", 2);
+__decorateClass$7([attr({
+  mode: "boolean"
+})], RatingDisplay.prototype, "compact", 2);
+__decorateClass$7([attr({
+  converter: nullableNumberConverter
+})], RatingDisplay.prototype, "count", 2);
+__decorateClass$7([attr({
+  converter: nullableNumberConverter
+})], RatingDisplay.prototype, "max", 2);
+__decorateClass$7([attr], RatingDisplay.prototype, "size", 2);
+__decorateClass$7([attr({
+  converter: nullableNumberConverter
+})], RatingDisplay.prototype, "value", 2);
+
+const styles$9 = css`
+  ${display("inline-flex")}
+
+  :host{--icon-size:16px;align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(${smallState}){--icon-size:12px}:host(${largeState}){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}svg{width:var(--icon-size);height:var(--icon-size);fill:${colorPaletteMarigoldBackground3};margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(even){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host(${neutralState}) svg{fill:${colorNeutralForeground1}}:host(${brandState}) svg{fill:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:${colorPaletteMarigoldBackground2}}:host(${neutralState}:is([value^='-'],[value='0'])) svg,:host(${neutralState}:not([value])) svg,:host(${neutralState}) svg[selected] ~ svg{fill:${colorNeutralBackground1Pressed}}:host(${brandState}:is([value^='-'],[value='0'])) svg,:host(${brandState}:not([value])) svg,:host(${brandState}) svg[selected] ~ svg{fill:${colorBrandStroke2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host(${smallState}) .value-label,:host(${smallState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host(${largeState}) .value-label,:host(${largeState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host(${smallState}) .count-label::before,:host(${smallState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host(${largeState}) .count-label::before,:host(${largeState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([color]) svg{fill:CanvasText}:host([color]:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,:host([color]) svg[selected] ~ svg{fill:Canvas;stroke:CanvasText}`));
+
+const star = html`<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="star" viewBox="0 0 12 12"><path d="M5.28347 1.54556C5.57692 0.95096 6.42479 0.950961 6.71825 1.54556L7.82997 3.79817L10.3159 4.15939C10.9721 4.25474 11.2341 5.06112 10.7592 5.52394L8.96043 7.27736L9.38507 9.75321C9.49716 10.4067 8.81122 10.9051 8.22431 10.5966L6.00086 9.42761L3.7774 10.5966C3.19049 10.9051 2.50455 10.4067 2.61664 9.75321L3.04128 7.27736L1.24246 5.52394C0.767651 5.06111 1.02966 4.25474 1.68584 4.15939L4.17174 3.79817L5.28347 1.54556Z" /></symbol></svg>`;
+function ratingDisplayTemplate() {
+  return html` ${star} ${x => html`${html.partial(x.generateIcons())}`}<slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
+}
+const template$9 = ratingDisplayTemplate();
+
+const definition$9 = RatingDisplay.compose({
+  name: `${FluentDesignSystem.prefix}-rating-display`,
   template: template$9,
   styles: styles$9
 });
@@ -10140,7 +10460,7 @@ __decorateClass([attr({
 })], ToggleButton.prototype, "mixed", 2);
 
 const styles = css`
-  ${styles$s}
+  ${styles$v}
 
   :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}${primaryState}){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}${primaryState}:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}${subtleState}){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}${subtleState}:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}${outlineState}:hover),:host(${pressedState}${transparentState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}${outlineState}:active),:host(${pressedState}${transparentState}:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}${transparentState}){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}${transparentState}:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}${transparentState}:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${pressedState}),:host(${pressedState}${primaryState}),:host(${pressedState}${subtleState}),:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background:SelectedItem;color:SelectedItemText}`));