@fluentui/web-components 3.0.0-beta.100 → 3.0.0-beta.102

package/dist/web-components.js

@@ -4011,70 +4011,70 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
   compose
 });
 
-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$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$S(target, key, result);
+  if (kind && result) __defProp$R(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -4341,12 +4341,12 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-var __defProp$R = Object.defineProperty;
-var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
+var __defProp$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$R(target, key, result);
+  if (kind && result) __defProp$Q(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4364,25 +4364,25 @@ class BaseAccordionItem extends FASTElement {
     this.id = uniqueId$1("accordion-");
   }
 }
-__decorateClass$R([attr({
+__decorateClass$Q([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$R([attr({
+__decorateClass$Q([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$R([attr({
+__decorateClass$Q([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$R([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$Q([attr], BaseAccordionItem.prototype, "id", 2);
 
-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$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$Q(target, key, result);
+  if (kind && result) __defProp$P(target, key, result);
   return result;
 };
 class AccordionItem extends BaseAccordionItem {
@@ -4391,11 +4391,11 @@ class AccordionItem extends BaseAccordionItem {
     this.block = false;
   }
 }
-__decorateClass$Q([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$Q([attr({
+__decorateClass$P([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$P([attr({
   attribute: "marker-position"
 })], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$Q([attr({
+__decorateClass$P([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -4700,12 +4700,12 @@ const AccordionExpandMode = {
   multi: "multi"
 };
 
-var __defProp$P = Object.defineProperty;
-var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
+var __defProp$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$P(target, key, result);
+  if (kind && result) __defProp$O(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -4844,10 +4844,10 @@ class Accordion extends FASTElement {
     });
   }
 }
-__decorateClass$P([attr({
+__decorateClass$O([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$P([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$O([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
 const styles$F = css`
   ${display("flex")}
@@ -4943,12 +4943,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-var __defProp$O = Object.defineProperty;
-var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
+var __defProp$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$O(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -5056,21 +5056,21 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$O([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "type", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "type", 2);
 
-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$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$N(target, key, result);
+  if (kind && result) __defProp$M(target, key, result);
   return result;
 };
 class AnchorButton extends BaseAnchor {
@@ -5111,10 +5111,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$N([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$N([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$N([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$N([attr({
+__decorateClass$M([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$M([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$M([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$M([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -5190,12 +5190,12 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
-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$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$M(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 class BaseAvatar extends FASTElement {
@@ -5210,8 +5210,8 @@ class BaseAvatar extends FASTElement {
     this.elementInternals.role = "img";
   }
 }
-__decorateClass$M([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$M([attr], BaseAvatar.prototype, "initials", 2);
+__decorateClass$L([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$L([attr], BaseAvatar.prototype, "initials", 2);
 
 const AvatarNamedColor = {
   darkRed: "dark-red",
@@ -5252,12 +5252,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-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$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$L(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 const _Avatar = class _Avatar extends BaseAvatar {
@@ -5312,14 +5312,14 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$L([attr], _Avatar.prototype, "active", 2);
-__decorateClass$L([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$L([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$L([attr({
+__decorateClass$K([attr], _Avatar.prototype, "active", 2);
+__decorateClass$K([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$K([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$K([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$L([attr], _Avatar.prototype, "color", 2);
-__decorateClass$L([attr({
+__decorateClass$K([attr], _Avatar.prototype, "color", 2);
+__decorateClass$K([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5378,12 +5378,12 @@ const BadgeColor = {
   warning: "warning"
 };
 
-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$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$K(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -5393,10 +5393,10 @@ class Badge extends FASTElement {
     this.color = BadgeColor.brand;
   }
 }
-__decorateClass$K([attr], Badge.prototype, "appearance", 2);
-__decorateClass$K([attr], Badge.prototype, "color", 2);
-__decorateClass$K([attr], Badge.prototype, "shape", 2);
-__decorateClass$K([attr], Badge.prototype, "size", 2);
+__decorateClass$J([attr], Badge.prototype, "appearance", 2);
+__decorateClass$J([attr], Badge.prototype, "color", 2);
+__decorateClass$J([attr], Badge.prototype, "shape", 2);
+__decorateClass$J([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -5773,12 +5773,12 @@ const definition$D = Badge.compose({
 
 definition$D.define(FluentDesignSystem.registry);
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+var __defProp$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$J(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 class BaseButton extends FASTElement {
@@ -5982,51 +5982,51 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   mode: "boolean"
 })], BaseButton.prototype, "autofocus", 2);
-__decorateClass$J([observable], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$J([attr({
+__decorateClass$I([observable], BaseButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$I([attr({
   mode: "boolean"
 })], BaseButton.prototype, "disabled", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "tabindex",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseButton.prototype, "tabIndex", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formaction"
 })], BaseButton.prototype, "formAction", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "form"
 })], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formenctype"
 })], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formmethod"
 })], BaseButton.prototype, "formMethod", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formtarget"
 })], BaseButton.prototype, "formTarget", 2);
-__decorateClass$J([attr], BaseButton.prototype, "name", 2);
-__decorateClass$J([attr], BaseButton.prototype, "type", 2);
-__decorateClass$J([attr], BaseButton.prototype, "value", 2);
+__decorateClass$I([attr], BaseButton.prototype, "name", 2);
+__decorateClass$I([attr], BaseButton.prototype, "type", 2);
+__decorateClass$I([attr], BaseButton.prototype, "value", 2);
 
-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$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$I(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 class Button extends BaseButton {
@@ -6035,10 +6035,10 @@ class Button extends BaseButton {
     this.iconOnly = false;
   }
 }
-__decorateClass$I([attr], Button.prototype, "appearance", 2);
-__decorateClass$I([attr], Button.prototype, "shape", 2);
-__decorateClass$I([attr], Button.prototype, "size", 2);
-__decorateClass$I([attr({
+__decorateClass$H([attr], Button.prototype, "appearance", 2);
+__decorateClass$H([attr], Button.prototype, "shape", 2);
+__decorateClass$H([attr], Button.prototype, "size", 2);
+__decorateClass$H([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
@@ -6057,12 +6057,12 @@ const definition$C = Button.compose({
 
 definition$C.define(FluentDesignSystem.registry);
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$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$H(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -6396,36 +6396,36 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$H([observable], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$H([attr({
+__decorateClass$G([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$G([attr({
   attribute: "disabled",
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$H([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$G([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 
-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$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$G(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 class Checkbox extends BaseCheckbox {
@@ -6468,9 +6468,9 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$G([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$G([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$G([attr], Checkbox.prototype, "size", 2);
+__decorateClass$F([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$F([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$F([attr], Checkbox.prototype, "size", 2);
 
 const activeState = stateSelector("active");
 const badInputState = stateSelector("bad-input");
@@ -6561,12 +6561,12 @@ const definition$A = CompoundButton.compose({
 
 definition$A.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$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$F(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -6603,22 +6603,22 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$F([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$F([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$F([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$F([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$E([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$E([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$E([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$E([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
@@ -6651,13 +6651,19 @@ const DialogType = {
   nonModal: "non-modal",
   alert: "alert"
 };
+function isDialog(element, tagName = "-dialog") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName);
+}
 
-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$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$E(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -6725,14 +6731,14 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$E([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$E([attr({
+__decorateClass$D([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$D([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$E([attr({
+__decorateClass$D([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$E([attr], Dialog.prototype, "type", 2);
+__decorateClass$D([attr], Dialog.prototype, "type", 2);
 
 const template$y = 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 => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
@@ -6748,45 +6754,30 @@ const definition$y = Dialog.compose({
 
 definition$y.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 DialogBody extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.noTitleAction = false;
+  /**
+   * Handles click event for the close slot
+   *
+   * @param e - the click event
+   * @internal
+   */
+  clickHandler(event) {
+    if (!event.defaultPrevented) {
+      const dialog = this.parentElement;
+      if (isDialog(dialog)) {
+        dialog.hide();
+      }
+    }
+    return true;
   }
 }
-__decorateClass$D([attr({
-  mode: "boolean",
-  attribute: "no-title-action"
-})], DialogBody.prototype, "noTitleAction", 2);
 
-const dismissed16Regular = html.partial(`
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-      fill="currentColor"
-    ></path>
-  </svg>`);
-const template$x = 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$x = html`<template><div class="title" part="title"><slot name="title"></slot><slot name="title-action"></slot><slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></template>`;
 
 const styles$w = 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}}}`;
+  :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}::slotted([slot='title-action']){margin-inline-start:auto}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@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$x = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
@@ -8931,10 +8922,12 @@ class Menu extends FASTElement {
      */
     this.toggleHandler = e => {
       if (e.type === "toggle" && e.newState) {
-        const newState = e.newState === "open" ? true : false;
+        const newState = e.newState === "open";
         this._trigger?.setAttribute("aria-expanded", `${newState}`);
         this._open = newState;
-        this.focusMenuList();
+        if (this._open) {
+          this.focusMenuList();
+        }
       }
     };
     /**