@fluentui/web-components 3.0.0-beta.85 → 3.0.0-beta.87

package/dist/web-components.js

@@ -4011,70 +4011,70 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
   compose
 });
 
-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$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$Q(target, key, result);
+  if (kind && result) __defProp$S(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$Q([attr({
+__decorateClass$S([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -4378,12 +4378,12 @@ function swapStates(elementInternals, prev = "", next = "", States, prefix = "")
   }
 }
 
-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$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$P(target, key, result);
+  if (kind && result) __defProp$R(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4417,18 +4417,18 @@ class BaseAccordionItem extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$P([attr({
+__decorateClass$R([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$P([attr({
+__decorateClass$R([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$P([attr({
+__decorateClass$R([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$P([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$R([attr], BaseAccordionItem.prototype, "id", 2);
 
 const AccordionItemSize = {
   small: "small",
@@ -4441,12 +4441,12 @@ const AccordionItemMarkerPosition = {
   end: "end"
 };
 
-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$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$O(target, key, result);
+  if (kind && result) __defProp$Q(target, key, result);
   return result;
 };
 class AccordionItem extends BaseAccordionItem {
@@ -4479,11 +4479,11 @@ class AccordionItem extends BaseAccordionItem {
     toggleState(this.elementInternals, "block", next);
   }
 }
-__decorateClass$O([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$O([attr({
+__decorateClass$Q([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$Q([attr({
   attribute: "marker-position"
 })], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$O([attr({
+__decorateClass$Q([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -4916,12 +4916,12 @@ const AccordionExpandMode = {
   multi: "multi"
 };
 
-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$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$N(target, key, result);
+  if (kind && result) __defProp$P(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -5060,10 +5060,10 @@ class Accordion extends FASTElement {
     });
   }
 }
-__decorateClass$N([attr({
+__decorateClass$P([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$N([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$P([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
 const styles$F = css`
   ${display("flex")}
@@ -5122,12 +5122,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-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$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$M(target, key, result);
+  if (kind && result) __defProp$O(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -5235,21 +5235,21 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$M([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$M([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$M([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$M([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$M([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$M([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$M([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$M([attr], BaseAnchor.prototype, "type", 2);
+__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);
 
-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$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$L(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 class AnchorButton extends BaseAnchor {
@@ -5290,10 +5290,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$L([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$L([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$L([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$L([attr({
+__decorateClass$N([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$N([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$N([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$N([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -5369,12 +5369,12 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
-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 BaseAvatar extends FASTElement {
@@ -5389,9 +5389,9 @@ class BaseAvatar extends FASTElement {
     this.elementInternals.role = "img";
   }
 }
-__decorateClass$K([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$K([attr], BaseAvatar.prototype, "initials", 2);
-__decorateClass$K([attr], BaseAvatar.prototype, "active", 2);
+__decorateClass$M([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$M([attr], BaseAvatar.prototype, "initials", 2);
+__decorateClass$M([attr], BaseAvatar.prototype, "active", 2);
 
 const AvatarNamedColor = {
   darkRed: "dark-red",
@@ -5432,12 +5432,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-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;
 };
 const _Avatar = class _Avatar extends BaseAvatar {
@@ -5492,13 +5492,13 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$J([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$J([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$J([attr({
+__decorateClass$L([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$L([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$L([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$J([attr], _Avatar.prototype, "color", 2);
-__decorateClass$J([attr({
+__decorateClass$L([attr], _Avatar.prototype, "color", 2);
+__decorateClass$L([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5570,12 +5570,12 @@ const BadgeSize = {
   extraLarge: "extra-large"
 };
 
-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 Badge extends FASTElement {
@@ -5623,10 +5623,10 @@ class Badge extends FASTElement {
     swapStates(this.elementInternals, prev, next, BadgeSize);
   }
 }
-__decorateClass$I([attr], Badge.prototype, "appearance", 2);
-__decorateClass$I([attr], Badge.prototype, "color", 2);
-__decorateClass$I([attr], Badge.prototype, "shape", 2);
-__decorateClass$I([attr], Badge.prototype, "size", 2);
+__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);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -6003,12 +6003,12 @@ const definition$D = Badge.compose({
 
 definition$D.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$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 BaseButton extends FASTElement {
@@ -6212,51 +6212,51 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   mode: "boolean"
 })], BaseButton.prototype, "autofocus", 2);
-__decorateClass$H([observable], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$H([attr({
+__decorateClass$J([observable], BaseButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$J([attr({
   mode: "boolean"
 })], BaseButton.prototype, "disabled", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "tabindex",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseButton.prototype, "tabIndex", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "formaction"
 })], BaseButton.prototype, "formAction", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "form"
 })], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "formenctype"
 })], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "formmethod"
 })], BaseButton.prototype, "formMethod", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$H([attr({
+__decorateClass$J([attr({
   attribute: "formtarget"
 })], BaseButton.prototype, "formTarget", 2);
-__decorateClass$H([attr], BaseButton.prototype, "name", 2);
-__decorateClass$H([attr], BaseButton.prototype, "type", 2);
-__decorateClass$H([attr], BaseButton.prototype, "value", 2);
+__decorateClass$J([attr], BaseButton.prototype, "name", 2);
+__decorateClass$J([attr], BaseButton.prototype, "type", 2);
+__decorateClass$J([attr], BaseButton.prototype, "value", 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$I = Object.defineProperty;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 class Button extends BaseButton {
@@ -6297,10 +6297,10 @@ class Button extends BaseButton {
     toggleState(this.elementInternals, "icon", next);
   }
 }
-__decorateClass$G([attr], Button.prototype, "appearance", 2);
-__decorateClass$G([attr], Button.prototype, "shape", 2);
-__decorateClass$G([attr], Button.prototype, "size", 2);
-__decorateClass$G([attr({
+__decorateClass$I([attr], Button.prototype, "appearance", 2);
+__decorateClass$I([attr], Button.prototype, "shape", 2);
+__decorateClass$I([attr], Button.prototype, "size", 2);
+__decorateClass$I([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
@@ -6319,12 +6319,12 @@ const definition$C = Button.compose({
 
 definition$C.define(FluentDesignSystem.registry);
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -6658,27 +6658,27 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$F([attr({
+__decorateClass$H([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$F([observable], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$F([attr({
+__decorateClass$H([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$H([attr({
   attribute: "disabled",
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$F([attr({
+__decorateClass$H([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$F([attr({
+__decorateClass$H([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$F([attr({
+__decorateClass$H([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$F([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$F([attr({
+__decorateClass$H([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$H([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 
@@ -6691,12 +6691,12 @@ const CheckboxSize = {
   large: "large"
 };
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 class Checkbox extends BaseCheckbox {
@@ -6759,9 +6759,9 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$E([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$E([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$E([attr], Checkbox.prototype, "size", 2);
+__decorateClass$G([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$G([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$G([attr], Checkbox.prototype, "size", 2);
 
 const styles$A = css`
   ${display("inline-flex")}
@@ -6850,12 +6850,12 @@ const CounterBadgeSize = {
   extraLarge: "extra-large"
 };
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -6932,22 +6932,22 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$D([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$D([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$D([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$D([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$D([attr({
+__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({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$D([attr({
+__decorateClass$F([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$D([attr({
+__decorateClass$F([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$D([attr({
+__decorateClass$F([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
@@ -6981,12 +6981,12 @@ const DialogType = {
   alert: "alert"
 };
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -7054,14 +7054,14 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$C([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$C([attr({
+__decorateClass$E([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$E([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$C([attr({
+__decorateClass$E([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$C([attr], Dialog.prototype, "type", 2);
+__decorateClass$E([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, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
@@ -7077,12 +7077,12 @@ const definition$y = Dialog.compose({
 
 definition$y.define(FluentDesignSystem.registry);
 
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 class DialogBody extends FASTElement {
@@ -7091,7 +7091,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$B([attr({
+__decorateClass$D([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -7147,12 +7147,12 @@ const DividerAppearance = {
   subtle: "subtle"
 };
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$A(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 class BaseDivider extends FASTElement {
@@ -7199,15 +7199,15 @@ class BaseDivider extends FASTElement {
     swapStates(this.elementInternals, previous, next, DividerOrientation);
   }
 }
-__decorateClass$A([attr], BaseDivider.prototype, "role", 2);
-__decorateClass$A([attr], BaseDivider.prototype, "orientation", 2);
+__decorateClass$C([attr], BaseDivider.prototype, "role", 2);
+__decorateClass$C([attr], BaseDivider.prototype, "orientation", 2);
 
-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;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$z(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 class Divider extends BaseDivider {
@@ -7236,11 +7236,11 @@ class Divider extends BaseDivider {
     toggleState(this.elementInternals, "inset", next);
   }
 }
-__decorateClass$z([attr({
+__decorateClass$B([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$z([attr], Divider.prototype, "appearance", 2);
-__decorateClass$z([attr({
+__decorateClass$B([attr], Divider.prototype, "appearance", 2);
+__decorateClass$B([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
@@ -7279,12 +7279,12 @@ const DrawerType = {
   inline: "inline"
 };
 
-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;
+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$y(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 class Drawer extends FASTElement {
@@ -7354,18 +7354,18 @@ class Drawer extends FASTElement {
     return true;
   }
 }
-__decorateClass$y([attr], Drawer.prototype, "type", 2);
-__decorateClass$y([attr({
+__decorateClass$A([attr], Drawer.prototype, "type", 2);
+__decorateClass$A([attr({
   attribute: "aria-labelledby"
 })], Drawer.prototype, "ariaLabelledby", 2);
-__decorateClass$y([attr({
+__decorateClass$A([attr({
   attribute: "aria-describedby"
 })], Drawer.prototype, "ariaDescribedby", 2);
-__decorateClass$y([attr], Drawer.prototype, "position", 2);
-__decorateClass$y([attr({
+__decorateClass$A([attr], Drawer.prototype, "position", 2);
+__decorateClass$A([attr({
   attribute: "size"
 })], Drawer.prototype, "size", 2);
-__decorateClass$y([observable], Drawer.prototype, "dialog", 2);
+__decorateClass$A([observable], Drawer.prototype, "dialog", 2);
 
 const styles$u = css`
   ${display("block")}
@@ -7455,15 +7455,15 @@ const template$t = dropdownTemplate({
   indicator: dropdownIndicatorTemplate
 });
 
-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$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$x(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
-class BaseDropdown extends FASTElement {
+const _BaseDropdown = class _BaseDropdown extends FASTElement {
   constructor() {
     super();
     this.activeIndex = 0;
@@ -7478,6 +7478,7 @@ class BaseDropdown extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "presentation";
+    this.addEventListener("connected", this.listboxConnectedHandler);
     Updates.enqueue(() => {
       this.insertControl();
     });
@@ -7619,6 +7620,11 @@ class BaseDropdown extends FASTElement {
     toggleState(this.elementInternals, "open", next);
     this.elementInternals.ariaExpanded = next ? "true" : "false";
     this.activeIndex = this.selectedIndex ?? -1;
+    if (next) {
+      _BaseDropdown.AnchorPositionFallbackObserver?.observe(this.listbox);
+      return;
+    }
+    _BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
   }
   /**
    * Changes the slotted control element based on the dropdown type.
@@ -8011,90 +8017,12 @@ class BaseDropdown extends FASTElement {
     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$x([volatile], BaseDropdown.prototype, "activeDescendant", 1);
-__decorateClass$x([observable], BaseDropdown.prototype, "activeIndex", 2);
-__decorateClass$x([attr({
-  attribute: "aria-labelledby",
-  mode: "fromView"
-})], BaseDropdown.prototype, "ariaLabelledBy", 2);
-__decorateClass$x([observable], BaseDropdown.prototype, "control", 2);
-__decorateClass$x([attr({
-  mode: "boolean"
-})], BaseDropdown.prototype, "disabled", 2);
-__decorateClass$x([volatile], BaseDropdown.prototype, "displayValue", 1);
-__decorateClass$x([attr({
-  attribute: "id"
-})], BaseDropdown.prototype, "id", 2);
-__decorateClass$x([observable], BaseDropdown.prototype, "indicator", 2);
-__decorateClass$x([observable], BaseDropdown.prototype, "indicatorSlot", 2);
-__decorateClass$x([attr({
-  attribute: "value",
-  mode: "fromView"
-})], BaseDropdown.prototype, "initialValue", 2);
-__decorateClass$x([observable], BaseDropdown.prototype, "listbox", 2);
-__decorateClass$x([observable], BaseDropdown.prototype, "listboxSlot", 2);
-__decorateClass$x([attr({
-  mode: "boolean"
-})], BaseDropdown.prototype, "multiple", 2);
-__decorateClass$x([attr], BaseDropdown.prototype, "name", 2);
-__decorateClass$x([observable], BaseDropdown.prototype, "open", 2);
-__decorateClass$x([attr], BaseDropdown.prototype, "placeholder", 2);
-__decorateClass$x([attr({
-  mode: "boolean"
-})], BaseDropdown.prototype, "required", 2);
-__decorateClass$x([attr], BaseDropdown.prototype, "type", 2);
-__decorateClass$x([attr({
-  attribute: "value"
-})], BaseDropdown.prototype, "valueAttribute", 2);
-
-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$w(target, key, result);
-  return result;
-};
-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);
+    _BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
     super.disconnectedCallback();
   }
   /**
@@ -8109,21 +8037,6 @@ const _Dropdown = class _Dropdown extends BaseDropdown {
       this.listbox = target;
     }
   }
-  /**
-   * 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
-   */
-  openChanged(prev, next) {
-    super.openChanged(prev, next);
-    if (next) {
-      _Dropdown.AnchorPositionFallbackObserver?.observe(this.listbox);
-      return;
-    }
-    _Dropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
-  }
   /**
    * 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.
@@ -8131,7 +8044,7 @@ const _Dropdown = class _Dropdown extends BaseDropdown {
    * @internal
    */
   anchorPositionFallback() {
-    _Dropdown.AnchorPositionFallbackObserver = _Dropdown.AnchorPositionFallbackObserver ?? new IntersectionObserver(entries => {
+    _BaseDropdown.AnchorPositionFallbackObserver = _BaseDropdown.AnchorPositionFallbackObserver ?? new IntersectionObserver(entries => {
       entries.forEach(({
         boundingClientRect,
         isIntersecting,
@@ -8152,9 +8065,86 @@ const _Dropdown = class _Dropdown extends BaseDropdown {
     });
   }
 };
-__decorateClass$w([attr], _Dropdown.prototype, "appearance", 2);
-__decorateClass$w([attr], _Dropdown.prototype, "size", 2);
-let Dropdown = _Dropdown;
+/**
+ * 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$z([volatile], _BaseDropdown.prototype, "activeDescendant", 1);
+__decorateClass$z([observable], _BaseDropdown.prototype, "activeIndex", 2);
+__decorateClass$z([attr({
+  attribute: "aria-labelledby",
+  mode: "fromView"
+})], _BaseDropdown.prototype, "ariaLabelledBy", 2);
+__decorateClass$z([observable], _BaseDropdown.prototype, "control", 2);
+__decorateClass$z([attr({
+  mode: "boolean"
+})], _BaseDropdown.prototype, "disabled", 2);
+__decorateClass$z([volatile], _BaseDropdown.prototype, "displayValue", 1);
+__decorateClass$z([attr({
+  attribute: "id"
+})], _BaseDropdown.prototype, "id", 2);
+__decorateClass$z([observable], _BaseDropdown.prototype, "indicator", 2);
+__decorateClass$z([observable], _BaseDropdown.prototype, "indicatorSlot", 2);
+__decorateClass$z([attr({
+  attribute: "value",
+  mode: "fromView"
+})], _BaseDropdown.prototype, "initialValue", 2);
+__decorateClass$z([observable], _BaseDropdown.prototype, "listbox", 2);
+__decorateClass$z([observable], _BaseDropdown.prototype, "listboxSlot", 2);
+__decorateClass$z([attr({
+  mode: "boolean"
+})], _BaseDropdown.prototype, "multiple", 2);
+__decorateClass$z([attr], _BaseDropdown.prototype, "name", 2);
+__decorateClass$z([observable], _BaseDropdown.prototype, "open", 2);
+__decorateClass$z([attr], _BaseDropdown.prototype, "placeholder", 2);
+__decorateClass$z([attr({
+  mode: "boolean"
+})], _BaseDropdown.prototype, "required", 2);
+__decorateClass$z([attr], _BaseDropdown.prototype, "type", 2);
+__decorateClass$z([attr({
+  attribute: "value"
+})], _BaseDropdown.prototype, "valueAttribute", 2);
+let BaseDropdown = _BaseDropdown;
+
+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$y(target, key, result);
+  return result;
+};
+class Dropdown extends BaseDropdown {
+  constructor() {
+    super(...arguments);
+    this.appearance = DropdownAppearance.outline;
+  }
+  /**
+   * 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);
+  }
+}
+__decorateClass$y([attr], Dropdown.prototype, "appearance", 2);
+__decorateClass$y([attr], Dropdown.prototype, "size", 2);
 
 const styles$s = css`
   ${display("inline-flex")}
@@ -8191,12 +8181,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-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$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$v(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 class BaseField extends FASTElement {
@@ -8364,17 +8354,17 @@ class BaseField extends FASTElement {
     }
   }
 }
-__decorateClass$v([observable], BaseField.prototype, "labelSlot", 2);
-__decorateClass$v([observable], BaseField.prototype, "messageSlot", 2);
-__decorateClass$v([observable], BaseField.prototype, "slottedInputs", 2);
-__decorateClass$v([observable], BaseField.prototype, "input", 2);
+__decorateClass$x([observable], BaseField.prototype, "labelSlot", 2);
+__decorateClass$x([observable], BaseField.prototype, "messageSlot", 2);
+__decorateClass$x([observable], BaseField.prototype, "slottedInputs", 2);
+__decorateClass$x([observable], BaseField.prototype, "input", 2);
 
-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$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$u(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 class Field extends BaseField {
@@ -8383,7 +8373,7 @@ class Field extends BaseField {
     this.labelPosition = LabelPosition.above;
   }
 }
-__decorateClass$u([attr({
+__decorateClass$w([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
 
@@ -8427,12 +8417,12 @@ const ImageShape = {
   square: "square"
 };
 
-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$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$t(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 class Image extends FASTElement {
@@ -8486,17 +8476,17 @@ class Image extends FASTElement {
     swapStates(this.elementInternals, prev, next, ImageShape);
   }
 }
-__decorateClass$t([attr({
+__decorateClass$v([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$t([attr({
+__decorateClass$v([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$t([attr({
+__decorateClass$v([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$t([attr], Image.prototype, "fit", 2);
-__decorateClass$t([attr], Image.prototype, "shape", 2);
+__decorateClass$v([attr], Image.prototype, "fit", 2);
+__decorateClass$v([attr], Image.prototype, "shape", 2);
 
 const template$r = html`<slot></slot>`;
 
@@ -8521,12 +8511,12 @@ const LabelWeight = {
   semibold: "semibold"
 };
 
-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$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$s(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -8566,12 +8556,12 @@ class Label extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$s([attr], Label.prototype, "size", 2);
-__decorateClass$s([attr], Label.prototype, "weight", 2);
-__decorateClass$s([attr({
+__decorateClass$u([attr], Label.prototype, "size", 2);
+__decorateClass$u([attr], Label.prototype, "weight", 2);
+__decorateClass$u([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$s([attr({
+__decorateClass$u([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
@@ -8597,12 +8587,12 @@ const LinkAppearance = {
   subtle: "subtle"
 };
 
-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$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$r(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 class Link extends BaseAnchor {
@@ -8627,8 +8617,8 @@ class Link extends BaseAnchor {
     toggleState(this.elementInternals, "inline", next);
   }
 }
-__decorateClass$r([attr], Link.prototype, "appearance", 2);
-__decorateClass$r([attr({
+__decorateClass$t([attr], Link.prototype, "appearance", 2);
+__decorateClass$t([attr({
   mode: "boolean"
 })], Link.prototype, "inline", 2);
 
@@ -8651,12 +8641,12 @@ const definition$p = Link.compose({
 
 definition$p.define(FluentDesignSystem.registry);
 
-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$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$q(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 class Listbox extends FASTElement {
@@ -8794,14 +8784,14 @@ class Listbox extends FASTElement {
     this.selectedIndex = selectedIndex;
   }
 }
-__decorateClass$q([attr({
+__decorateClass$s([attr({
   attribute: "id",
   mode: "fromView"
 })], Listbox.prototype, "id", 2);
-__decorateClass$q([observable], Listbox.prototype, "multiple", 2);
-__decorateClass$q([observable], Listbox.prototype, "options", 2);
-__decorateClass$q([observable], Listbox.prototype, "selectedIndex", 2);
-__decorateClass$q([observable], Listbox.prototype, "dropdown", 2);
+__decorateClass$s([observable], Listbox.prototype, "multiple", 2);
+__decorateClass$s([observable], Listbox.prototype, "options", 2);
+__decorateClass$s([observable], Listbox.prototype, "selectedIndex", 2);
+__decorateClass$s([observable], Listbox.prototype, "dropdown", 2);
 
 const styles$n = css`
   ${display("inline-flex")}
@@ -8863,12 +8853,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
 
-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$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$p(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 class MenuItem extends FASTElement {
@@ -9057,18 +9047,18 @@ class MenuItem extends FASTElement {
     this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
   }
 }
-__decorateClass$p([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$p([attr], MenuItem.prototype, "role", 2);
-__decorateClass$p([attr({
+__decorateClass$r([attr], MenuItem.prototype, "role", 2);
+__decorateClass$r([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$p([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$p([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$p([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$r([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$r([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
 const styles$m = css`
@@ -9097,12 +9087,12 @@ const definition$m = MenuItem.compose({
 
 definition$m.define(FluentDesignSystem.registry);
 
-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$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$o(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -9318,7 +9308,7 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$o([observable], _MenuList.prototype, "items", 2);
+__decorateClass$q([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
 const styles$l = css`
@@ -9339,12 +9329,12 @@ const definition$l = MenuList.compose({
 
 definition$l.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$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$n(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
@@ -9624,28 +9614,28 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$n([attr({
+__decorateClass$p([attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$n([attr({
+__decorateClass$p([attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$n([attr({
+__decorateClass$p([attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$n([attr({
+__decorateClass$p([attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$n([attr({
+__decorateClass$p([attr({
   mode: "boolean"
 })], Menu.prototype, "split", 2);
-__decorateClass$n([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$n([observable], Menu.prototype, "slottedTriggers", 2);
-__decorateClass$n([observable], Menu.prototype, "primaryAction", 2);
+__decorateClass$p([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$p([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$p([observable], Menu.prototype, "primaryAction", 2);
 
 const styles$k = css`
   ${display("inline-block")}
@@ -9686,12 +9676,12 @@ const MessageBarIntent = {
   info: "info"
 };
 
-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$m(target, key, result);
+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$o(target, key, result);
   return result;
 };
 class MessageBar extends FASTElement {
@@ -9737,9 +9727,9 @@ class MessageBar extends FASTElement {
     swapStates(this.elementInternals, prev, next, MessageBarIntent);
   }
 }
-__decorateClass$m([attr], MessageBar.prototype, "shape", 2);
-__decorateClass$m([attr], MessageBar.prototype, "layout", 2);
-__decorateClass$m([attr], MessageBar.prototype, "intent", 2);
+__decorateClass$o([attr], MessageBar.prototype, "shape", 2);
+__decorateClass$o([attr], MessageBar.prototype, "layout", 2);
+__decorateClass$o([attr], MessageBar.prototype, "intent", 2);
 
 const styles$j = 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'
@@ -9761,12 +9751,12 @@ const definition$j = MessageBar.compose({
 
 definition$j.define(FluentDesignSystem.registry);
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$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$l(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 class DropdownOption extends FASTElement {
@@ -9976,38 +9966,38 @@ class DropdownOption extends FASTElement {
  * @public
  */
 DropdownOption.formAssociated = true;
-__decorateClass$l([observable], DropdownOption.prototype, "active", 2);
-__decorateClass$l([attr({
+__decorateClass$n([observable], DropdownOption.prototype, "active", 2);
+__decorateClass$n([attr({
   attribute: "current-selected",
   mode: "boolean"
 })], DropdownOption.prototype, "currentSelected", 2);
-__decorateClass$l([attr({
+__decorateClass$n([attr({
   attribute: "selected",
   mode: "boolean"
 })], DropdownOption.prototype, "defaultSelected", 2);
-__decorateClass$l([observable], DropdownOption.prototype, "descriptionSlot", 2);
-__decorateClass$l([observable], DropdownOption.prototype, "disabled", 2);
-__decorateClass$l([attr({
+__decorateClass$n([observable], DropdownOption.prototype, "descriptionSlot", 2);
+__decorateClass$n([observable], DropdownOption.prototype, "disabled", 2);
+__decorateClass$n([attr({
   attribute: "disabled",
   mode: "boolean"
 })], DropdownOption.prototype, "disabledAttribute", 2);
-__decorateClass$l([attr({
+__decorateClass$n([attr({
   attribute: "form"
 })], DropdownOption.prototype, "formAttribute", 2);
-__decorateClass$l([attr({
+__decorateClass$n([attr({
   mode: "boolean"
 })], DropdownOption.prototype, "freeform", 2);
-__decorateClass$l([attr({
+__decorateClass$n([attr({
   attribute: "id"
 })], DropdownOption.prototype, "id", 2);
-__decorateClass$l([attr({
+__decorateClass$n([attr({
   attribute: "value",
   mode: "fromView"
 })], DropdownOption.prototype, "initialValue", 2);
-__decorateClass$l([observable], DropdownOption.prototype, "multiple", 2);
-__decorateClass$l([attr], DropdownOption.prototype, "name", 2);
-__decorateClass$l([observable], DropdownOption.prototype, "start", 2);
-__decorateClass$l([attr({
+__decorateClass$n([observable], DropdownOption.prototype, "multiple", 2);
+__decorateClass$n([attr], DropdownOption.prototype, "name", 2);
+__decorateClass$n([observable], DropdownOption.prototype, "start", 2);
+__decorateClass$n([attr({
   attribute: "text",
   mode: "fromView"
 })], DropdownOption.prototype, "textAttribute", 2);
@@ -10064,12 +10054,12 @@ const ProgressBarValidationState = {
   error: "error"
 };
 
-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 BaseProgressBar extends FASTElement {
@@ -10127,26 +10117,26 @@ class BaseProgressBar extends FASTElement {
     return range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
-__decorateClass$k([attr({
+__decorateClass$m([attr({
   attribute: "validation-state"
 })], BaseProgressBar.prototype, "validationState", 2);
-__decorateClass$k([attr({
+__decorateClass$m([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "value", 2);
-__decorateClass$k([attr({
+__decorateClass$m([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "min", 2);
-__decorateClass$k([attr({
+__decorateClass$m([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "max", 2);
-__decorateClass$k([volatile], BaseProgressBar.prototype, "percentComplete", 1);
+__decorateClass$m([volatile], BaseProgressBar.prototype, "percentComplete", 1);
 
-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 ProgressBar extends BaseProgressBar {
@@ -10167,8 +10157,8 @@ class ProgressBar extends BaseProgressBar {
     swapStates(this.elementInternals, prev, next, ProgressBarShape);
   }
 }
-__decorateClass$j([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$j([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$l([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$l([attr], ProgressBar.prototype, "shape", 2);
 
 const styles$h = css`
   ${display("block")}
@@ -10274,12 +10264,12 @@ function getRootActiveElement(element) {
 
 const RadioGroupOrientation = Orientation;
 
-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 RadioGroup extends FASTElement {
@@ -10708,19 +10698,19 @@ class RadioGroup extends FASTElement {
  * @public
  */
 RadioGroup.formAssociated = true;
-__decorateClass$i([observable], RadioGroup.prototype, "checkedIndex", 2);
-__decorateClass$i([attr({
+__decorateClass$k([observable], RadioGroup.prototype, "checkedIndex", 2);
+__decorateClass$k([attr({
   attribute: "disabled",
   mode: "boolean"
 })], RadioGroup.prototype, "disabled", 2);
-__decorateClass$i([attr({
+__decorateClass$k([attr({
   attribute: "value",
   mode: "fromView"
 })], RadioGroup.prototype, "initialValue", 2);
-__decorateClass$i([attr], RadioGroup.prototype, "name", 2);
-__decorateClass$i([attr], RadioGroup.prototype, "orientation", 2);
-__decorateClass$i([observable], RadioGroup.prototype, "radios", 2);
-__decorateClass$i([attr({
+__decorateClass$k([attr], RadioGroup.prototype, "name", 2);
+__decorateClass$k([attr], RadioGroup.prototype, "orientation", 2);
+__decorateClass$k([observable], RadioGroup.prototype, "radios", 2);
+__decorateClass$k([attr({
   mode: "boolean"
 })], RadioGroup.prototype, "required", 2);
 
@@ -10767,12 +10757,12 @@ const definition$f = Radio.compose({
 
 definition$f.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$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 BaseRatingDisplay extends FASTElement {
@@ -10838,20 +10828,20 @@ class BaseRatingDisplay extends FASTElement {
     return htmlString;
   }
 }
-__decorateClass$h([attr({
+__decorateClass$j([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "count", 2);
-__decorateClass$h([attr({
+__decorateClass$j([attr({
   attribute: "icon-view-box"
 })], BaseRatingDisplay.prototype, "iconViewBox", 2);
-__decorateClass$h([attr({
+__decorateClass$j([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "max", 2);
-__decorateClass$h([attr({
+__decorateClass$j([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "value", 2);
-__decorateClass$h([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
-__decorateClass$h([observable], BaseRatingDisplay.prototype, "customIcon", 2);
+__decorateClass$j([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
+__decorateClass$j([observable], BaseRatingDisplay.prototype, "customIcon", 2);
 
 const RatingDisplayColor = {
   neutral: "neutral",
@@ -10864,12 +10854,12 @@ const RatingDisplaySize = {
   large: "large"
 };
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 class RatingDisplay extends BaseRatingDisplay {
@@ -10912,9 +10902,9 @@ class RatingDisplay extends BaseRatingDisplay {
     return (this.compact ? 1 : this.max ?? 5) * 2;
   }
 }
-__decorateClass$g([attr], RatingDisplay.prototype, "color", 2);
-__decorateClass$g([attr], RatingDisplay.prototype, "size", 2);
-__decorateClass$g([attr({
+__decorateClass$i([attr], RatingDisplay.prototype, "color", 2);
+__decorateClass$i([attr], RatingDisplay.prototype, "size", 2);
+__decorateClass$i([attr({
   mode: "boolean"
 })], RatingDisplay.prototype, "compact", 2);
 
@@ -10958,12 +10948,12 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   return pct;
 }
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 class Slider extends FASTElement {
@@ -11488,34 +11478,34 @@ class Slider extends FASTElement {
  * @public
  */
 Slider.formAssociated = true;
-__decorateClass$f([attr], Slider.prototype, "size", 2);
-__decorateClass$f([attr({
+__decorateClass$h([attr], Slider.prototype, "size", 2);
+__decorateClass$h([attr({
   attribute: "value",
   mode: "fromView"
 })], Slider.prototype, "initialValue", 2);
-__decorateClass$f([observable], Slider.prototype, "direction", 2);
-__decorateClass$f([observable], Slider.prototype, "isDragging", 2);
-__decorateClass$f([observable], Slider.prototype, "position", 2);
-__decorateClass$f([observable], Slider.prototype, "trackWidth", 2);
-__decorateClass$f([observable], Slider.prototype, "trackMinWidth", 2);
-__decorateClass$f([observable], Slider.prototype, "trackHeight", 2);
-__decorateClass$f([observable], Slider.prototype, "trackLeft", 2);
-__decorateClass$f([observable], Slider.prototype, "trackMinHeight", 2);
-__decorateClass$f([observable], Slider.prototype, "valueTextFormatter", 2);
-__decorateClass$f([attr({
+__decorateClass$h([observable], Slider.prototype, "direction", 2);
+__decorateClass$h([observable], Slider.prototype, "isDragging", 2);
+__decorateClass$h([observable], Slider.prototype, "position", 2);
+__decorateClass$h([observable], Slider.prototype, "trackWidth", 2);
+__decorateClass$h([observable], Slider.prototype, "trackMinWidth", 2);
+__decorateClass$h([observable], Slider.prototype, "trackHeight", 2);
+__decorateClass$h([observable], Slider.prototype, "trackLeft", 2);
+__decorateClass$h([observable], Slider.prototype, "trackMinHeight", 2);
+__decorateClass$h([observable], Slider.prototype, "valueTextFormatter", 2);
+__decorateClass$h([attr({
   mode: "boolean"
 })], Slider.prototype, "disabled", 2);
-__decorateClass$f([attr({
+__decorateClass$h([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "min", 2);
-__decorateClass$f([attr({
+__decorateClass$h([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "max", 2);
-__decorateClass$f([attr({
+__decorateClass$h([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "step", 2);
-__decorateClass$f([attr], Slider.prototype, "orientation", 2);
-__decorateClass$f([attr], Slider.prototype, "mode", 2);
+__decorateClass$h([attr], Slider.prototype, "orientation", 2);
+__decorateClass$h([attr], Slider.prototype, "mode", 2);
 
 const styles$d = css`
   ${display("inline-grid")}
@@ -11569,12 +11559,12 @@ const SpinnerSize = {
   huge: "huge"
 };
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 class Spinner extends BaseSpinner {
@@ -11595,8 +11585,8 @@ class Spinner extends BaseSpinner {
     swapStates(this.elementInternals, prev, next, SpinnerAppearance);
   }
 }
-__decorateClass$e([attr], Spinner.prototype, "size", 2);
-__decorateClass$e([attr], Spinner.prototype, "appearance", 2);
+__decorateClass$g([attr], Spinner.prototype, "size", 2);
+__decorateClass$g([attr], Spinner.prototype, "appearance", 2);
 
 const styles$c = css`
   ${display("inline-flex")}
@@ -11662,12 +11652,12 @@ const definition$a = TabPanel.compose({
 
 definition$a.define(FluentDesignSystem.registry);
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class Tab extends FASTElement {
@@ -11681,7 +11671,7 @@ class Tab extends FASTElement {
     this.$fastController.addStyles(this.styles);
   }
 }
-__decorateClass$d([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Tab.prototype, "disabled", 2);
 applyMixins(Tab, StartEnd);
@@ -11711,12 +11701,12 @@ const TabsAppearance = {
 };
 const TabsOrientation = Orientation;
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class BaseTabs extends FASTElement {
@@ -11960,17 +11950,17 @@ class BaseTabs extends FASTElement {
     this.activeTabIndex = this.getActiveIndex();
   }
 }
-__decorateClass$c([attr], BaseTabs.prototype, "orientation", 2);
-__decorateClass$c([attr], BaseTabs.prototype, "activeid", 2);
-__decorateClass$c([observable], BaseTabs.prototype, "tabs", 2);
-__decorateClass$c([observable], BaseTabs.prototype, "tabpanels", 2);
+__decorateClass$e([attr], BaseTabs.prototype, "orientation", 2);
+__decorateClass$e([attr], BaseTabs.prototype, "activeid", 2);
+__decorateClass$e([observable], BaseTabs.prototype, "tabs", 2);
+__decorateClass$e([observable], BaseTabs.prototype, "tabpanels", 2);
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 class Tabs extends BaseTabs {
@@ -12104,11 +12094,11 @@ class Tabs extends BaseTabs {
     this.setTabData();
   }
 }
-__decorateClass$b([attr], Tabs.prototype, "appearance", 2);
-__decorateClass$b([attr({
+__decorateClass$d([attr], Tabs.prototype, "appearance", 2);
+__decorateClass$d([attr({
   mode: "boolean"
 })], Tabs.prototype, "disabled", 2);
-__decorateClass$b([attr], Tabs.prototype, "size", 2);
+__decorateClass$d([attr], Tabs.prototype, "size", 2);
 applyMixins(Tabs, StartEnd);
 
 function tabsTemplate(options = {}) {
@@ -12150,12 +12140,12 @@ const TablistSize = {
 };
 const TablistOrientation = Orientation;
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 class BaseTablist extends FASTElement {
@@ -12368,19 +12358,19 @@ class BaseTablist extends FASTElement {
     this.activeTabIndex = this.getActiveIndex();
   }
 }
-__decorateClass$a([attr({
+__decorateClass$c([attr({
   mode: "boolean"
 })], BaseTablist.prototype, "disabled", 2);
-__decorateClass$a([attr], BaseTablist.prototype, "orientation", 2);
-__decorateClass$a([attr], BaseTablist.prototype, "activeid", 2);
-__decorateClass$a([observable], BaseTablist.prototype, "tabs", 2);
+__decorateClass$c([attr], BaseTablist.prototype, "orientation", 2);
+__decorateClass$c([attr], BaseTablist.prototype, "activeid", 2);
+__decorateClass$c([observable], BaseTablist.prototype, "tabs", 2);
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 class Tablist extends BaseTablist {
@@ -12534,8 +12524,8 @@ class Tablist extends BaseTablist {
     }
   }
 }
-__decorateClass$9([attr], Tablist.prototype, "appearance", 2);
-__decorateClass$9([attr], Tablist.prototype, "size", 2);
+__decorateClass$b([attr], Tablist.prototype, "appearance", 2);
+__decorateClass$b([attr], Tablist.prototype, "size", 2);
 
 const template$7 = html`<template role="tablist"><slot name="tab" ${slotted("tabs")}></slot></template>`;
 
@@ -12570,12 +12560,12 @@ const TextAreaResize = {
   vertical: "vertical"
 };
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$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$8(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 class BaseTextArea extends FASTElement {
@@ -12944,56 +12934,56 @@ class BaseTextArea extends FASTElement {
  * @public
  */
 BaseTextArea.formAssociated = true;
-__decorateClass$8([observable], BaseTextArea.prototype, "defaultSlottedNodes", 2);
-__decorateClass$8([observable], BaseTextArea.prototype, "labelSlottedNodes", 2);
-__decorateClass$8([attr], BaseTextArea.prototype, "autocomplete", 2);
-__decorateClass$8([attr({
+__decorateClass$a([observable], BaseTextArea.prototype, "defaultSlottedNodes", 2);
+__decorateClass$a([observable], BaseTextArea.prototype, "labelSlottedNodes", 2);
+__decorateClass$a([attr], BaseTextArea.prototype, "autocomplete", 2);
+__decorateClass$a([attr({
   attribute: "auto-resize",
   mode: "boolean"
 })], BaseTextArea.prototype, "autoResize", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   attribute: "dirname"
 })], BaseTextArea.prototype, "dirName", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "disabled", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   attribute: "display-shadow",
   mode: "boolean"
 })], BaseTextArea.prototype, "displayShadow", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   attribute: "form"
 })], BaseTextArea.prototype, "initialForm", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   attribute: "maxlength",
   converter: nullableNumberConverter
 })], BaseTextArea.prototype, "maxLength", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   attribute: "minlength",
   converter: nullableNumberConverter
 })], BaseTextArea.prototype, "minLength", 2);
-__decorateClass$8([attr], BaseTextArea.prototype, "name", 2);
-__decorateClass$8([attr], BaseTextArea.prototype, "placeholder", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr], BaseTextArea.prototype, "name", 2);
+__decorateClass$a([attr], BaseTextArea.prototype, "placeholder", 2);
+__decorateClass$a([attr({
   attribute: "readonly",
   mode: "boolean"
 })], BaseTextArea.prototype, "readOnly", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "required", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   mode: "fromView"
 })], BaseTextArea.prototype, "resize", 2);
-__decorateClass$8([attr({
+__decorateClass$a([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "spellcheck", 2);
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 class TextArea extends BaseTextArea {
@@ -13061,13 +13051,13 @@ class TextArea extends BaseTextArea {
     toggleState(this.elementInternals, "display-shadow", this.displayShadow && TextAreaAppearancesForDisplayShadow.includes(this.appearance));
   }
 }
-__decorateClass$7([attr({
+__decorateClass$9([attr({
   mode: "fromView"
 })], TextArea.prototype, "appearance", 2);
-__decorateClass$7([attr({
+__decorateClass$9([attr({
   mode: "boolean"
 })], TextArea.prototype, "block", 2);
-__decorateClass$7([attr], TextArea.prototype, "size", 2);
+__decorateClass$9([attr], TextArea.prototype, "size", 2);
 
 const styles$6 = css`
   ${display("inline-block")}
@@ -13117,12 +13107,12 @@ const TextInputType = {
 };
 const ImplicitSubmissionBlockingTypes = ["date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 class BaseTextInput extends FASTElement {
@@ -13443,63 +13433,63 @@ class BaseTextInput extends FASTElement {
  * @public
  */
 BaseTextInput.formAssociated = true;
-__decorateClass$6([attr], BaseTextInput.prototype, "autocomplete", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr], BaseTextInput.prototype, "autocomplete", 2);
+__decorateClass$8([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "autofocus", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   attribute: "current-value"
 })], BaseTextInput.prototype, "currentValue", 2);
-__decorateClass$6([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
-__decorateClass$6([attr], BaseTextInput.prototype, "dirname", 2);
-__decorateClass$6([attr({
+__decorateClass$8([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
+__decorateClass$8([attr], BaseTextInput.prototype, "dirname", 2);
+__decorateClass$8([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "disabled", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   attribute: "form"
 })], BaseTextInput.prototype, "formAttribute", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseTextInput.prototype, "initialValue", 2);
-__decorateClass$6([attr], BaseTextInput.prototype, "list", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr], BaseTextInput.prototype, "list", 2);
+__decorateClass$8([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "maxlength", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "minlength", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "multiple", 2);
-__decorateClass$6([attr], BaseTextInput.prototype, "name", 2);
-__decorateClass$6([attr], BaseTextInput.prototype, "pattern", 2);
-__decorateClass$6([attr], BaseTextInput.prototype, "placeholder", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr], BaseTextInput.prototype, "name", 2);
+__decorateClass$8([attr], BaseTextInput.prototype, "pattern", 2);
+__decorateClass$8([attr], BaseTextInput.prototype, "placeholder", 2);
+__decorateClass$8([attr({
   attribute: "readonly",
   mode: "boolean"
 })], BaseTextInput.prototype, "readOnly", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "required", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "size", 2);
-__decorateClass$6([attr({
+__decorateClass$8([attr({
   converter: {
     fromView: value => typeof value === "string" ? ["true", ""].includes(value.trim().toLowerCase()) : null,
     toView: value => value.toString()
   }
 })], BaseTextInput.prototype, "spellcheck", 2);
-__decorateClass$6([attr], BaseTextInput.prototype, "type", 2);
-__decorateClass$6([observable], BaseTextInput.prototype, "controlLabel", 2);
+__decorateClass$8([attr], BaseTextInput.prototype, "type", 2);
+__decorateClass$8([observable], BaseTextInput.prototype, "controlLabel", 2);
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$5(target, key, result);
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 class TextInput extends BaseTextInput {
@@ -13520,8 +13510,8 @@ class TextInput extends BaseTextInput {
     swapStates(this.elementInternals, prev, next, TextInputControlSize);
   }
 }
-__decorateClass$5([attr], TextInput.prototype, "appearance", 2);
-__decorateClass$5([attr({
+__decorateClass$7([attr], TextInput.prototype, "appearance", 2);
+__decorateClass$7([attr({
   attribute: "control-size"
 })], TextInput.prototype, "controlSize", 2);
 applyMixins(TextInput, StartEnd);
@@ -13580,12 +13570,12 @@ const TextAlign = {
   justify: "justify"
 };
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$4(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 class Text extends FASTElement {
@@ -13666,28 +13656,28 @@ class Text extends FASTElement {
     }
   }
 }
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], Text.prototype, "nowrap", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], Text.prototype, "truncate", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], Text.prototype, "italic", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], Text.prototype, "underline", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], Text.prototype, "strikethrough", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], Text.prototype, "block", 2);
-__decorateClass$4([attr], Text.prototype, "size", 2);
-__decorateClass$4([attr], Text.prototype, "font", 2);
-__decorateClass$4([attr], Text.prototype, "weight", 2);
-__decorateClass$4([attr], Text.prototype, "align", 2);
+__decorateClass$6([attr], Text.prototype, "size", 2);
+__decorateClass$6([attr], Text.prototype, "font", 2);
+__decorateClass$6([attr], Text.prototype, "weight", 2);
+__decorateClass$6([attr], Text.prototype, "align", 2);
 
 const styles$4 = css`
   ${display("inline")}
@@ -13704,12 +13694,12 @@ const definition$4 = Text.compose({
 
 definition$4.define(FluentDesignSystem.registry);
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$3(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 class ToggleButton extends Button {
@@ -13756,10 +13746,10 @@ class ToggleButton extends Button {
     }
   }
 }
-__decorateClass$3([attr({
+__decorateClass$5([attr({
   mode: "boolean"
 })], ToggleButton.prototype, "pressed", 2);
-__decorateClass$3([attr({
+__decorateClass$5([attr({
   mode: "boolean"
 })], ToggleButton.prototype, "mixed", 2);
 
@@ -13779,12 +13769,12 @@ const definition$3 = ToggleButton.compose({
 
 definition$3.define(FluentDesignSystem.registry);
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$2(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 class Tooltip extends FASTElement {
@@ -13950,12 +13940,12 @@ class Tooltip extends FASTElement {
     }
   }
 }
-__decorateClass$2([attr], Tooltip.prototype, "id", 2);
-__decorateClass$2([attr({
+__decorateClass$4([attr], Tooltip.prototype, "id", 2);
+__decorateClass$4([attr({
   converter: nullableNumberConverter
 })], Tooltip.prototype, "delay", 2);
-__decorateClass$2([attr], Tooltip.prototype, "positioning", 2);
-__decorateClass$2([attr], Tooltip.prototype, "anchor", 2);
+__decorateClass$4([attr], Tooltip.prototype, "positioning", 2);
+__decorateClass$4([attr], Tooltip.prototype, "anchor", 2);
 
 const TooltipPositioningOption = {
   "above-start": "block-start span-inline-end",
@@ -14003,224 +13993,237 @@ function isTreeItem(element, tagName = "-tree-item") {
   return element.tagName.toLowerCase().endsWith(tagName);
 }
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$1(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
-class TreeItem extends FASTElement {
+class BaseTree extends FASTElement {
   constructor() {
     super();
+    this.currentSelected = null;
+    /**
+     * The tree item that is designated to be in the tab queue.
+     *
+     * @internal
+     */
+    this.currentFocused = null;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.expanded = false;
-    this.selected = false;
-    this.empty = false;
-    this.size = TreeItemSize.small;
-    this.appearance = TreeItemAppearance.subtle;
     this.childTreeItems = [];
-    this.elementInternals.role = "treeitem";
+    this.elementInternals.role = "tree";
+  }
+  childTreeItemsChanged() {
+    this.updateCurrentSelected();
   }
   /**
-   * Handles changes to the expanded attribute
-   * @param prev - the previous state
-   * @param next - the next state
-   *
-   * @public
+   * Updates current selected when slottedTreeItems changes
    */
-  expandedChanged(prev, next) {
-    toggleState(this.elementInternals, "expanded", next);
-    if (this.childTreeItems && this.childTreeItems.length > 0) {
-      this.elementInternals.ariaExpanded = next ? "true" : "false";
+  updateCurrentSelected() {
+    const selectedItem = this.querySelector(`[aria-selected='true']`);
+    this.currentSelected = selectedItem;
+    if (this.currentFocused === null || !this.contains(this.currentFocused)) {
+      this.currentFocused = this.getValidFocusableItem();
     }
   }
   /**
-   * Handles changes to the selected attribute
-   * @param prev - the previous state
-   * @param next - the next state
+   * KeyDown handler
    *
-   * @internal
-   */
-  selectedChanged(prev, next) {
-    this.$emit("change");
-    toggleState(this.elementInternals, "selected", next);
-    this.elementInternals.ariaSelected = next ? "true" : "false";
-  }
-  /**
-   * Handles changes to the size attribute
-   * we update the child tree items' size based on the size
    *  @internal
    */
-  sizeChanged() {
-    this.updateChildTreeItems();
-  }
-  /**
-   * Handles changes to the appearance attribute
-   *
-   * @internal
-   */
-  appearanceChanged() {
-    this.updateChildTreeItems();
-  }
-  dataIndentChanged(prev, next) {
-    if (this.styles !== void 0) {
-      this.$fastController.removeStyles(this.styles);
+  keydownHandler(e) {
+    if (e.defaultPrevented) {
+      return;
     }
-    this.styles = css`
-      :host{--indent:${next}}`;
-    this.$fastController.addStyles(this.styles);
+    const item = e.target;
+    if (!isTreeItem(item) || this.childTreeItems.length < 1) {
+      return true;
+    }
+    const elements = this.getVisibleNodes();
+    switch (e.key) {
+      case keyHome:
+        {
+          if (elements.length) {
+            elements[0].focus();
+          }
+          return;
+        }
+      case keyEnd:
+        {
+          if (elements.length) {
+            elements[elements.length - 1].focus();
+          }
+          return;
+        }
+      case keyArrowLeft:
+        {
+          if (item?.childTreeItems?.length && item.expanded) {
+            item.expanded = false;
+          } else if (isTreeItem(item.parentElement)) {
+            item.parentElement.focus();
+          }
+          return;
+        }
+      case keyArrowRight:
+        {
+          if (item?.childTreeItems?.length) {
+            if (!item.expanded) {
+              item.expanded = true;
+            } else {
+              this.focusNextNode(1, item);
+            }
+          }
+          return;
+        }
+      case keyArrowDown:
+        {
+          this.focusNextNode(1, item);
+          return;
+        }
+      case keyArrowUp:
+        {
+          this.focusNextNode(-1, item);
+          return;
+        }
+      case keyEnter:
+        {
+          this.clickHandler(e);
+          return;
+        }
+      case keySpace:
+        {
+          item.toggleSelection();
+          return;
+        }
+    }
+    return true;
   }
   /**
-   * Handles changes to the child tree items
+   * Handle focus events
    *
    * @internal
    */
-  childTreeItemsChanged() {
-    this.empty = this.childTreeItems?.length === 0;
-    this.updateChildTreeItems();
-  }
-  /**
-   * 1. Update the child items' size based on the tree's size
-   * 2. Update the child items' appearance based on the tree's appearance
-   */
-  updateChildTreeItems() {
-    if (!this.childTreeItems?.length) {
+  focusHandler(e) {
+    if (this.childTreeItems.length < 1) {
       return;
     }
-    this.childTreeItems.forEach(item => {
-      if (!isTreeItem(item)) {
-        return;
+    if (e.target === this) {
+      if (this.currentFocused === null) {
+        this.currentFocused = this.getValidFocusableItem();
       }
-      this.setIndent(item);
-      item.size = this.size;
-      item.appearance = this.appearance;
-    });
-  }
-  /**
-   * Sets the indent for each item
-   */
-  setIndent(item) {
-    const indent = this.dataIndent ?? 0;
-    item.dataIndent = indent + 1;
-  }
-  /**
-   * Handle focus events
-   *
-   * @public
-   */
-  focusHandler(e) {
-    if (e.target === this ||
-    // In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
-    // so users can shift+tab to navigate to the tree-item from its child focusable element.
-    this.contains(e.target)) {
-      this.setAttribute("tabindex", "0");
+      if (this.currentFocused !== null) {
+        this.currentFocused.focus();
+      }
+      return;
+    }
+    if (this.contains(e.target)) {
+      this.setAttribute("tabindex", "-1");
+      this.currentFocused = e.target;
     }
   }
   /**
    * Handle blur events
    *
-   * @public
+   * @internal
    */
   blurHandler(e) {
-    if (e.target === this) {
-      this.setAttribute("tabindex", "-1");
+    if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
+      this.setAttribute("tabindex", "0");
     }
   }
   /**
-   * Toggle the expansion state of the tree item
+   * Handles click events bubbling up
    *
-   * @public
+   *  @internal
    */
-  toggleExpansion() {
-    if (this.childTreeItems?.length) {
-      this.expanded = !this.expanded;
-    }
+  clickHandler(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (!isTreeItem(e.target)) {
+      return true;
+    }
+    const item = e.target;
+    item.toggleExpansion();
+    item.toggleSelection();
   }
   /**
-   * Toggle the single selection state of the tree item
+   * Handles the selected-changed events bubbling up
+   * from child tree items
    *
-   * @public
+   *  @internal
    */
-  toggleSelection() {
-    this.selected = !this.selected;
+  changeHandler(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (!isTreeItem(e.target)) {
+      return true;
+    }
+    const item = e.target;
+    if (item.selected) {
+      if (this.currentSelected && this.currentSelected !== item && isTreeItem(this.currentSelected)) {
+        this.currentSelected.selected = false;
+      }
+      this.currentSelected = item;
+    } else if (!item.selected && this.currentSelected === item) {
+      this.currentSelected = null;
+    }
   }
   /**
-   * Whether the tree is nested
-   * @internal
+   * checks if there are any nested tree items
    */
-  get isNestedItem() {
-    return isTreeItem(this.parentElement);
+  getValidFocusableItem() {
+    const elements = this.getVisibleNodes();
+    let focusIndex = elements.findIndex(el => el.selected);
+    if (focusIndex === -1) {
+      focusIndex = elements.findIndex(el => isTreeItem(el));
+    }
+    if (focusIndex !== -1) {
+      return elements[focusIndex];
+    }
+    return null;
+  }
+  getVisibleNodes() {
+    return Array.from(this.querySelectorAll("*")).filter(node => isTreeItem(node) && node.offsetParent !== null);
+  }
+  /**
+   * Move focus to a tree item based on its offset from the provided item
+   */
+  focusNextNode(delta, item) {
+    const visibleNodes = this.getVisibleNodes();
+    if (!visibleNodes.length) {
+      return;
+    }
+    const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
+    if (isHTMLElement(focusItem)) {
+      focusItem.focus();
+    }
   }
 }
-__decorateClass$1([attr({
-  mode: "boolean"
-})], TreeItem.prototype, "expanded", 2);
-__decorateClass$1([attr({
-  mode: "boolean"
-})], TreeItem.prototype, "selected", 2);
-__decorateClass$1([attr({
-  mode: "boolean"
-})], TreeItem.prototype, "empty", 2);
-__decorateClass$1([attr], TreeItem.prototype, "size", 2);
-__decorateClass$1([attr], TreeItem.prototype, "appearance", 2);
-__decorateClass$1([attr({
-  attribute: "data-indent"
-})], TreeItem.prototype, "dataIndent", 2);
-__decorateClass$1([observable], TreeItem.prototype, "childTreeItems", 2);
+__decorateClass$3([observable], BaseTree.prototype, "currentSelected", 2);
+__decorateClass$3([observable], BaseTree.prototype, "childTreeItems", 2);
 
-const chevronIcon = html`<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
-const template$1 = html`<template tabindex="-1" slot="${x => x.isNestedItem ? "item" : void 0}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" ${children({
-  property: "childTreeItems",
-  filter: elements()
-})}><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="badging" part="badging"><slot name="badging"></slot></div><div class="toolbar" part="toolbar"><slot name="toolbar"></slot></div></div><div role="group" class="items" part="items"><slot name="item"></slot></div></template>`;
-
-const styles$1 = css`
-  ${display("block")}
-
-  :host{outline:none}:host(:focus-visible) .positioning-region{box-shadow:${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalXXS}
-      ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:stretch;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;font-size:${fontSizeBase300};min-width:0}.chevron{display:flex;align-items:center;flex-shrink:0;min-width:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};color:${colorNeutralForeground3};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.badging,.toolbar{display:flex;align-items:center;min-width:0;font-size:${fontSizeBase300}}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:hover .content,.positioning-region:hover .chevron{color:${colorNeutralForeground3Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}.positioning-region:active .content,.positioning-region:active .chevron{color:${colorNeutralForeground3Pressed}}::slotted([slot='start']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0;margin-inline-end:${spacingHorizontalXS}}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
-
-const definition$1 = TreeItem.compose({
-  name: `${FluentDesignSystem.prefix}-tree-item`,
-  template: template$1,
-  styles: styles$1
-});
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
-class Tree extends FASTElement {
+class Tree extends BaseTree {
   constructor() {
-    super();
-    this.currentSelected = null;
-    /**
-     * The tree item that is designated to be in the tab queue.
-     *
-     * @internal
-     */
-    this.currentFocused = null;
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    this.elementInternals = this.attachInternals();
+    super(...arguments);
     this.size = TreeItemSize.small;
     this.appearance = TreeItemAppearance.subtle;
-    this.childTreeItems = [];
-    this.elementInternals.role = "tree";
   }
   sizeChanged() {
     this.updateSizeAndAppearance();
@@ -14228,9 +14231,13 @@ class Tree extends FASTElement {
   appearanceChanged() {
     this.updateSizeAndAppearance();
   }
+  /**
+   * child tree items supered change event
+   * @internal
+   */
   childTreeItemsChanged() {
+    super.childTreeItemsChanged();
     this.updateSizeAndAppearance();
-    this.updateCurrentSelected();
   }
   /**
    * 1. Update the child items' size based on the tree's size
@@ -14241,218 +14248,252 @@ class Tree extends FASTElement {
       return;
     }
     this.childTreeItems.forEach(item => {
-      if (!isTreeItem(item)) {
-        return;
-      }
       item.size = this.size;
       item.appearance = this.appearance;
     });
   }
+}
+__decorateClass$2([attr], Tree.prototype, "size", 2);
+__decorateClass$2([attr], Tree.prototype, "appearance", 2);
+
+const styles$1 = css`
+  ${display("block")}
+  :host{outline:none}`;
+
+const template$1 = html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" ${children({
+  property: "childTreeItems",
+  filter: node => isTreeItem(node)
+})}><slot></slot></template>`;
+
+const definition$1 = Tree.compose({
+  name: `${FluentDesignSystem.prefix}-tree`,
+  template: template$1,
+  styles: styles$1
+});
+
+definition$1.define(FluentDesignSystem.registry);
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$1(target, key, result);
+  return result;
+};
+class BaseTreeItem extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.expanded = false;
+    this.selected = false;
+    this.empty = false;
+    this.childTreeItems = [];
+    this.elementInternals.role = "treeitem";
+  }
   /**
-   * Updates current selected when slottedTreeItems changes
+   * Handles changes to the expanded attribute
+   * @param prev - the previous state
+   * @param next - the next state
+   *
+   * @public
    */
-  updateCurrentSelected() {
-    const selectedItem = this.querySelector(`[aria-selected='true']`);
-    this.currentSelected = selectedItem;
-    if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-      this.currentFocused = this.getValidFocusableItem();
+  expandedChanged(prev, next) {
+    toggleState(this.elementInternals, "expanded", next);
+    if (this.childTreeItems && this.childTreeItems.length > 0) {
+      this.elementInternals.ariaExpanded = next ? "true" : "false";
     }
   }
   /**
-   * KeyDown handler
+   * Handles changes to the selected attribute
+   * @param prev - the previous state
+   * @param next - the next state
    *
-   *  @internal
+   * @internal
    */
-  keydownHandler(e) {
-    if (e.defaultPrevented) {
-      return;
-    }
-    const item = e.target;
-    if (!isTreeItem(item) || this.childTreeItems.length < 1) {
-      return true;
+  selectedChanged(prev, next) {
+    this.$emit("change");
+    toggleState(this.elementInternals, "selected", next);
+    this.elementInternals.ariaSelected = next ? "true" : "false";
+  }
+  dataIndentChanged(prev, next) {
+    if (this.styles !== void 0) {
+      this.$fastController.removeStyles(this.styles);
     }
-    const elements = this.getVisibleNodes();
-    switch (e.key) {
-      case keyHome:
-        {
-          if (elements.length) {
-            elements[0].focus();
-          }
-          return;
-        }
-      case keyEnd:
-        {
-          if (elements.length) {
-            elements[elements.length - 1].focus();
-          }
-          return;
-        }
-      case keyArrowLeft:
-        {
-          if (item?.childTreeItems?.length && item.expanded) {
-            item.expanded = false;
-          } else if (isTreeItem(item.parentElement)) {
-            item.parentElement.focus();
-          }
-          return;
-        }
-      case keyArrowRight:
-        {
-          if (item?.childTreeItems?.length) {
-            if (!item.expanded) {
-              item.expanded = true;
-            } else {
-              this.focusNextNode(1, item);
-            }
-          }
-          return;
-        }
-      case keyArrowDown:
-        {
-          this.focusNextNode(1, item);
-          return;
-        }
-      case keyArrowUp:
-        {
-          this.focusNextNode(-1, item);
-          return;
-        }
-      case keyEnter:
-        {
-          this.clickHandler(e);
-          return;
-        }
-      case keySpace:
-        {
-          item.toggleSelection();
-          return;
-        }
+    this.styles = css`
+      :host{--indent:${next}}`;
+    this.$fastController.addStyles(this.styles);
+  }
+  /**
+   * Handles changes to the child tree items
+   *
+   * @public
+   */
+  childTreeItemsChanged() {
+    this.empty = this.childTreeItems?.length === 0;
+    this.updateChildTreeItems();
+  }
+  /**
+   * Updates the childrens indent
+   *
+   * @public
+   */
+  updateChildTreeItems() {
+    if (!this.childTreeItems?.length) {
+      return;
     }
-    return true;
+    this.childTreeItems.forEach(item => {
+      this.setIndent(item);
+    });
+  }
+  /**
+   * Sets the indent for each item
+   */
+  setIndent(item) {
+    const indent = this.dataIndent ?? 0;
+    item.dataIndent = indent + 1;
   }
   /**
    * Handle focus events
    *
-   * @internal
+   * @public
    */
   focusHandler(e) {
-    if (this.childTreeItems.length < 1) {
-      return;
-    }
-    if (e.target === this) {
-      if (this.currentFocused === null) {
-        this.currentFocused = this.getValidFocusableItem();
-      }
-      if (this.currentFocused !== null) {
-        this.currentFocused.focus();
-      }
-      return;
-    }
-    if (this.contains(e.target)) {
-      this.setAttribute("tabindex", "-1");
-      this.currentFocused = e.target;
+    if (e.target === this ||
+    // In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
+    // so users can shift+tab to navigate to the tree-item from its child focusable element.
+    this.contains(e.target)) {
+      this.setAttribute("tabindex", "0");
     }
   }
   /**
    * Handle blur events
    *
-   * @internal
+   * @public
    */
   blurHandler(e) {
-    if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
-      this.setAttribute("tabindex", "0");
+    if (e.target === this) {
+      this.setAttribute("tabindex", "-1");
     }
   }
   /**
-   * Handles click events bubbling up
+   * Toggle the expansion state of the tree item
    *
-   *  @internal
+   * @public
    */
-  clickHandler(e) {
-    if (e.defaultPrevented) {
-      return;
-    }
-    if (!isTreeItem(e.target)) {
-      return true;
+  toggleExpansion() {
+    if (this.childTreeItems?.length) {
+      this.expanded = !this.expanded;
     }
-    const item = e.target;
-    item.toggleExpansion();
-    item.toggleSelection();
   }
   /**
-   * Handles the selected-changed events bubbling up
-   * from child tree items
+   * Toggle the single selection state of the tree item
    *
+   * @public
+   */
+  toggleSelection() {
+    this.selected = !this.selected;
+  }
+  /**
+   * Whether the tree is nested
+   * @internal
+   */
+  get isNestedItem() {
+    return isTreeItem(this.parentElement);
+  }
+}
+__decorateClass$1([attr({
+  mode: "boolean"
+})], BaseTreeItem.prototype, "expanded", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], BaseTreeItem.prototype, "selected", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], BaseTreeItem.prototype, "empty", 2);
+__decorateClass$1([attr({
+  attribute: "data-indent"
+})], BaseTreeItem.prototype, "dataIndent", 2);
+__decorateClass$1([observable], BaseTreeItem.prototype, "childTreeItems", 2);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+class TreeItem extends BaseTreeItem {
+  constructor() {
+    super(...arguments);
+    this.size = TreeItemSize.small;
+    this.appearance = TreeItemAppearance.subtle;
+  }
+  /**
+   * Handles changes to the size attribute
+   * we update the child tree items' size based on the size
    *  @internal
    */
-  changeHandler(e) {
-    if (e.defaultPrevented) {
-      return;
-    }
-    if (!isTreeItem(e.target)) {
-      return true;
-    }
-    const item = e.target;
-    if (item.selected) {
-      if (this.currentSelected && this.currentSelected !== item && this.currentSelected instanceof TreeItem) {
-        this.currentSelected.selected = false;
-      }
-      this.currentSelected = item;
-    } else if (!item.selected && this.currentSelected === item) {
-      this.currentSelected = null;
-    }
+  sizeChanged() {
+    this.updateSizeAndAppearance();
   }
   /**
-   * checks if there are any nested tree items
+   * Handles changes to the appearance attribute
+   *
+   * @internal
    */
-  getValidFocusableItem() {
-    const elements = this.getVisibleNodes();
-    let focusIndex = elements.findIndex(el => el.selected);
-    if (focusIndex === -1) {
-      focusIndex = elements.findIndex(el => el instanceof TreeItem);
-    }
-    if (focusIndex !== -1) {
-      return elements[focusIndex];
-    }
-    return null;
+  appearanceChanged() {
+    this.updateSizeAndAppearance();
   }
-  getVisibleNodes() {
-    return Array.from(this.querySelectorAll("*")).filter(node => isTreeItem(node) && node.offsetParent !== null);
+  /**
+   * child tree items supered change event
+   * @internal
+   */
+  childTreeItemsChanged() {
+    super.childTreeItemsChanged();
+    this.updateSizeAndAppearance();
   }
   /**
-   * Move focus to a tree item based on its offset from the provided item
+   * 1. Update the child items' size based on the tree's size
+   * 2. Update the child items' appearance based on the tree's appearance
+   *
+   * @public
    */
-  focusNextNode(delta, item) {
-    const visibleNodes = this.getVisibleNodes();
-    if (!visibleNodes.length) {
+  updateSizeAndAppearance() {
+    if (!this.childTreeItems?.length) {
       return;
     }
-    const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-    if (isHTMLElement(focusItem)) {
-      focusItem.focus();
-    }
+    this.childTreeItems.forEach(item => {
+      item.size = this.size;
+      item.appearance = this.appearance;
+    });
   }
 }
-__decorateClass([observable], Tree.prototype, "currentSelected", 2);
-__decorateClass([attr], Tree.prototype, "size", 2);
-__decorateClass([attr], Tree.prototype, "appearance", 2);
-__decorateClass([observable], Tree.prototype, "childTreeItems", 2);
+__decorateClass([attr], TreeItem.prototype, "size", 2);
+__decorateClass([attr], TreeItem.prototype, "appearance", 2);
 
 const styles = css`
   ${display("block")}
-  :host{outline:none}`;
 
-const template = html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" ${children({
+  :host{outline:none;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(:focus-visible) .positioning-region{box-shadow:${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalXXS}
+      ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
+
+const chevronIcon = html`<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
+const template = html`<template tabindex="-1" slot="${x => x.isNestedItem ? "item" : void 0}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" ${children({
   property: "childTreeItems",
-  filter: elements()
-})}><slot></slot></template>`;
+  filter: node => isTreeItem(node)
+})}><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item"></slot></div></template>`;
 
-const definition = Tree.compose({
-  name: `${FluentDesignSystem.prefix}-tree`,
+const definition = TreeItem.compose({
+  name: `${FluentDesignSystem.prefix}-tree-item`,
   template: template,
   styles: styles
 });
 
 definition.define(FluentDesignSystem.registry);
-
-definition$1.define(FluentDesignSystem.registry);