@fluentui/web-components 3.0.0-beta.76 → 3.0.0-beta.78

package/dist/web-components.js

@@ -4086,78 +4086,78 @@ function limit(min, max, value) {
   return Math.min(Math.max(value, min), max);
 }
 
-let uniqueIdCounter = 0;
+let uniqueIdCounter$1 = 0;
 /**
  * Generates a unique ID based on incrementing a counter.
  */
-function uniqueId(prefix = "") {
-  return `${prefix}${uniqueIdCounter++}`;
+function uniqueId$1(prefix = "") {
+  return `${prefix}${uniqueIdCounter$1++}`;
 }
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+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$x(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$x([attr({
+__decorateClass$A([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -4315,6 +4315,10 @@ const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.
 MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
 MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));
 
+const AnchorPositioningCSSSupported = CSS.supports("anchor-name: --a");
+const AnchorPositioningHTMLSupported = "anchor" in HTMLElement.prototype;
+const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
+
 class StartEnd {}
 function endSlotTemplate(options) {
   return html`<slot name="end" ${ref("end")}>${staticallyCompose(options.end)}</slot>`.inline();
@@ -4337,13 +4341,12 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
 const statesMap = /* @__PURE__ */new Map();
 function stateSelector(state) {
   return statesMap.get(state) ?? statesMap.set(state, CustomStatesSetSupported ? `:state(${state})` : `[state--${state}]`).get(state);
 }
 function toggleState(elementInternals, state, force) {
-  if (!state) {
+  if (!state || !elementInternals) {
     return;
   }
   if (!CustomStatesSetSupported) {
@@ -4386,12 +4389,12 @@ const AccordionItemMarkerPosition = {
   end: "end"
 };
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(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$w(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4406,7 +4409,7 @@ class BaseAccordionItem extends FASTElement {
     this.headinglevel = 2;
     this.expanded = false;
     this.disabled = false;
-    this.id = uniqueId("accordion-");
+    this.id = uniqueId$1("accordion-");
   }
   /**
    * Handles expanded changes
@@ -4425,18 +4428,18 @@ class BaseAccordionItem extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$w([attr({
+__decorateClass$z([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$w([attr({
+__decorateClass$z([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$w([attr({
+__decorateClass$z([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$w([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$z([attr], BaseAccordionItem.prototype, "id", 2);
 class AccordionItem extends BaseAccordionItem {
   constructor() {
     super(...arguments);
@@ -4467,15 +4470,16 @@ class AccordionItem extends BaseAccordionItem {
     toggleState(this.elementInternals, "block", next);
   }
 }
-__decorateClass$w([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$w([attr({
+__decorateClass$z([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$z([attr({
   attribute: "marker-position"
 })], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$w([attr({
+__decorateClass$z([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
 
+const activeState = stateSelector("active");
 const alignEndState = stateSelector("align-end");
 const alignStartState = stateSelector("align-start");
 const anchorState = stateSelector("anchor");
@@ -4498,6 +4502,7 @@ const customErrorState = stateSelector("custom-error");
 const dangerState = stateSelector("danger");
 const darkGreenState = stateSelector("dark-green");
 const darkRedState = stateSelector("dark-red");
+const descriptionState = stateSelector("description");
 const disabledState = stateSelector("disabled");
 const displayShadowState = stateSelector("display-shadow");
 const dotState = stateSelector("dot");
@@ -4512,6 +4517,7 @@ const fitCenterState = stateSelector("fit-center");
 const fitContainState = stateSelector("fit-contain");
 const fitCoverState = stateSelector("fit-cover");
 const fitNoneState = stateSelector("fit-none");
+const flipBlockState = stateSelector("flip-block");
 const focusVisibleState = stateSelector("focus-visible");
 const forestState = stateSelector("forest");
 const ghostState = stateSelector("ghost");
@@ -4538,14 +4544,17 @@ const mediumState = stateSelector("medium");
 const minkState = stateSelector("mink");
 const monospaceState = stateSelector("monospace");
 const multiLineState = stateSelector("multiline");
+const multipleState = stateSelector("multiple");
 const navyState = stateSelector("navy");
 const neutralState = stateSelector("neutral");
 const nowrapState = stateSelector("nowrap");
 const numericState = stateSelector("numeric");
+const openState = stateSelector("open");
 const outlineState = stateSelector("outline");
 const patternMismatchState = stateSelector("pattern-mismatch");
 const peachState = stateSelector("peach");
 const pinkState = stateSelector("pink");
+const placeholderShownState = stateSelector("placeholder-shown");
 const platinumState = stateSelector("platinum");
 const plumState = stateSelector("plum");
 const pressedState = stateSelector("pressed");
@@ -4561,6 +4570,7 @@ const resizeVerticalState = stateSelector("resize-vertical");
 const roundedState = stateSelector("rounded");
 const royalBlueState = stateSelector("royal-blue");
 const seafoamState = stateSelector("seafoam");
+const selectedState = stateSelector("selected");
 const semiboldState = stateSelector("semibold");
 const severeState = stateSelector("severe");
 const shadowState = stateSelector("shadow");
@@ -4837,7 +4847,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$B = css`
+const styles$E = css`
   ${display("block")}
 
   :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;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}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto / span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row: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(${disabledState}) .button{color:${colorNeutralForegroundDisabled}}:host(${disabledState}) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host(${expandedState}) .content{display:block}:host(${expandedState}) .default-marker-collapsed,:host(${expandedState}) ::slotted([slot='marker-collapsed']),:host(:not(${expandedState})) :is(.default-marker-expanded,.content),:host(:not(${expandedState})) ::slotted([slot='marker-expanded']){display:none}:host(${expandedState}) ::slotted([slot='marker-expanded']),:host(:not(${expandedState})) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(${smallState}) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${extraLargeState}) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(${alignEndState}) :slotted([slot='start']){grid-column:1 / span 1}:host(${alignEndState}) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4 / span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host(${alignEndState}) .button{grid-column:2 / span 3}:host([block]){max-width:100%}:host(${alignEndState}) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host(${alignEndState}:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host(${blockState}${alignEndState}) .heading{grid-template-columns:auto 1fr}:host(${alignEndState}) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5 / span 1}`;
@@ -4873,30 +4883,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}"><slot name="heading"></slot></button>${startSlotTemplate(options)}<slot name="marker-expanded">${staticallyCompose(options.expandedIcon)}</slot><slot name="marker-collapsed">${staticallyCompose(options.collapsedIcon)}</slot></div><div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
-const template$C = accordionItemTemplate({
+const template$F = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$C = AccordionItem.compose({
+const definition$F = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$C,
-  styles: styles$B
+  template: template$F,
+  styles: styles$E
 });
 
-definition$C.define(FluentDesignSystem.registry);
+definition$F.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
   multi: "multi"
 };
 
-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;
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(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$v(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -5035,12 +5045,12 @@ class Accordion extends FASTElement {
     });
   }
 }
-__decorateClass$v([attr({
+__decorateClass$y([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$v([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$y([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$A = css`
+const styles$D = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -5051,15 +5061,15 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$B = accordionTemplate();
+const template$E = accordionTemplate();
 
-const definition$B = Accordion.compose({
+const definition$E = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$B,
-  styles: styles$A
+  template: template$E,
+  styles: styles$D
 });
 
-definition$B.define(FluentDesignSystem.registry);
+definition$E.define(FluentDesignSystem.registry);
 
 const ButtonAppearance = {
   primary: "primary",
@@ -5097,12 +5107,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-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;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(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$u(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -5210,14 +5220,14 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$u([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$u([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$u([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$u([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$u([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$u([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$u([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$u([attr], BaseAnchor.prototype, "type", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$x([attr], BaseAnchor.prototype, "type", 2);
 class AnchorButton extends BaseAnchor {
   constructor() {
     super(...arguments);
@@ -5256,10 +5266,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$u([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$u([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$u([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$u([attr({
+__decorateClass$x([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$x([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$x([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$x([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -5269,13 +5279,13 @@ 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){:host{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'])){flex-shrink:0}:host(:not(${iconOnlyState})) :is([slot='end'],:host(:not(${iconOnlyState}))::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$z = css`
+const styles$C = 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-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host(${primaryState}:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}`));
 
-const styles$y = css`
+const styles$B = css`
   ${baseButtonStyles}
 
   ::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -5284,15 +5294,15 @@ const styles$y = 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$A = anchorTemplate$1();
+const template$D = anchorTemplate$1();
 
-const definition$A = AnchorButton.compose({
+const definition$D = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$A,
-  styles: styles$y
+  template: template$D,
+  styles: styles$B
 });
 
-definition$A.define(FluentDesignSystem.registry);
+definition$D.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -5374,12 +5384,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-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;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(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$t(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 class BaseAvatar extends FASTElement {
@@ -5394,9 +5404,9 @@ class BaseAvatar extends FASTElement {
     this.elementInternals.role = "img";
   }
 }
-__decorateClass$t([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$t([attr], BaseAvatar.prototype, "initials", 2);
-__decorateClass$t([attr], BaseAvatar.prototype, "active", 2);
+__decorateClass$w([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$w([attr], BaseAvatar.prototype, "initials", 2);
+__decorateClass$w([attr], BaseAvatar.prototype, "active", 2);
 const _Avatar = class _Avatar extends BaseAvatar {
   /**
    * Handles changes to observable properties
@@ -5449,13 +5459,13 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$t([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$t([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$t([attr({
+__decorateClass$w([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$w([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$w([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$t([attr], _Avatar.prototype, "color", 2);
-__decorateClass$t([attr({
+__decorateClass$w([attr], _Avatar.prototype, "color", 2);
+__decorateClass$w([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5480,22 +5490,22 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$x = css`
+const styles$A = 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(${brandState}){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host(${darkRedState}){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host(${cranberryState}){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host(${redState}){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host(${pumpkinState}){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host(${peachState}){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host(${marigoldState}){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host(${goldState}){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host(${brassState}){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host(${brownState}){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host(${forestState}){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host(${seafoamState}){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host(${darkGreenState}){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host(${lightTealState}){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host(${tealState}){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host(${steelState}){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host(${blueState}){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host(${royalBlueState}){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host(${cornflowerState}){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host(${navyState}){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host(${lavenderState}){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host(${purpleState}){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host(${grapeState}){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host(${lilacState}){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host(${pinkState}){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host(${magentaState}){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host(${plumState}){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host(${beigeState}){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host(${minkState}){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host(${platinumState}){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host(${anchorState}){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$z = avatarTemplate();
+const template$C = avatarTemplate();
 
-const definition$z = Avatar.compose({
+const definition$C = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$z,
-  styles: styles$x
+  template: template$C,
+  styles: styles$A
 });
 
-definition$z.define(FluentDesignSystem.registry);
+definition$C.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -5527,12 +5537,12 @@ const BadgeSize = {
   extraLarge: "extra-large"
 };
 
-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 Badge extends FASTElement {
@@ -5580,10 +5590,10 @@ class Badge extends FASTElement {
     swapStates(this.elementInternals, prev, next, BadgeSize);
   }
 }
-__decorateClass$s([attr], Badge.prototype, "appearance", 2);
-__decorateClass$s([attr], Badge.prototype, "color", 2);
-__decorateClass$s([attr], Badge.prototype, "shape", 2);
-__decorateClass$s([attr], Badge.prototype, "size", 2);
+__decorateClass$v([attr], Badge.prototype, "appearance", 2);
+__decorateClass$v([attr], Badge.prototype, "color", 2);
+__decorateClass$v([attr], Badge.prototype, "shape", 2);
+__decorateClass$v([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -5834,7 +5844,7 @@ const badgeTintStyles = css.partial`
   }
 `;
 
-css.partial`
+const typographyBody1Styles = css.partial`
   font-family: ${fontFamilyBase};
   font-size: ${fontSizeBase300};
   line-height: ${lineHeightBase300};
@@ -5852,13 +5862,13 @@ css.partial`
   line-height: ${lineHeightBase300};
   font-weight: ${fontWeightBold};
 `;
-css.partial`
+const typographyBody2Styles = css.partial`
   font-family: ${fontFamilyBase};
   font-size: ${fontSizeBase400};
   line-height: ${lineHeightBase400};
   font-weight: ${fontWeightRegular};
 `;
-css.partial`
+const typographyCaption1Styles = css.partial`
   font-family: ${fontFamilyBase};
   font-size: ${fontSizeBase200};
   line-height: ${lineHeightBase200};
@@ -5937,7 +5947,7 @@ css.partial`
   font-weight: ${fontWeightSemibold};
 `;
 
-const styles$w = css`
+const styles$z = 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}
@@ -5950,22 +5960,22 @@ const styles$w = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$y = badgeTemplate();
+const template$B = badgeTemplate();
 
-const definition$y = Badge.compose({
+const definition$B = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$y,
-  styles: styles$w
+  template: template$B,
+  styles: styles$z
 });
 
-definition$y.define(FluentDesignSystem.registry);
+definition$B.define(FluentDesignSystem.registry);
 
-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 BaseButton extends FASTElement {
@@ -6169,44 +6179,44 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   mode: "boolean"
 })], BaseButton.prototype, "autofocus", 2);
-__decorateClass$r([observable], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$r([attr({
+__decorateClass$u([observable], BaseButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$u([attr({
   mode: "boolean"
 })], BaseButton.prototype, "disabled", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "tabindex",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseButton.prototype, "tabIndex", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "formaction"
 })], BaseButton.prototype, "formAction", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "form"
 })], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "formenctype"
 })], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "formmethod"
 })], BaseButton.prototype, "formMethod", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr({
   attribute: "formtarget"
 })], BaseButton.prototype, "formTarget", 2);
-__decorateClass$r([attr], BaseButton.prototype, "name", 2);
-__decorateClass$r([attr], BaseButton.prototype, "type", 2);
-__decorateClass$r([attr], BaseButton.prototype, "value", 2);
+__decorateClass$u([attr], BaseButton.prototype, "name", 2);
+__decorateClass$u([attr], BaseButton.prototype, "type", 2);
+__decorateClass$u([attr], BaseButton.prototype, "value", 2);
 class Button extends BaseButton {
   constructor() {
     super(...arguments);
@@ -6245,10 +6255,10 @@ class Button extends BaseButton {
     toggleState(this.elementInternals, "icon", next);
   }
 }
-__decorateClass$r([attr], Button.prototype, "appearance", 2);
-__decorateClass$r([attr], Button.prototype, "shape", 2);
-__decorateClass$r([attr], Button.prototype, "size", 2);
-__decorateClass$r([attr({
+__decorateClass$u([attr], Button.prototype, "appearance", 2);
+__decorateClass$u([attr], Button.prototype, "shape", 2);
+__decorateClass$u([attr], Button.prototype, "size", 2);
+__decorateClass$u([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
@@ -6257,15 +6267,15 @@ applyMixins(Button, StartEnd);
 function buttonTemplate$1(options = {}) {
   return html`<template tabindex="${x => x.disabled ? null : x.tabIndex ?? 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$x = buttonTemplate$1();
+const template$A = buttonTemplate$1();
 
-const definition$x = Button.compose({
+const definition$A = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$x,
-  styles: styles$z
+  template: template$A,
+  styles: styles$C
 });
 
-definition$x.define(FluentDesignSystem.registry);
+definition$A.define(FluentDesignSystem.registry);
 
 const CheckboxShape = {
   circular: "circular",
@@ -6276,12 +6286,12 @@ const CheckboxSize = {
   large: "large"
 };
 
-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 BaseCheckbox extends FASTElement {
@@ -6615,27 +6625,27 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$q([attr({
+__decorateClass$t([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$q([observable], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$q([attr({
+__decorateClass$t([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$t([attr({
   attribute: "disabled",
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$q([attr({
+__decorateClass$t([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$q([attr({
+__decorateClass$t([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$q([attr({
+__decorateClass$t([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$q([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$q([attr({
+__decorateClass$t([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$t([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 class Checkbox extends BaseCheckbox {
@@ -6698,17 +6708,17 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$q([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$q([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$q([attr], Checkbox.prototype, "size", 2);
+__decorateClass$t([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$t([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$t([attr], Checkbox.prototype, "size", 2);
 
-const styles$v = css`
+const styles$y = 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}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}: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})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),: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}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}`));
 
-const checkedIndicator$1 = html.partial( /* html */
+const checkedIndicator$2 = html.partial( /* html */
 `
     <svg
         fill="currentColor"
@@ -6728,23 +6738,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$w = checkboxTemplate({
-  checkedIndicator: checkedIndicator$1,
+const template$z = checkboxTemplate({
+  checkedIndicator: checkedIndicator$2,
   indeterminateIndicator
 });
 
-const definition$w = Checkbox.compose({
+const definition$z = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$w,
-  styles: styles$v
+  template: template$z,
+  styles: styles$y
 });
 
-definition$w.define(FluentDesignSystem.registry);
+definition$z.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$u = css`
-  ${styles$z}
+const styles$x = css`
+  ${styles$C}
 
   :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}}`;
@@ -6752,15 +6762,15 @@ const styles$u = css`
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$v = buttonTemplate();
+const template$y = buttonTemplate();
 
-const definition$v = CompoundButton.compose({
+const definition$y = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$v,
-  styles: styles$u
+  template: template$y,
+  styles: styles$x
 });
 
-definition$v.define(FluentDesignSystem.registry);
+definition$y.define(FluentDesignSystem.registry);
 
 const CounterBadgeAppearance = {
   filled: "filled",
@@ -6789,12 +6799,12 @@ const CounterBadgeSize = {
   extraLarge: "extra-large"
 };
 
-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 CounterBadge extends FASTElement {
@@ -6871,27 +6881,27 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$p([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$p([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$p([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$p([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$p([attr({
+__decorateClass$s([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$s([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$s([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$s([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$s([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$p([attr({
+__decorateClass$s([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$p([attr({
+__decorateClass$s([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$p([attr({
+__decorateClass$s([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const styles$t = css`
+const styles$w = css`
   :host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -6904,15 +6914,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$u = composeTemplate();
+const template$x = composeTemplate();
 
-const definition$u = CounterBadge.compose({
+const definition$x = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$u,
-  styles: styles$t
+  template: template$x,
+  styles: styles$w
 });
 
-definition$u.define(FluentDesignSystem.registry);
+definition$x.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -6920,12 +6930,12 @@ const DialogType = {
   alert: "alert"
 };
 
-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;
 };
 class Dialog extends FASTElement {
@@ -6993,35 +7003,35 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$o([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$o([attr({
+__decorateClass$r([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$r([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$o([attr({
+__decorateClass$r([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$o([attr], Dialog.prototype, "type", 2);
+__decorateClass$r([attr], Dialog.prototype, "type", 2);
 
-const template$t = 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$w = 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$s = css`
+const styles$v = 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$t = Dialog.compose({
+const definition$w = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$t,
-  styles: styles$s
+  template: template$w,
+  styles: styles$v
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$w.define(FluentDesignSystem.registry);
 
-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 DialogBody extends FASTElement {
@@ -7030,7 +7040,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$n([attr({
+__decorateClass$q([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -7049,20 +7059,20 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$s = 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$v = 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$r = css`
+const styles$u = 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$s = DialogBody.compose({
+const definition$v = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$s,
-  styles: styles$r
+  template: template$v,
+  styles: styles$u
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$v.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -7086,12 +7096,12 @@ const DividerAppearance = {
   subtle: "subtle"
 };
 
-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 BaseDivider extends FASTElement {
@@ -7138,8 +7148,8 @@ class BaseDivider extends FASTElement {
     swapStates(this.elementInternals, previous, next, DividerOrientation);
   }
 }
-__decorateClass$m([attr], BaseDivider.prototype, "role", 2);
-__decorateClass$m([attr], BaseDivider.prototype, "orientation", 2);
+__decorateClass$p([attr], BaseDivider.prototype, "role", 2);
+__decorateClass$p([attr], BaseDivider.prototype, "orientation", 2);
 class Divider extends BaseDivider {
   /**
    * Handles changes to align-content attribute custom states
@@ -7166,32 +7176,32 @@ class Divider extends BaseDivider {
     toggleState(this.elementInternals, "inset", next);
   }
 }
-__decorateClass$m([attr({
+__decorateClass$p([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$m([attr], Divider.prototype, "appearance", 2);
-__decorateClass$m([attr({
+__decorateClass$p([attr], Divider.prototype, "appearance", 2);
+__decorateClass$p([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
 function dividerTemplate() {
   return html`<slot></slot>`;
 }
-const template$r = dividerTemplate();
+const template$u = dividerTemplate();
 
-const styles$q = css`
+const styles$t = 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$r = Divider.compose({
+const definition$u = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$r,
-  styles: styles$q
+  template: template$u,
+  styles: styles$t
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
 
 const DrawerPosition = {
   start: "start",
@@ -7209,12 +7219,12 @@ const DrawerType = {
   inline: "inline"
 };
 
-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 Drawer extends FASTElement {
@@ -7262,77 +7272,830 @@ class Drawer extends FASTElement {
     });
   }
   /**
-   * @public
-   * Method to hide the drawer
+   * @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$o([attr], Drawer.prototype, "type", 2);
+__decorateClass$o([attr({
+  attribute: "aria-labelledby"
+})], Drawer.prototype, "ariaLabelledby", 2);
+__decorateClass$o([attr({
+  attribute: "aria-describedby"
+})], Drawer.prototype, "ariaDescribedby", 2);
+__decorateClass$o([attr], Drawer.prototype, "position", 2);
+__decorateClass$o([attr({
+  attribute: "size"
+})], Drawer.prototype, "size", 2);
+__decorateClass$o([observable], Drawer.prototype, "dialog", 2);
+
+const styles$s = 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$t = drawerTemplate();
+
+const definition$t = Drawer.compose({
+  name: `${FluentDesignSystem.prefix}-drawer`,
+  template: template$t,
+  styles: styles$s
+});
+
+definition$t.define(FluentDesignSystem.registry);
+
+class DrawerBody extends FASTElement {}
+
+const styles$r = css`
+  ${display("grid")}
+  :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}`;
+
+function drawerBodyTemplate() {
+  return html`<div class="header" part="header"><slot name="title"></slot><slot name="close"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
+}
+const template$s = drawerBodyTemplate();
+
+const definition$s = DrawerBody.compose({
+  name: `${FluentDesignSystem.prefix}-drawer-body`,
+  template: template$s,
+  styles: styles$r
+});
+
+definition$s.define(FluentDesignSystem.registry);
+
+function isListbox(element, tagName = "-listbox") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName);
+}
+
+function isDropdownOption(value, tagName = "-option") {
+  if (value?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return value.tagName.toLowerCase().endsWith(tagName);
+}
+
+function getLanguage(rootNode) {
+  return rootNode.closest("[lang]")?.lang ?? "en";
+}
+
+let uniqueIdCounter = 0;
+function uniqueId(prefix = "id-") {
+  const str = `${prefix}${uniqueIdCounter++}`;
+  return document.getElementById(str) ? uniqueId(prefix) : str;
+}
+
+const DropdownAppearance = {
+  filledDarker: "filled-darker",
+  filledLighter: "filled-lighter",
+  outline: "outline",
+  transparent: "transparent"
+};
+const DropdownSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+const DropdownType = {
+  combobox: "combobox",
+  dropdown: "dropdown",
+  select: "select"
+};
+
+const dropdownIndicatorTemplate = html`<svg class="chevron-down-20-regular" role="button" slot="indicator" viewBox="0 0 20 20" ${ref("indicator")}><path d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0" fill="currentColor" /></svg>`;
+const dropdownInputTemplate = html`<input @input="${(x, c) => x.inputHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-labelledby="${x => x.ariaLabelledBy}" aria-expanded="${x => x.open}" aria-haspopup="listbox" placeholder="${x => x.placeholder}" role="combobox" ?disabled="${x => x.disabled}" type="${x => x.type}" value="${x => x.valueAttribute}" ${ref("control")} />`;
+const dropdownButtonTemplate = html`<button aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-expanded="${x => x.open}" aria-haspopup="listbox" role="combobox" ?disabled="${x => x.disabled}" type="button" ${ref("control")}>${x => x.displayValue}</button>`;
+function dropdownTemplate(options = {}) {
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><div class="control"><slot name="control" ${ref("controlSlot")}></slot><slot name="indicator" ${ref("indicatorSlot")}>${staticallyCompose(options.indicator)}</slot></div><slot ${ref("listboxSlot")}></slot></template>`;
+}
+const template$r = dropdownTemplate({
+  indicator: dropdownIndicatorTemplate
+});
+
+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$n(target, key, result);
+  return result;
+};
+class BaseDropdown extends FASTElement {
+  constructor() {
+    super();
+    this.activeIndex = 0;
+    this.id = uniqueId("dropdown-");
+    this.required = false;
+    this.type = DropdownType.dropdown;
+    this.valueAttribute = "";
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "presentation";
+    Updates.enqueue(() => {
+      this.insertControl();
+    });
+  }
+  get activeDescendant() {
+    if (this.open) {
+      return this.enabledOptions[this.activeIndex]?.id;
+    }
+    return void 0;
+  }
+  /**
+   * Sets the active index when the active index property changes.
+   *
+   * @param prev - the previous active index
+   * @param next - the current active index
+   * @internal
+   */
+  activeIndexChanged(prev, next) {
+    if (typeof next === "number") {
+      const optionIndex = this.matches(":has(:focus-visible)") ? next : -1;
+      this.enabledOptions.forEach((option, index) => {
+        option.active = index === optionIndex;
+      });
+      if (this.open) {
+        this.enabledOptions[optionIndex]?.scrollIntoView({
+          block: "nearest"
+        });
+      }
+    }
+  }
+  /**
+   * Updates properties on the control element when the control slot changes.
+   *
+   * @param prev - the previous control element
+   * @param next - the current control element
+   * @internal
+   * @remarks
+   * The control element is assigned to the dropdown via the control slot with manual slot assignment.
+   */
+  controlChanged(prev, next) {
+    if (next) {
+      next.id = next.id || uniqueId("input-");
+      this.controlSlot?.assign(next);
+    }
+  }
+  /**
+   * Updates the disabled state of the options when the disabled property changes.
+   *
+   * @param prev - the previous disabled state
+   * @param next - the current disabled state
+   */
+  disabledChanged(prev, next) {
+    Updates.enqueue(() => {
+      this.options.forEach(option => {
+        option.disabled = option.disabledAttribute || this.disabled;
+      });
+    });
+  }
+  get displayValue() {
+    if (!this.$fastController.isConnected || !this.control || this.isCombobox && this.multiple) {
+      toggleState(this.elementInternals, "placeholder-shown", false);
+      return "";
+    }
+    this.listFormatter = this.listFormatter ?? new Intl.ListFormat(getLanguage(this), {
+      type: "conjunction",
+      style: "narrow"
+    });
+    const displayValue = this.listFormatter.format(this.selectedOptions.map(x => x.text));
+    toggleState(this.elementInternals, "placeholder-shown", !displayValue);
+    if (this.isCombobox) {
+      return displayValue;
+    }
+    return displayValue || this.placeholder;
+  }
+  /**
+   * Updates properties on the listbox element when the listbox reference changes.
+   *
+   * @param prev - the previous listbox element
+   * @param next - the current listbox element
+   * @internal
+   *
+   * @remarks
+   * The listbox element is assigned to the dropdown via the default slot with manual slot assignment.
+   */
+  listboxChanged(prev, next) {
+    if (prev) {
+      Observable.getNotifier(this).unsubscribe(prev);
+    }
+    if (next) {
+      next.dropdown = this;
+      next.popover = "manual";
+      this.listboxSlot.assign(next);
+      const notifier = Observable.getNotifier(this);
+      notifier.subscribe(next);
+      for (const key of ["disabled", "multiple"]) {
+        notifier.notify(key);
+      }
+      Updates.enqueue(() => {
+        this.enabledOptions.filter(x => x.defaultSelected).forEach((x, i) => {
+          x.selected = this.multiple || i === 0;
+        });
+      });
+    }
+  }
+  /**
+   * Toggles between single and multiple selection modes when the `multiple` property changes.
+   *
+   * @param prev - the previous multiple state
+   * @param next - the next multiple state
+   * @internal
+   */
+  multipleChanged(prev, next) {
+    this.elementInternals.ariaMultiSelectable = next ? "true" : "false";
+    toggleState(this.elementInternals, "multiple", next);
+    this.value = null;
+  }
+  /**
+   * Updates the name of the options when the name property changes.
+   *
+   * @param prev - the previous name
+   * @param next - the current name
+   */
+  nameChanged(prev, next) {
+    Updates.enqueue(() => {
+      this.options.forEach(option => {
+        option.name = next;
+      });
+    });
+  }
+  /**
+   * Handles the open state of the dropdown.
+   *
+   * @param prev - the previous open state
+   * @param next - the current open state
+   *
+   * @internal
+   */
+  openChanged(prev, next) {
+    toggleState(this.elementInternals, "open", next);
+    this.elementInternals.ariaExpanded = next ? "true" : "false";
+    this.activeIndex = this.selectedIndex ?? -1;
+  }
+  /**
+   * Changes the slotted control element based on the dropdown type.
+   *
+   * @param prev - the previous dropdown type
+   * @param next - the current dropdown type
+   * @internal
+   */
+  typeChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.insertControl();
+    }
+  }
+  /**
+   * The collection of enabled options.
+   * @public
+   */
+  get enabledOptions() {
+    return this.listbox?.enabledOptions ?? [];
+  }
+  /**
+   * Resets the form value to its initial value when the form is reset.
+   *
+   * @internal
+   */
+  formResetCallback() {
+    this.enabledOptions.forEach((x, i) => {
+      if (this.multiple) {
+        x.selected = !!x.defaultSelected;
+        return;
+      }
+      if (!x.defaultSelected) {
+        x.selected = false;
+        return;
+      }
+      this.selectOption(i);
+    });
+  }
+  /**
+   * A reference to the first freeform option, if present.
+   *
+   * @internal
+   */
+  get freeformOption() {
+    return this.enabledOptions.find(x => x.freeform);
+  }
+  /**
+   * Indicates whether the dropdown is a combobox.
+   *
+   * @internal
+   */
+  get isCombobox() {
+    return this.type === DropdownType.combobox;
+  }
+  /**
+   * The collection of all child options.
+   *
+   * @public
+   */
+  get options() {
+    return this.listbox?.options ?? [];
+  }
+  /**
+   * The index of the first selected option, scoped to the enabled options.
+   *
+   * @internal
+   * @remarks
+   * This property is a reflection of {@link Listbox.selectedIndex}.
+   */
+  get selectedIndex() {
+    return this.enabledOptions.findIndex(x => x.selected) ?? -1;
+  }
+  /**
+   * The collection of selected options.
+   *
+   * @public
+   * @remarks
+   * This property is a reflection of {@link Listbox.selectedOptions}.
+   */
+  get selectedOptions() {
+    return this.listbox?.selectedOptions ?? [];
+  }
+  /**
+   * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+   * specified (e.g., via `setCustomValidity`).
+   *
+   * @internal
+   */
+  get validationMessage() {
+    if (this.elementInternals.validationMessage) {
+      return this.elementInternals.validationMessage;
+    }
+    if (!this.validationFallbackMessage) {
+      const validationMessageFallbackControl = document.createElement("input");
+      validationMessageFallbackControl.type = "radio";
+      validationMessageFallbackControl.required = true;
+      validationMessageFallbackControl.checked = false;
+      this.validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+    }
+    return this.validationFallbackMessage;
+  }
+  /**
+   * The current value of the selected option.
+   *
+   * @public
+   */
+  get value() {
+    Observable.notify(this, "value");
+    return this.enabledOptions.find(x => x.selected)?.value ?? null;
+  }
+  set value(next) {
+    if (this.multiple) {
+      return;
+    }
+    this.selectOption(this.enabledOptions.findIndex(x => x.value === next));
+    Observable.track(this, "value");
+  }
+  /**
+   * Handles the change events for the dropdown.
+   *
+   * @param e - the event object
+   *
+   * @public
+   */
+  changeHandler(e) {
+    if (this === e.target) {
+      return true;
+    }
+    const optionIndex = this.isCombobox ? this.enabledOptions.findIndex(x => x.text === this.control.value) : this.enabledOptions.indexOf(e.target);
+    this.selectOption(optionIndex);
+    return true;
+  }
+  /**
+   * Handles the click events for the dropdown.
+   *
+   * @param e - the event object
+   *
+   * @public
+   */
+  clickHandler(e) {
+    if (this.disabled) {
+      return;
+    }
+    const target = e.target;
+    this.focus();
+    if (target === this.control && !this.isCombobox) {
+      this.listbox.togglePopover();
+      return true;
+    }
+    if (!this.open) {
+      this.listbox.showPopover();
+      return true;
+    }
+    if (isDropdownOption(target) && !this.multiple) {
+      if (target.disabled) {
+        return;
+      }
+      if (this.isCombobox) {
+        this.control.value = target.text;
+        this.updateFreeformOption();
+      }
+      this.listbox.hidePopover();
+    }
+    return true;
+  }
+  /**
+   * Filters the options based on the input value.
+   *
+   * @param value - the input value to filter the options by
+   * @param collection - the collection of options to filter
+   * @returns the filtered options
+   * @internal
+   */
+  filterOptions(value, collection = this.enabledOptions) {
+    if (!this.listCollator) {
+      this.listCollator = new Intl.Collator(getLanguage(this), {
+        usage: "search",
+        sensitivity: "base"
+      });
+    }
+    return collection.filter(x => {
+      return this.listCollator.compare(x.text.substring(0, Math.min(x.text.length, value.length)), value) === 0;
+    });
+  }
+  /**
+   * Focuses the control when the dropdown receives focus.
+   *
+   * @internal
+   */
+  focus(options) {
+    if (this.disabled) {
+      return;
+    }
+    this.control.focus(options);
+  }
+  /**
+   * Toggles the listbox when the control element loses focus.
+   *
+   * @param e - the focus event
+   * @internal
+   */
+  focusoutHandler(e) {
+    const relatedTarget = e.relatedTarget;
+    if (this.open && !this.contains(relatedTarget)) {
+      this.listbox.togglePopover();
+    }
+    return true;
+  }
+  /**
+   * Ensures the active index is within bounds of the enabled options. Out-of-bounds indices are wrapped to the opposite
+   * end of the range.
+   *
+   * @param index - the desired index
+   * @param upperBound - the upper bound of the range
+   * @returns the index in bounds
+   * @internal
+   */
+  getEnabledIndexInBounds(index, upperBound = this.enabledOptions.length || 0) {
+    if (upperBound === 0) {
+      return -1;
+    }
+    return (index + upperBound) % upperBound;
+  }
+  /**
+   * Handles the input events for the dropdown from the control element.
+   *
+   * @param e - the input event
+   * @public
+   */
+  inputHandler(e) {
+    if (!this.open) {
+      this.listbox.showPopover();
+    }
+    this.updateFreeformOption();
+    const controlValue = this.control.value;
+    const index = this.enabledOptions.indexOf(this.filterOptions(controlValue)[0] ?? null);
+    this.activeIndex = index;
+    return true;
+  }
+  /**
+   * Inserts the control element based on the dropdown type.
+   *
+   * @public
+   * @remarks
+   * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
+   */
+  insertControl() {
+    this.controlSlot?.assignedNodes().forEach(x => this.removeChild(x));
+    if (this.type === DropdownType.combobox) {
+      dropdownInputTemplate.render(this, this);
+      return;
+    }
+    dropdownButtonTemplate.render(this, this);
+  }
+  /**
+   * Handles the keydown events for the dropdown.
+   *
+   * @param e - the keyboard event
+   * @public
+   */
+  keydownHandler(e) {
+    let increment = 0;
+    switch (e.key) {
+      case "ArrowUp":
+        {
+          e.preventDefault();
+          increment = -1;
+          break;
+        }
+      case "ArrowDown":
+        {
+          e.preventDefault();
+          increment = 1;
+          break;
+        }
+      case " ":
+        {
+          if (this.isCombobox) {
+            break;
+          }
+          e.preventDefault();
+        }
+      case "Enter":
+      case "Tab":
+        {
+          if (this.open) {
+            this.selectOption(this.activeIndex);
+            if (this.multiple) {
+              break;
+            }
+            this.listbox.hidePopover();
+            return e.key === "Tab";
+          }
+          this.listbox.showPopover();
+          break;
+        }
+      case "Escape":
+        {
+          this.activeIndex = this.multiple ? 0 : this.selectedIndex;
+          this.listbox.hidePopover();
+          break;
+        }
+    }
+    if (!increment) {
+      return true;
+    }
+    if (!this.open) {
+      this.listbox.showPopover();
+      return;
+    }
+    let nextIndex = this.activeIndex;
+    nextIndex += increment;
+    let indexInBounds = this.getEnabledIndexInBounds(nextIndex);
+    if (indexInBounds === 0 && this.freeformOption?.hidden) {
+      indexInBounds = this.getEnabledIndexInBounds(nextIndex + increment);
+    }
+    this.activeIndex = indexInBounds;
+    return true;
+  }
+  /**
+   * Prevents the default behavior of the mousedown event. This is necessary to prevent the input from losing focus
+   * when the dropdown is open.
+   *
+   * @param e - the mouse event
+   *
+   * @internal
+   */
+  mousedownHandler(e) {
+    if (this.disabled || e.target === this.control && !this.isCombobox) {
+      return;
+    }
+    return !isDropdownOption(e.target);
+  }
+  /**
+   * Selects an option by index.
+   *
+   * @param index - The index of the option to select.
+   * @public
+   */
+  selectOption(index = this.selectedIndex) {
+    this.listbox.selectOption(index);
+    this.control.value = this.displayValue;
+    this.setValidity();
+    this.updateFreeformOption();
+  }
+  /**
+   * Sets the validity of the element.
+   *
+   * @param flags - Validity flags to set.
+   * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
+   * @param anchor - Optional anchor to use for the validation message.
+   *
+   * @internal
+   */
+  setValidity(flags, message, anchor) {
+    if (this.$fastController.isConnected) {
+      if (this.disabled || !this.required) {
+        this.elementInternals.setValidity({});
+        return;
+      }
+      const valueMissing = this.required && this.listbox.selectedOptions.length === 0;
+      this.elementInternals.setValidity({
+        valueMissing,
+        ...flags
+      }, message ?? this.validationMessage, anchor ?? this.listbox.enabledOptions[0]);
+    }
+  }
+  /**
+   * Updates the freeform option with the provided value.
+   *
+   * @param value - the value to update the freeform option with
+   * @internal
+   */
+  updateFreeformOption(value = this.control.value) {
+    if (!this.freeformOption) {
+      return;
+    }
+    if (value === "" || this.filterOptions(value, this.enabledOptions.filter(x => !x.freeform)).length) {
+      this.freeformOption.value = "";
+      this.freeformOption.selected = false;
+      this.freeformOption.hidden = true;
+      return;
+    }
+    this.freeformOption.value = value;
+    this.freeformOption.hidden = false;
+  }
+}
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+BaseDropdown.formAssociated = true;
+__decorateClass$n([volatile], BaseDropdown.prototype, "activeDescendant", 1);
+__decorateClass$n([observable], BaseDropdown.prototype, "activeIndex", 2);
+__decorateClass$n([attr({
+  attribute: "aria-labelledby",
+  mode: "fromView"
+})], BaseDropdown.prototype, "ariaLabelledBy", 2);
+__decorateClass$n([observable], BaseDropdown.prototype, "control", 2);
+__decorateClass$n([attr({
+  mode: "boolean"
+})], BaseDropdown.prototype, "disabled", 2);
+__decorateClass$n([volatile], BaseDropdown.prototype, "displayValue", 1);
+__decorateClass$n([attr({
+  attribute: "id"
+})], BaseDropdown.prototype, "id", 2);
+__decorateClass$n([observable], BaseDropdown.prototype, "indicator", 2);
+__decorateClass$n([observable], BaseDropdown.prototype, "indicatorSlot", 2);
+__decorateClass$n([attr({
+  attribute: "value",
+  mode: "fromView"
+})], BaseDropdown.prototype, "initialValue", 2);
+__decorateClass$n([observable], BaseDropdown.prototype, "listbox", 2);
+__decorateClass$n([observable], BaseDropdown.prototype, "listboxSlot", 2);
+__decorateClass$n([attr({
+  mode: "boolean"
+})], BaseDropdown.prototype, "multiple", 2);
+__decorateClass$n([attr], BaseDropdown.prototype, "name", 2);
+__decorateClass$n([observable], BaseDropdown.prototype, "open", 2);
+__decorateClass$n([attr], BaseDropdown.prototype, "placeholder", 2);
+__decorateClass$n([attr({
+  mode: "boolean"
+})], BaseDropdown.prototype, "required", 2);
+__decorateClass$n([attr], BaseDropdown.prototype, "type", 2);
+__decorateClass$n([attr({
+  attribute: "value"
+})], BaseDropdown.prototype, "valueAttribute", 2);
+const _Dropdown = class _Dropdown extends BaseDropdown {
+  constructor() {
+    super();
+    this.appearance = DropdownAppearance.outline;
+    this.addEventListener("connected", this.listboxConnectedHandler);
+  }
+  /**
+   * Swaps appearance states when the appearance property changes.
+   *
+   * @param prev - the previous appearance state
+   * @param next - the current appearance state
+   * @internal
+   */
+  appearanceChanged(prev, next) {
+    swapStates(this.elementInternals, prev, next, DropdownAppearance);
+  }
+  /**
+   * Swaps size states when the size property changes.
+   *
+   * @param prev - the previous size state
+   * @param next - the current size state
+   * @internal
+   */
+  sizeChanged(prev, next) {
+    swapStates(this.elementInternals, prev, next, DropdownSize);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.anchorPositionFallback();
+  }
+  disconnectedCallback() {
+    _Dropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
+    super.disconnectedCallback();
+  }
+  /**
+   * Handles the connected event for the listbox.
+   *
+   * @param e - the event object
+   * @internal
    */
-  hide() {
-    this.emitBeforeToggle();
-    this.dialog.close();
-    this.emitToggle();
+  listboxConnectedHandler(e) {
+    const target = e.target;
+    if (isListbox(target)) {
+      this.listbox = target;
+    }
   }
   /**
-   * @public
-   * @param event - The click event
-   * @returns boolean - Always returns true
-   * Handles click events on the drawer.
+   * Adds or removes the window event listener based on the open state.
+   *
+   * @param prev - the previous open state
+   * @param next - the current open state
+   * @internal
    */
-  clickHandler(event) {
-    event.preventDefault();
-    if (this.dialog.open && event.target === this.dialog) {
-      this.hide();
+  openChanged(prev, next) {
+    super.openChanged(prev, next);
+    if (next) {
+      _Dropdown.AnchorPositionFallbackObserver?.observe(this.listbox);
+      return;
     }
-    return true;
+    _Dropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
   }
-}
-__decorateClass$l([attr], Drawer.prototype, "type", 2);
-__decorateClass$l([attr({
-  attribute: "aria-labelledby"
-})], Drawer.prototype, "ariaLabelledby", 2);
-__decorateClass$l([attr({
-  attribute: "aria-describedby"
-})], Drawer.prototype, "ariaDescribedby", 2);
-__decorateClass$l([attr], Drawer.prototype, "position", 2);
-__decorateClass$l([attr({
-  attribute: "size"
-})], Drawer.prototype, "size", 2);
-__decorateClass$l([observable], Drawer.prototype, "dialog", 2);
-
-const styles$p = 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$q = drawerTemplate();
-
-const definition$q = Drawer.compose({
-  name: `${FluentDesignSystem.prefix}-drawer`,
-  template: template$q,
-  styles: styles$p
-});
-
-definition$q.define(FluentDesignSystem.registry);
-
-class DrawerBody extends FASTElement {}
+  /**
+   * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
+   * viewport bounds. One static observer is used for all dropdowns.
+   *
+   * @internal
+   */
+  anchorPositionFallback() {
+    _Dropdown.AnchorPositionFallbackObserver = _Dropdown.AnchorPositionFallbackObserver ?? new IntersectionObserver(entries => {
+      entries.forEach(({
+        boundingClientRect,
+        isIntersecting,
+        target
+      }) => {
+        if (isListbox(target) && !isIntersecting) {
+          if (boundingClientRect.bottom > window.innerHeight) {
+            toggleState(target.dropdown.elementInternals, "flip-block", true);
+            return;
+          }
+          if (boundingClientRect.top < 0) {
+            toggleState(target.dropdown.elementInternals, "flip-block", false);
+          }
+        }
+      });
+    }, {
+      threshold: 1
+    });
+  }
+};
+__decorateClass$n([attr], _Dropdown.prototype, "appearance", 2);
+__decorateClass$n([attr], _Dropdown.prototype, "size", 2);
+let Dropdown = _Dropdown;
 
-const styles$o = css`
-  ${display("grid")}
-  :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}`;
+const styles$q = css`
+  ${display("inline-flex")}
 
-function drawerBodyTemplate() {
-  return html`<div class="header" part="header"><slot name="title"></slot><slot name="close"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
-}
-const template$p = drawerBodyTemplate();
+  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host(${smallState}) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host(${largeState}) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host(${smallState}) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host(${largeState}) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where(${outlineState},${transparentState})) .control::before{background-color:${colorNeutralStrokeAccessible}}:host(${transparentState}) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host(${outlineState}) .control{--control-border-color:${colorNeutralStroke1}}:host(${outlineState}) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where(${outlineState},${transparentState})) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host(${outlineState}) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host(${outlineState}) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where(${outlineState},${transparentState})) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where(${outlineState},${transparentState})) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host(${filledDarkerState}) .control{background-color:${colorNeutralBackground3}}:host(:where(${filledLighterState},${filledDarkerState})) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]){inset:unset;position:absolute;position-anchor:--dropdown-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,block-start;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);overflow:auto}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){::slotted([popover]){margin-block-start:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin});max-height:50vh}:host(${smallState}) ::slotted([popover]){margin-block-start:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host(${largeState}) ::slotted([popover]){margin-block-start:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}:host(${flipBlockState}) ::slotted([popover]){margin-block-start:revert;transform:translate(0,-100%)}}`;
 
-const definition$p = DrawerBody.compose({
-  name: `${FluentDesignSystem.prefix}-drawer-body`,
-  template: template$p,
-  styles: styles$o
+const definition$r = Dropdown.compose({
+  name: `${FluentDesignSystem.prefix}-dropdown`,
+  template: template$r,
+  styles: styles$q,
+  shadowOptions: {
+    slotAssignment: "manual"
+  }
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$r.define(FluentDesignSystem.registry);
 
 const LabelPosition = {
   above: "above",
@@ -7353,12 +8116,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-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$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$k(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 class BaseField extends FASTElement {
@@ -7493,7 +8256,7 @@ class BaseField extends FASTElement {
    */
   setLabelProperties() {
     if (this.$fastController.isConnected) {
-      this.input.id = this.input.id || uniqueId("input");
+      this.input.id = this.input.id || uniqueId$1("input");
       this.labelSlot?.forEach(label => {
         if (label instanceof HTMLLabelElement) {
           label.htmlFor = label.htmlFor || this.input.id;
@@ -7526,26 +8289,26 @@ class BaseField extends FASTElement {
     }
   }
 }
-__decorateClass$k([observable], BaseField.prototype, "labelSlot", 2);
-__decorateClass$k([observable], BaseField.prototype, "messageSlot", 2);
-__decorateClass$k([observable], BaseField.prototype, "slottedInputs", 2);
-__decorateClass$k([observable], BaseField.prototype, "input", 2);
+__decorateClass$m([observable], BaseField.prototype, "labelSlot", 2);
+__decorateClass$m([observable], BaseField.prototype, "messageSlot", 2);
+__decorateClass$m([observable], BaseField.prototype, "slottedInputs", 2);
+__decorateClass$m([observable], BaseField.prototype, "input", 2);
 class Field extends BaseField {
   constructor() {
     super(...arguments);
     this.labelPosition = LabelPosition.above;
   }
 }
-__decorateClass$k([attr({
+__decorateClass$m([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
 
-const styles$n = css`
+const styles$p = css`
   ${display("inline-grid")}
 
   :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}: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';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host([label-position='below']:not(${hasMessageState})){grid-template-areas:'input' 'label'}::slotted([slot='label'])::after{content:'';display:block;position:absolute;inset:0}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;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}){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$o = 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$q = 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"],
@@ -7557,16 +8320,16 @@ const template$o = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
   filter: elements("[flag]")
 })}></slot></template>`;
 
-const definition$o = Field.compose({
+const definition$q = Field.compose({
   name: `${FluentDesignSystem.prefix}-field`,
-  template: template$o,
-  styles: styles$n,
+  template: template$q,
+  styles: styles$p,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
 const ImageFit = {
   none: "none",
@@ -7580,12 +8343,12 @@ const ImageShape = {
   square: "square"
 };
 
-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$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$j(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 class Image extends FASTElement {
@@ -7639,30 +8402,30 @@ class Image extends FASTElement {
     swapStates(this.elementInternals, prev, next, ImageShape);
   }
 }
-__decorateClass$j([attr({
+__decorateClass$l([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$j([attr({
+__decorateClass$l([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$j([attr({
+__decorateClass$l([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$j([attr], Image.prototype, "fit", 2);
-__decorateClass$j([attr], Image.prototype, "shape", 2);
+__decorateClass$l([attr], Image.prototype, "fit", 2);
+__decorateClass$l([attr], Image.prototype, "shape", 2);
 
-const template$n = html`<slot></slot>`;
+const template$p = html`<slot></slot>`;
 
-const styles$m = css`
+const styles$o = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host(${blockState}) ::slotted(img){width:100%;height:auto}:host(${borderedState}) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host(${fitNoneState}) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host(${fitCenterState}) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host(${fitContainState}) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host(${fitCoverState}) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host(${shadowState}) ::slotted(img){box-shadow:${shadow4}}:host(${circularState}) ::slotted(img){border-radius:${borderRadiusCircular}}:host(${roundedState}) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
-const definition$n = Image.compose({
+const definition$p = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$n,
-  styles: styles$m
+  template: template$p,
+  styles: styles$o
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$p.define(FluentDesignSystem.registry);
 
 const LabelSize = {
   small: "small",
@@ -7674,12 +8437,12 @@ const LabelWeight = {
   semibold: "semibold"
 };
 
-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$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$i(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -7719,16 +8482,16 @@ class Label extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$i([attr], Label.prototype, "size", 2);
-__decorateClass$i([attr], Label.prototype, "weight", 2);
-__decorateClass$i([attr({
+__decorateClass$k([attr], Label.prototype, "size", 2);
+__decorateClass$k([attr], Label.prototype, "weight", 2);
+__decorateClass$k([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$i([attr({
+__decorateClass$k([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
-const styles$l = css`
+const styles$n = 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(:is(${largeState},${semiboldState})){font-weight:${fontWeightSemibold}}:host(${disabledState}),:host(${disabledState}) .asterisk{color:${colorNeutralForegroundDisabled}}`;
@@ -7736,26 +8499,26 @@ const styles$l = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$m = labelTemplate();
+const template$o = labelTemplate();
 
-const definition$m = Label.compose({
+const definition$o = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
-  template: template$m,
-  styles: styles$l
+  template: template$o,
+  styles: styles$n
 });
 
-definition$m.define(FluentDesignSystem.registry);
+definition$o.define(FluentDesignSystem.registry);
 
 const LinkAppearance = {
   subtle: "subtle"
 };
 
-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$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$h(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 class Link extends BaseAnchor {
@@ -7780,12 +8543,12 @@ class Link extends BaseAnchor {
     toggleState(this.elementInternals, "inline", next);
   }
 }
-__decorateClass$h([attr], Link.prototype, "appearance", 2);
-__decorateClass$h([attr({
+__decorateClass$j([attr], Link.prototype, "appearance", 2);
+__decorateClass$j([attr({
   mode: "boolean"
 })], Link.prototype, "inline", 2);
 
-const styles$k = css`
+const styles$m = 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};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${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(${inlineState}){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -7794,19 +8557,189 @@ const styles$k = 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$l = anchorTemplate();
+const template$n = anchorTemplate();
 
-const definition$l = Link.compose({
+const definition$n = Link.compose({
   name: `${FluentDesignSystem.prefix}-link`,
-  template: template$l,
-  styles: styles$k
+  template: template$n,
+  styles: styles$m
+});
+
+definition$n.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;
+  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);
+  return result;
+};
+class Listbox extends FASTElement {
+  constructor() {
+    super();
+    this.id = uniqueId("listbox-");
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "listbox";
+  }
+  /**
+   * Updates the multiple selection state of the listbox and its options.
+   *
+   * @param prev - the previous multiple value
+   * @param next - the current multiple value
+   */
+  multipleChanged(prev, next) {
+    this.elementInternals.ariaMultiSelectable = next ? "true" : "false";
+    toggleState(this.elementInternals, "multiple", next);
+    Updates.enqueue(() => {
+      this.options.forEach(x => {
+        x.multiple = !!next;
+      });
+    });
+  }
+  /**
+   * Updates the enabled options collection when properties on the child options change.
+   *
+   * @param prev - the previous options
+   * @param next - the current options
+   *
+   * @internal
+   */
+  optionsChanged(prev, next) {
+    next?.forEach((option, index) => {
+      option.elementInternals.ariaPosInSet = `${index + 1}`;
+      option.elementInternals.ariaSetSize = `${next.length}`;
+    });
+  }
+  /**
+   * Handles the `beforetoggle` event on the listbox.
+   *
+   * @param e - the toggle event
+   * @returns true to allow the default popover behavior, undefined to prevent it
+   * @internal
+   */
+  beforetoggleHandler(e) {
+    if (!this.dropdown) {
+      return true;
+    }
+    if (this.dropdown.disabled) {
+      this.dropdown.open = false;
+      return;
+    }
+    this.dropdown.open = e.newState === "open";
+    return true;
+  }
+  /**
+   * The collection of child options that are not disabled.
+   *
+   * @internal
+   */
+  get enabledOptions() {
+    return this.options?.filter(x => !x.disabled) ?? [];
+  }
+  /**
+   * The collection of child options that are selected.
+   *
+   * @public
+   */
+  get selectedOptions() {
+    return this.options?.filter(x => x.selected) ?? [];
+  }
+  /**
+   * Sets the `selected` state on a target option when clicked.
+   *
+   * @param e - The pointer event
+   * @public
+   */
+  clickHandler(e) {
+    const target = e.target;
+    if (isDropdownOption(target)) {
+      this.selectOption(this.enabledOptions.indexOf(target));
+    }
+    return true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.$emit("connected");
+  }
+  /**
+   * Handles observable subscriptions for the listbox.
+   *
+   * @param source - The source of the observed change
+   * @param propertyName - The name of the property that changed
+   *
+   * @internal
+   */
+  handleChange(source, propertyName) {
+    if (propertyName === "multiple") {
+      this.multiple = source.multiple;
+      return;
+    }
+  }
+  /**
+   * Selects an option by index.
+   *
+   * @param index - The index of the option to select.
+   * @public
+   */
+  selectOption(index = this.selectedIndex) {
+    let selectedIndex = this.selectedIndex;
+    if (!this.multiple) {
+      this.enabledOptions.forEach((item, i) => {
+        const shouldCheck = i === index;
+        item.selected = shouldCheck;
+        if (shouldCheck) {
+          selectedIndex = i;
+        }
+      });
+    } else {
+      const option = this.enabledOptions[index];
+      if (option) {
+        option.selected = !option.selected;
+      }
+      selectedIndex = index;
+    }
+    this.selectedIndex = selectedIndex;
+  }
+}
+__decorateClass$i([attr({
+  attribute: "id",
+  mode: "fromView"
+})], Listbox.prototype, "id", 2);
+__decorateClass$i([observable], Listbox.prototype, "multiple", 2);
+__decorateClass$i([observable], Listbox.prototype, "options", 2);
+__decorateClass$i([observable], Listbox.prototype, "selectedIndex", 2);
+__decorateClass$i([observable], Listbox.prototype, "dropdown", 2);
+
+const styles$l = css`
+  ${display("inline-flex")}
+
+  :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}`;
+
+function listboxTemplate() {
+  return html`<template id="${x => x.id}" @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><slot ${slotted({
+    property: "options",
+    filter: node => isDropdownOption(node)
+  })}></slot></template>`;
+}
+const template$m = listboxTemplate();
+
+const definition$m = Listbox.compose({
+  name: `${FluentDesignSystem.prefix}-listbox`,
+  template: template$m,
+  styles: styles$l
 });
 
-definition$l.define(FluentDesignSystem.registry);
+definition$m.define(FluentDesignSystem.registry);
 
 class MenuButton extends Button {}
 
-const template$k = buttonTemplate$1({
+const template$l = 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">
@@ -7815,13 +8748,13 @@ const template$k = buttonTemplate$1({
   `)
 });
 
-const definition$k = MenuButton.compose({
+const definition$l = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$k,
-  styles: styles$z
+  template: template$l,
+  styles: styles$C
 });
 
-definition$k.define(FluentDesignSystem.registry);
+definition$l.define(FluentDesignSystem.registry);
 
 const MenuItemRole = {
   /**
@@ -7843,12 +8776,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 const menuFilter = () => value => value.nodeType === 1 && value.elementInternals.role === "menu";
@@ -8038,21 +8971,21 @@ class MenuItem extends FASTElement {
     this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
   }
 }
-__decorateClass$g([attr({
+__decorateClass$h([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$g([attr], MenuItem.prototype, "role", 2);
-__decorateClass$g([attr({
+__decorateClass$h([attr], MenuItem.prototype, "role", 2);
+__decorateClass$h([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$g([attr({
+__decorateClass$h([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$g([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$g([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$h([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$h([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
-const styles$j = css`
+const styles$k = 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(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::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(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::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(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){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]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -8066,25 +8999,25 @@ function menuItemTemplate(options = {}) {
     filter: menuFilter()
   })}></slot></template>`;
 }
-const template$j = menuItemTemplate({
+const template$k = menuItemTemplate({
   indicator: Checkmark16Filled,
   submenuGlyph: chevronRight16Filled
 });
 
-const definition$j = MenuItem.compose({
+const definition$k = MenuItem.compose({
   name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$j,
-  styles: styles$j
+  template: template$k,
+  styles: styles$k
 });
 
-definition$j.define(FluentDesignSystem.registry);
+definition$k.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$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -8300,10 +9233,10 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$f([observable], _MenuList.prototype, "items", 2);
+__decorateClass$g([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
-const styles$i = css`
+const styles$j = 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}`;
@@ -8311,22 +9244,22 @@ const styles$i = css`
 function menuTemplate$1() {
   return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
 }
-const template$i = menuTemplate$1();
+const template$j = menuTemplate$1();
 
-const definition$i = MenuList.compose({
+const definition$j = MenuList.compose({
   name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$i,
-  styles: styles$i
+  template: template$j,
+  styles: styles$j
 });
 
-definition$i.define(FluentDesignSystem.registry);
+definition$j.define(FluentDesignSystem.registry);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
@@ -8606,30 +9539,30 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$e([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Menu.prototype, "split", 2);
-__decorateClass$e([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$e([observable], Menu.prototype, "slottedTriggers", 2);
-__decorateClass$e([observable], Menu.prototype, "primaryAction", 2);
+__decorateClass$f([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$f([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$f([observable], Menu.prototype, "primaryAction", 2);
 
-const styles$h = css`
+const styles$i = css`
   ${display("inline-block")}
 
   ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-block;position:absolute;z-index:1}:host([split]) ::slotted([popover]){position-area:block-end span-inline-start}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
@@ -8643,15 +9576,15 @@ function menuTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$h = menuTemplate();
+const template$i = menuTemplate();
 
-const definition$h = Menu.compose({
+const definition$i = Menu.compose({
   name: `${FluentDesignSystem.prefix}-menu`,
-  template: template$h,
-  styles: styles$h
+  template: template$i,
+  styles: styles$i
 });
 
-definition$h.define(FluentDesignSystem.registry);
+definition$i.define(FluentDesignSystem.registry);
 
 const MessageBarLayout = {
   multiline: "multiline",
@@ -8668,12 +9601,12 @@ const MessageBarIntent = {
   info: "info"
 };
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class MessageBar extends FASTElement {
@@ -8719,28 +9652,317 @@ class MessageBar extends FASTElement {
     swapStates(this.elementInternals, prev, next, MessageBarIntent);
   }
 }
-__decorateClass$d([attr], MessageBar.prototype, "shape", 2);
-__decorateClass$d([attr], MessageBar.prototype, "layout", 2);
-__decorateClass$d([attr], MessageBar.prototype, "intent", 2);
+__decorateClass$e([attr], MessageBar.prototype, "shape", 2);
+__decorateClass$e([attr], MessageBar.prototype, "layout", 2);
+__decorateClass$e([attr], MessageBar.prototype, "intent", 2);
 
-const styles$g = css`
+const styles$h = 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$g = messageBarTemplate();
+const template$h = messageBarTemplate();
 
-const definition$g = MessageBar.compose({
+const definition$h = MessageBar.compose({
   name: `${FluentDesignSystem.prefix}-message-bar`,
-  template: template$g,
-  styles: styles$g,
+  template: template$h,
+  styles: styles$h,
   shadowOptions: {
     mode: FluentDesignSystem.shadowRootMode
   }
 });
 
+definition$h.define(FluentDesignSystem.registry);
+
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$d(target, key, result);
+  return result;
+};
+class DropdownOption extends FASTElement {
+  constructor() {
+    super();
+    this.active = false;
+    this.id = uniqueId("option-");
+    this.initialValue = "";
+    this.multiple = false;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    /**
+     * The internal value of the option.
+     *
+     * @internal
+     */
+    this._value = this.initialValue;
+    this.elementInternals.role = "option";
+  }
+  /**
+   * Changes the active state of the option when the active property changes.
+   *
+   * @param prev - the previous active state
+   * @param next - the current active state
+   * @internal
+   */
+  activeChanged(prev, next) {
+    toggleState(this.elementInternals, "active", next);
+  }
+  /**
+   * Sets the selected property to match the currentSelected state.
+   *
+   * @param prev - the previous selected state
+   * @param next - the current selected state
+   * @internal
+   */
+  currentSelectedChanged(prev, next) {
+    this.selected = !!next;
+  }
+  /**
+   * Updates the selected state when the `selected` attribute is changed, unless the selected state has been changed by the user.
+   *
+   * @param prev - The previous initial selected state
+   * @param next - The current initial selected state
+   * @internal
+   */
+  defaultSelectedChanged(prev, next) {
+    this.selected = !!next;
+  }
+  /**
+   * Changes the description state of the option when the description slot changes.
+   *
+   * @param prev - the previous collection of description elements
+   * @param next - the current collection of description elements
+   * @internal
+   */
+  descriptionSlotChanged(prev, next) {
+    toggleState(this.elementInternals, "description", !!next?.length);
+  }
+  /**
+   * Toggles the disabled state when the user changes the `disabled` property.
+   *
+   * @internal
+   */
+  disabledChanged(prev, next) {
+    this.elementInternals.ariaDisabled = this.disabled ? "true" : "false";
+    toggleState(this.elementInternals, "disabled", this.disabled);
+  }
+  /**
+   * Sets the disabled state when the `disabled` attribute changes.
+   *
+   * @param prev - the previous value
+   * @param next - the current value
+   * @internal
+   */
+  disabledAttributeChanged(prev, next) {
+    this.disabled = !!next;
+  }
+  /**
+   * Sets the value of the option when the `value` attribute changes.
+   *
+   * @param prev - The previous initial value
+   * @param next - The current initial value
+   * @internal
+   */
+  initialValueChanged(prev, next) {
+    this._value = next;
+  }
+  /**
+   * Updates the multiple state of the option when the multiple property changes.
+   *
+   * @param prev - the previous multiple state
+   * @param next - the current multiple state
+   */
+  multipleChanged(prev, next) {
+    toggleState(this.elementInternals, "multiple", next);
+    this.selected = false;
+  }
+  /**
+   * The associated `<form>` element.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+   */
+  get form() {
+    return this.elementInternals.form;
+  }
+  /**
+   * A reference to all associated `<label>` elements.
+   *
+   * @public
+   */
+  get labels() {
+    return Object.freeze(Array.from(this.elementInternals.labels));
+  }
+  /**
+   * The option's current selected state.
+   *
+   * @public
+   */
+  get selected() {
+    Observable.track(this, "selected");
+    return !!this.currentSelected;
+  }
+  set selected(next) {
+    this.currentSelected = next;
+    Updates.enqueue(() => {
+      if (this.$fastController.isConnected) {
+        this.setFormValue(next ? this.value : null);
+        this.elementInternals.ariaSelected = next ? "true" : "false";
+        toggleState(this.elementInternals, "selected", next);
+      }
+    });
+    Observable.notify(this, "selected");
+  }
+  /**
+   * The display text of the option.
+   *
+   * @public
+   * @remarks
+   * When the option is freeform, the text is the value of the option.
+   */
+  get text() {
+    if (this.freeform) {
+      return this.value.replace(/\s+/g, " ").trim();
+    }
+    return (this.textAttribute ?? this.textContent)?.replace(/\s+/g, " ").trim() ?? "";
+  }
+  /**
+   * The current value of the option.
+   *
+   * @public
+   */
+  get value() {
+    Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  set value(value) {
+    this._value = value;
+    if (this.$fastController.isConnected) {
+      this.setFormValue(this.selected ? value : null);
+      this.freeformOutputs?.forEach(output => {
+        output.value = value;
+      });
+      Observable.notify(this, "value");
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.freeform) {
+      this.value = "";
+      this.hidden = true;
+      this.selected = false;
+    }
+  }
+  /**
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+   *
+   * @internal
+   */
+  setFormValue(value, state) {
+    if (this.disabled) {
+      this.elementInternals.setFormValue(null);
+      return;
+    }
+    this.elementInternals.setFormValue(value, value ?? state);
+  }
+  /**
+   * Toggles the selected state of the control.
+   *
+   * @param force - Forces the element to be checked or unchecked
+   * @public
+   */
+  toggleSelected(force = !this.selected) {
+    this.selected = force;
+  }
+}
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+DropdownOption.formAssociated = true;
+__decorateClass$d([observable], DropdownOption.prototype, "active", 2);
+__decorateClass$d([attr({
+  attribute: "current-selected",
+  mode: "boolean"
+})], DropdownOption.prototype, "currentSelected", 2);
+__decorateClass$d([attr({
+  attribute: "selected",
+  mode: "boolean"
+})], DropdownOption.prototype, "defaultSelected", 2);
+__decorateClass$d([observable], DropdownOption.prototype, "descriptionSlot", 2);
+__decorateClass$d([observable], DropdownOption.prototype, "disabled", 2);
+__decorateClass$d([attr({
+  attribute: "disabled",
+  mode: "boolean"
+})], DropdownOption.prototype, "disabledAttribute", 2);
+__decorateClass$d([attr({
+  attribute: "form"
+})], DropdownOption.prototype, "formAttribute", 2);
+__decorateClass$d([attr({
+  mode: "boolean"
+})], DropdownOption.prototype, "freeform", 2);
+__decorateClass$d([attr({
+  attribute: "id"
+})], DropdownOption.prototype, "id", 2);
+__decorateClass$d([attr({
+  attribute: "value",
+  mode: "fromView"
+})], DropdownOption.prototype, "initialValue", 2);
+__decorateClass$d([observable], DropdownOption.prototype, "multiple", 2);
+__decorateClass$d([attr], DropdownOption.prototype, "name", 2);
+__decorateClass$d([observable], DropdownOption.prototype, "start", 2);
+__decorateClass$d([attr({
+  attribute: "text",
+  mode: "fromView"
+})], DropdownOption.prototype, "textAttribute", 2);
+
+const styles$g = css`
+  ${display("inline-grid")}
+
+  :host{-webkit-tap-highlight-color:transparent;${typographyBody1Styles}
+    align-items:center;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThick} solid ${colorTransparentStroke};box-sizing:border-box;color:${colorNeutralForeground2};column-gap:${spacingHorizontalXS};cursor:pointer;grid-template-areas:'indicator start content';grid-template-columns:auto auto 1fr;min-height:32px;padding:${spacingHorizontalSNudge}}.content{grid-area:content;line-height:1}::slotted([slot='start']){grid-area:start}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Pressed};color:${colorNeutralForeground2Pressed}}:host(:disabled){background-color:${colorNeutralBackground1};color:${colorNeutralForegroundDisabled};cursor:default}.checkmark-16-filled{fill:currentColor;width:16px}slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator']){aspect-ratio:1;flex:0 0 auto;grid-area:indicator;visibility:hidden}:host(${selectedState}) :is(slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator'])){visibility:visible}:host(${multipleState}) .checkmark-16-filled,:host(:not(${multipleState})) .checkmark-12-regular{display:none}:host(${multipleState}) .checkmark-12-regular{background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;fill:transparent;position:relative;visibility:visible;width:16px}:host(${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorCompoundBrandBackground};border-color:${colorCompoundBrandStroke};fill:${colorNeutralForegroundInverted}}:host(:disabled${multipleState}) .checkmark-12-regular{border-color:${colorNeutralStrokeDisabled}}:host(:disabled${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorNeutralBackgroundDisabled}}:host(${activeState}){border:${strokeWidthThick} solid ${colorStrokeFocus2}}@supports (selector(:host(:has(*)))){:host(:has([slot='start']:not([size='16']))){column-gap:${spacingHorizontalSNudge}}}:host(${descriptionState}){column-gap:${spacingHorizontalSNudge};grid-template-areas:'indicator start content'
+      'indicator start description'}::slotted([slot='description']){color:${colorNeutralForeground3};grid-area:description;${typographyCaption1Styles}}`;
+
+const checkedIndicator$1 = html.partial( /* html */
+`
+  <svg aria-hidden="true" class="checkmark-16-filled" viewBox="0 0 16 16">
+    <path
+      d="M14.046 3.486a.75.75 0 0 1-.032 1.06l-7.93 7.474a.85.85 0 0 1-1.188-.022l-2.68-2.72a.75.75 0 1 1 1.068-1.053l2.234 2.267l7.468-7.038a.75.75 0 0 1 1.06.032"
+    />
+  </svg>
+  <svg aria-hidden="true" class="checkmark-12-regular" viewBox="0 0 12 12">
+    <path
+      d="M9.854 3.146a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L5 7.293l4.146-4.147a.5.5 0 0 1 .708 0"
+    />
+  </svg>
+`);
+function dropdownOptionTemplate(options = {}) {
+  return html`<slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot>${startSlotTemplate(options)}<div class="content" part="content"><slot ${slotted({
+    property: "freeformOutputs",
+    filter: elements("output")
+  })}></slot></div><div class="description" part="description"><slot name="description" ${slotted("descriptionSlot")}></slot></div>`;
+}
+const template$g = dropdownOptionTemplate({
+  checkedIndicator: checkedIndicator$1
+});
+
+const definition$g = DropdownOption.compose({
+  name: `${FluentDesignSystem.prefix}-option`,
+  template: template$g,
+  styles: styles$g
+});
+
 definition$g.define(FluentDesignSystem.registry);
 
 const ProgressBarThickness = {
@@ -10279,8 +11501,8 @@ __decorateClass$8([attr], Spinner.prototype, "appearance", 2);
 const styles$a = css`
   ${display("inline-flex")}
 
-  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host(${tinyState}){--indicatorSize:${strokeWidthThick};--size:20px}:host(${extraSmallState}){--indicatorSize:${strokeWidthThick};--size:24px}:host(${smallState}){--indicatorSize:${strokeWidthThick};--size:28px}:host(${largeState}){--indicatorSize:${strokeWidthThicker};--size:36px}:host(${extraLargeState}){--indicatorSize:${strokeWidthThicker};--size:40px}:host(${hugeState}){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host(${invertedState}) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;inset-inline-end:50%}.end{overflow:hidden;inset-inline-start:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-inline-end-color:currentcolor}:host(${invertedState}) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-inline-end-color:Highlight}`));
+  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host(${tinyState}){--indicatorSize:${strokeWidthThick};--size:20px}:host(${extraSmallState}){--indicatorSize:${strokeWidthThick};--size:24px}:host(${smallState}){--indicatorSize:${strokeWidthThick};--size:28px}:host(${largeState}){--indicatorSize:${strokeWidthThicker};--size:36px}:host(${extraLargeState}){--indicatorSize:${strokeWidthThicker};--size:40px}:host(${hugeState}){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host(${invertedState}) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;right:50%}.end{overflow:hidden;left:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-right-color:currentcolor}:host(${invertedState}) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-right-color:Highlight}`));
 
 const template$a = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
 
@@ -10310,7 +11532,7 @@ const styles$9 = css`
   ${display("inline-flex")}
 
   :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}`));
+    :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}:host(:disabled) .checked-indicator,:host(${checkedState}:disabled) .checked-indicator{background-color:GrayText}`));
 
 const definition$9 = Switch.compose({
   name: `${FluentDesignSystem.prefix}-switch`,
@@ -10548,12 +11770,12 @@ class BaseTabs extends FASTElement {
   }
   getTabIds() {
     return this.tabs.map(tab => {
-      return tab.getAttribute("id") ?? `tab-${uniqueId()}`;
+      return tab.getAttribute("id") ?? `tab-${uniqueId$1()}`;
     });
   }
   getTabPanelIds() {
     return this.tabpanels.map(tabPanel => {
-      return tabPanel.getAttribute("id") ?? `panel-${uniqueId()}`;
+      return tabPanel.getAttribute("id") ?? `panel-${uniqueId$1()}`;
     });
   }
   setComponent() {
@@ -10965,7 +12187,7 @@ class BaseTablist extends FASTElement {
   }
   getTabIds() {
     return this.tabs.map(tab => {
-      return tab.getAttribute("id") ?? `tab-${uniqueId()}`;
+      return tab.getAttribute("id") ?? `tab-${uniqueId$1()}`;
     });
   }
   setComponent() {
@@ -12382,7 +13604,7 @@ __decorateClass$1([attr({
 })], ToggleButton.prototype, "mixed", 2);
 
 const styles$1 = css`
-  ${styles$z}
+  ${styles$C}
 
   :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}`));
@@ -12405,8 +13627,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const SUPPORTS_CSS_ANCHOR_POSITIONING = CSS.supports("anchor-name: --a");
-const SUPPORTS_HTML_ANCHOR_POSITIONING = "anchor" in HTMLElement.prototype;
 class Tooltip extends FASTElement {
   constructor() {
     super();
@@ -12414,7 +13634,7 @@ class Tooltip extends FASTElement {
      * The attached element internals
      */
     this.elementInternals = this.attachInternals();
-    this.id = uniqueId("tooltip-");
+    this.id = uniqueId$1("tooltip-");
     /**
      * The default delay for the tooltip
      * @internal
@@ -12450,7 +13670,7 @@ class Tooltip extends FASTElement {
    * @internal
    */
   positioningChanged() {
-    if (!SUPPORTS_CSS_ANCHOR_POSITIONING) {
+    if (!AnchorPositioningCSSSupported) {
       this.setFallbackStyles();
     }
   }
@@ -12474,8 +13694,8 @@ class Tooltip extends FASTElement {
     this.anchorElement.addEventListener("blur", this.blurAnchorHandler);
     this.anchorElement.addEventListener("mouseenter", this.mouseenterAnchorHandler);
     this.anchorElement.addEventListener("mouseleave", this.mouseleaveAnchorHandler);
-    if (SUPPORTS_CSS_ANCHOR_POSITIONING) {
-      if (!SUPPORTS_HTML_ANCHOR_POSITIONING) {
+    if (AnchorPositioningCSSSupported) {
+      if (!AnchorPositioningHTMLSupported) {
         this.anchorElement.style.anchorName = anchorName;
         this.style.positionAnchor = anchorName;
       }