@fluentui/web-components 3.0.0-beta.99 → 3.0.0-rc.2

package/dist/web-components.js

@@ -2438,7 +2438,7 @@ function compileNode(context, parentId, node, nodeIndex) {
       // comment
       const parts = Parser.parse(node.data, context.directives);
       if (parts !== null) {
-        context.addFactory( /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+        context.addFactory(/* eslint-disable-next-line @typescript-eslint/no-use-before-define */
         Compiler.aggregate(parts), parentId, nodeId, nodeIndex, null);
       }
       break;
@@ -2872,74 +2872,6 @@ function slotted(propertyOrOptions) {
   return new SlottedDirective(propertyOrOptions);
 }
 
-/**
- * The runtime behavior for child node observation.
- * @public
- */
-class ChildrenDirective extends NodeObservationDirective {
-  /**
-   * Creates an instance of ChildrenDirective.
-   * @param options - The options to use in configuring the child observation behavior.
-   */
-  constructor(options) {
-    super(options);
-    this.observerProperty = Symbol();
-    this.handleEvent = (mutations, observer) => {
-      const target = observer.target;
-      this.updateTarget(this.getSource(target), this.computeNodes(target));
-    };
-    options.childList = true;
-  }
-  /**
-   * Begins observation of the nodes.
-   * @param target - The target to observe.
-   */
-  observe(target) {
-    let observer = target[this.observerProperty];
-    if (!observer) {
-      observer = new MutationObserver(this.handleEvent);
-      observer.toJSON = noop;
-      target[this.observerProperty] = observer;
-    }
-    observer.target = target;
-    observer.observe(target, this.options);
-  }
-  /**
-   * Disconnects observation of the nodes.
-   * @param target - The target to unobserve.
-   */
-  disconnect(target) {
-    const observer = target[this.observerProperty];
-    observer.target = null;
-    observer.disconnect();
-  }
-  /**
-   * Retrieves the raw nodes that should be assigned to the source property.
-   * @param target - The target to get the node to.
-   */
-  getNodes(target) {
-    if ("selector" in this.options) {
-      return Array.from(target.querySelectorAll(this.options.selector));
-    }
-    return Array.from(target.childNodes);
-  }
-}
-HTMLDirective.define(ChildrenDirective);
-/**
- * A directive that observes the `childNodes` of an element and updates a property
- * whenever they change.
- * @param propertyOrOptions - The options used to configure child node observation.
- * @public
- */
-function children(propertyOrOptions) {
-  if (isString(propertyOrOptions)) {
-    propertyOrOptions = {
-      property: propertyOrOptions
-    };
-  }
-  return new ChildrenDirective(propertyOrOptions);
-}
-
 const booleanMode = "boolean";
 const reflectMode = "reflect";
 /**
@@ -4011,70 +3943,70 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
   compose
 });
 
-var __defProp$S = Object.defineProperty;
-var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
-var __decorateClass$S = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
+var __defProp$R = Object.defineProperty;
+var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
+var __decorateClass$R = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$S(target, key, result);
+  if (kind && result) __defProp$R(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$S([attr({
+__decorateClass$R([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -4341,12 +4273,12 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-var __defProp$R = Object.defineProperty;
-var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
+var __defProp$Q = Object.defineProperty;
+var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
+var __decorateClass$Q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$R(target, key, result);
+  if (kind && result) __defProp$Q(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4364,25 +4296,25 @@ class BaseAccordionItem extends FASTElement {
     this.id = uniqueId$1("accordion-");
   }
 }
-__decorateClass$R([attr({
+__decorateClass$Q([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$R([attr({
+__decorateClass$Q([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$R([attr({
+__decorateClass$Q([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$R([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$Q([attr], BaseAccordionItem.prototype, "id", 2);
 
-var __defProp$Q = Object.defineProperty;
-var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
+var __defProp$P = Object.defineProperty;
+var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$Q(target, key, result);
+  if (kind && result) __defProp$P(target, key, result);
   return result;
 };
 class AccordionItem extends BaseAccordionItem {
@@ -4391,11 +4323,11 @@ class AccordionItem extends BaseAccordionItem {
     this.block = false;
   }
 }
-__decorateClass$Q([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$Q([attr({
+__decorateClass$P([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$P([attr({
   attribute: "marker-position"
 })], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$Q([attr({
+__decorateClass$P([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -4509,7 +4441,7 @@ const colorPaletteYellowBackground3 = "var(--colorPaletteYellowBackground3)";
 const colorPaletteYellowBorder1 = "var(--colorPaletteYellowBorder1)";
 const colorPaletteYellowForeground2 = "var(--colorPaletteYellowForeground2)";
 const colorPaletteMarigoldBackground2 = "var(--colorPaletteMarigoldBackground2)";
-const colorPaletteMarigoldBackground3 = "var(--colorPaletteMarigoldBackground3)";
+const colorPaletteMarigoldBorderActive = "var(--colorPaletteMarigoldBorderActive)";
 const colorPaletteMarigoldForeground2 = "var(--colorPaletteMarigoldForeground2)";
 const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
 const colorPaletteAnchorForeground2 = "var(--colorPaletteAnchorForeground2)";
@@ -4700,12 +4632,12 @@ const AccordionExpandMode = {
   multi: "multi"
 };
 
-var __defProp$P = Object.defineProperty;
-var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
+var __defProp$O = Object.defineProperty;
+var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
+var __decorateClass$O = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$P(target, key, result);
+  if (kind && result) __defProp$O(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -4727,10 +4659,8 @@ class Accordion extends FASTElement {
       children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
       this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
       this.accordionItems.forEach((item, index) => {
-        if (item instanceof BaseAccordionItem) {
-          item.addEventListener("click", this.expandedChangedHandler);
-          Observable.getNotifier(item).subscribe(this, "expanded");
-        }
+        item.addEventListener("click", this.expandedChangedHandler);
+        Observable.getNotifier(item).subscribe(this, "expanded");
       });
       if (this.isSingleExpandMode()) {
         const expandedItem = this.findExpandedItem();
@@ -4844,10 +4774,10 @@ class Accordion extends FASTElement {
     });
   }
 }
-__decorateClass$P([attr({
+__decorateClass$O([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$P([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$O([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
 const styles$F = css`
   ${display("flex")}
@@ -4943,12 +4873,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-var __defProp$O = Object.defineProperty;
-var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
+var __defProp$N = Object.defineProperty;
+var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
+var __decorateClass$N = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$O(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -5056,21 +4986,21 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$O([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$O([attr], BaseAnchor.prototype, "type", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$N([attr], BaseAnchor.prototype, "type", 2);
 
-var __defProp$N = Object.defineProperty;
-var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
+var __defProp$M = Object.defineProperty;
+var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
+var __decorateClass$M = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$N(target, key, result);
+  if (kind && result) __defProp$M(target, key, result);
   return result;
 };
 class AnchorButton extends BaseAnchor {
@@ -5111,10 +5041,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$N([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$N([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$N([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$N([attr({
+__decorateClass$M([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$M([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$M([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$M([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -5190,12 +5120,12 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
-var __defProp$M = Object.defineProperty;
-var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
-var __decorateClass$M = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
+var __defProp$L = Object.defineProperty;
+var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
+var __decorateClass$L = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$M(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 class BaseAvatar extends FASTElement {
@@ -5209,9 +5139,43 @@ class BaseAvatar extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "img";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.slotchangeHandler();
+  }
+  disconnectedCallback() {
+    this.abortSignal?.abort();
+    this.abortSignal = void 0;
+    super.disconnectedCallback();
+  }
+  /**
+   * Removes any empty text nodes from the default slot when the slotted content changes.
+   *
+   * @param e - The event object
+   * @internal
+   */
+  slotchangeHandler() {
+    this.normalize();
+    const elements = this.defaultSlot.assignedElements();
+    if (!elements.length && !this.innerText.trim()) {
+      const nodes = this.defaultSlot.assignedNodes();
+      nodes.filter(node => node.nodeType === Node.TEXT_NODE).forEach(node => {
+        this.removeChild(node);
+      });
+    }
+    Updates.enqueue(() => {
+      if (!this.abortSignal || this.abortSignal.signal.aborted) {
+        this.abortSignal = new AbortController();
+      }
+      this.defaultSlot.addEventListener("slotchange", () => this.slotchangeHandler(), {
+        once: true,
+        signal: this.abortSignal.signal
+      });
+    });
+  }
 }
-__decorateClass$M([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$M([attr], BaseAvatar.prototype, "initials", 2);
+__decorateClass$L([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$L([attr], BaseAvatar.prototype, "initials", 2);
 
 const AvatarNamedColor = {
   darkRed: "dark-red",
@@ -5252,12 +5216,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-var __defProp$L = Object.defineProperty;
-var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
+var __defProp$K = Object.defineProperty;
+var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$L(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 const _Avatar = class _Avatar extends BaseAvatar {
@@ -5284,7 +5248,7 @@ const _Avatar = class _Avatar extends BaseAvatar {
       return;
     }
     const size = this.size ?? 32;
-    return this.initials ?? getInitials(this.name, window.getComputedStyle(this).direction === "rtl", {
+    return this.initials || getInitials(this.name, window.getComputedStyle(this).direction === "rtl", {
       firstInitialOnly: size <= 16
     });
   }
@@ -5312,14 +5276,14 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$L([attr], _Avatar.prototype, "active", 2);
-__decorateClass$L([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$L([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$L([attr({
+__decorateClass$K([attr], _Avatar.prototype, "active", 2);
+__decorateClass$K([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$K([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$K([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$L([attr], _Avatar.prototype, "color", 2);
-__decorateClass$L([attr({
+__decorateClass$K([attr], _Avatar.prototype, "color", 2);
+__decorateClass$K([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5349,7 +5313,7 @@ const styles$C = css`
 
 const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
 function avatarTemplate() {
-  return html`<slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot>`;
+  return html`<slot ${ref("defaultSlot")}>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot>`;
 }
 const template$E = avatarTemplate();
 
@@ -5378,12 +5342,12 @@ const BadgeColor = {
   warning: "warning"
 };
 
-var __defProp$K = Object.defineProperty;
-var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
+var __defProp$J = Object.defineProperty;
+var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$K(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -5393,10 +5357,10 @@ class Badge extends FASTElement {
     this.color = BadgeColor.brand;
   }
 }
-__decorateClass$K([attr], Badge.prototype, "appearance", 2);
-__decorateClass$K([attr], Badge.prototype, "color", 2);
-__decorateClass$K([attr], Badge.prototype, "shape", 2);
-__decorateClass$K([attr], Badge.prototype, "size", 2);
+__decorateClass$J([attr], Badge.prototype, "appearance", 2);
+__decorateClass$J([attr], Badge.prototype, "color", 2);
+__decorateClass$J([attr], Badge.prototype, "shape", 2);
+__decorateClass$J([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -5773,19 +5737,19 @@ const definition$D = Badge.compose({
 
 definition$D.define(FluentDesignSystem.registry);
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$J(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 class BaseButton extends FASTElement {
   constructor() {
     super();
+    this.disabled = false;
     this.disabledFocusable = false;
-    this.tabIndex = 0;
     /**
      * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -5794,6 +5758,16 @@ class BaseButton extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "button";
   }
+  disabledChanged() {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    if (this.disabled) {
+      this.removeAttribute("tabindex");
+    } else {
+      this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
+    }
+  }
   /**
    * Sets the element's internal disabled state when the element is focusable while disabled.
    *
@@ -5852,6 +5826,7 @@ class BaseButton extends FASTElement {
   connectedCallback() {
     super.connectedCallback();
     this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
+    this.disabledChanged();
   }
   /**
    * This fallback creates a new slot, then creates a submit button to mirror the custom element's
@@ -5961,7 +5936,7 @@ class BaseButton extends FASTElement {
     if (!this.elementInternals.form || this.disabled || this.type !== ButtonType.submit) {
       return;
     }
-    if (!this.name && !this.formAction && !this.formEnctype && !this.form && !this.formMethod && !this.formNoValidate && !this.formTarget) {
+    if (!this.name && !this.formAction && !this.formEnctype && !this.formAttribute && !this.formMethod && !this.formNoValidate && !this.formTarget) {
       this.elementInternals.form.requestSubmit();
       return;
     }
@@ -5982,51 +5957,46 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   mode: "boolean"
 })], BaseButton.prototype, "autofocus", 2);
-__decorateClass$J([observable], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$J([attr({
+__decorateClass$I([observable], BaseButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$I([attr({
   mode: "boolean"
 })], BaseButton.prototype, "disabled", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$J([attr({
-  attribute: "tabindex",
-  mode: "fromView",
-  converter: nullableNumberConverter
-})], BaseButton.prototype, "tabIndex", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formaction"
 })], BaseButton.prototype, "formAction", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "form"
 })], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formenctype"
 })], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formmethod"
 })], BaseButton.prototype, "formMethod", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$J([attr({
+__decorateClass$I([attr({
   attribute: "formtarget"
 })], BaseButton.prototype, "formTarget", 2);
-__decorateClass$J([attr], BaseButton.prototype, "name", 2);
-__decorateClass$J([attr], BaseButton.prototype, "type", 2);
-__decorateClass$J([attr], BaseButton.prototype, "value", 2);
+__decorateClass$I([attr], BaseButton.prototype, "name", 2);
+__decorateClass$I([attr], BaseButton.prototype, "type", 2);
+__decorateClass$I([attr], BaseButton.prototype, "value", 2);
 
-var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$I(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 class Button extends BaseButton {
@@ -6035,17 +6005,17 @@ class Button extends BaseButton {
     this.iconOnly = false;
   }
 }
-__decorateClass$I([attr], Button.prototype, "appearance", 2);
-__decorateClass$I([attr], Button.prototype, "shape", 2);
-__decorateClass$I([attr], Button.prototype, "size", 2);
-__decorateClass$I([attr({
+__decorateClass$H([attr], Button.prototype, "appearance", 2);
+__decorateClass$H([attr], Button.prototype, "shape", 2);
+__decorateClass$H([attr], Button.prototype, "size", 2);
+__decorateClass$H([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
 applyMixins(Button, StartEnd);
 
 function buttonTemplate$1(options = {}) {
-  return html`<template tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
 }
 const template$C = buttonTemplate$1();
 
@@ -6057,18 +6027,26 @@ const definition$C = Button.compose({
 
 definition$C.define(FluentDesignSystem.registry);
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$H(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
   constructor() {
     super(...arguments);
     this.initialValue = "on";
+    /**
+     * Tracks whether the space key was pressed down while the checkbox was focused.
+     * This is used to prevent inadvertently checking a required, unchecked checkbox when the space key is pressed on a
+     * submit button and field validation is triggered.
+     *
+     * @internal
+     */
+    this._keydownPressed = false;
     /**
      * Indicates that the checked state has been changed by the user.
      *
@@ -6117,6 +6095,11 @@ class BaseCheckbox extends FASTElement {
    * @internal
    */
   disabledChanged(prev, next) {
+    if (this.disabled) {
+      this.removeAttribute("tabindex");
+    } else {
+      this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
+    }
     this.elementInternals.ariaDisabled = this.disabled ? "true" : "false";
     toggleState(this.elementInternals, "disabled", this.disabled);
   }
@@ -6272,6 +6255,7 @@ class BaseCheckbox extends FASTElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.disabled = !!this.disabledAttribute;
     this.setAriaChecked();
     this.setValidity();
   }
@@ -6287,7 +6271,8 @@ class BaseCheckbox extends FASTElement {
     return true;
   }
   /**
-   * Prevents scrolling when the user presses the space key.
+   * Prevents scrolling when the user presses the space key, and sets a flag to indicate that the space key was pressed
+   * down while the checkbox was focused.
    *
    * @param e - the event object
    * @internal
@@ -6296,6 +6281,7 @@ class BaseCheckbox extends FASTElement {
     if (e.key !== " ") {
       return true;
     }
+    this._keydownPressed = true;
   }
   /**
    * Toggles the checked state when the user releases the space key.
@@ -6304,9 +6290,10 @@ class BaseCheckbox extends FASTElement {
    * @internal
    */
   keyupHandler(e) {
-    if (e.key !== " ") {
+    if (!this._keydownPressed || e.key !== " ") {
       return true;
     }
+    this._keydownPressed = false;
     this.click();
   }
   /**
@@ -6396,36 +6383,36 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$H([observable], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$H([attr({
+__decorateClass$G([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$G([attr({
   attribute: "disabled",
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$H([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$H([attr({
+__decorateClass$G([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$G([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 class Checkbox extends BaseCheckbox {
@@ -6468,9 +6455,9 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$G([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$G([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$G([attr], Checkbox.prototype, "size", 2);
+__decorateClass$F([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$F([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$F([attr], Checkbox.prototype, "size", 2);
 
 const activeState = stateSelector("active");
 const badInputState = stateSelector("bad-input");
@@ -6481,7 +6468,7 @@ const disabledState = stateSelector("disabled");
 stateSelector("error");
 const flipBlockState = stateSelector("flip-block");
 const focusVisibleState = stateSelector("focus-visible");
-const hasMessageState = stateSelector("has-message");
+stateSelector("has-message");
 const indeterminateState = stateSelector("indeterminate");
 const multipleState = stateSelector("multiple");
 const openState = stateSelector("open");
@@ -6490,6 +6477,7 @@ const placeholderShownState = stateSelector("placeholder-shown");
 const pressedState = stateSelector("pressed");
 const rangeOverflowState = stateSelector("range-overflow");
 const rangeUnderflowState = stateSelector("range-underflow");
+const requiredState = stateSelector("required");
 const selectedState = stateSelector("selected");
 const stepMismatchState = stateSelector("step-mismatch");
 const submenuState = stateSelector("submenu");
@@ -6506,7 +6494,7 @@ const styles$A = css`
   :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}`));
 
-const checkedIndicator$2 = html.partial( /* html */
+const checkedIndicator$2 = html.partial(/* html */
 `
     <svg
         fill="currentColor"
@@ -6519,12 +6507,12 @@ const checkedIndicator$2 = html.partial( /* html */
             <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
     </svg>
 `);
-const indeterminateIndicator = html.partial( /* html */
+const indeterminateIndicator = html.partial(/* html */
 `
     <span class="indeterminate-indicator"></span>
 `);
 function checkboxTemplate(options = {}) {
-  return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
 const template$B = checkboxTemplate({
   checkedIndicator: checkedIndicator$2,
@@ -6546,7 +6534,9 @@ const styles$z = css`
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active)))
     ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
-    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
+    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([appearance='primary']:not(:hover,:focus-visible,:disabled,[disabled-focusable]))
+      ::slotted([slot='description']){color:HighlightText}`));
 
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
@@ -6561,12 +6551,12 @@ const definition$A = CompoundButton.compose({
 
 definition$A.define(FluentDesignSystem.registry);
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -6603,22 +6593,22 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$F([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$F([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$F([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$F([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$E([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$E([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$E([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$E([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$F([attr({
+__decorateClass$E([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
@@ -6651,13 +6641,19 @@ const DialogType = {
   nonModal: "non-modal",
   alert: "alert"
 };
+function isDialog(element, tagName = "-dialog") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName);
+}
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -6687,6 +6683,26 @@ class Dialog extends FASTElement {
       });
     };
   }
+  typeChanged(prev, next) {
+    if (!this.dialog) {
+      return;
+    }
+    if (next === DialogType.alert) {
+      this.dialog.setAttribute("role", "alertdialog");
+    } else {
+      this.dialog.removeAttribute("role");
+    }
+    if (next !== DialogType.nonModal) {
+      this.dialog.setAttribute("aria-modal", "true");
+    } else {
+      this.dialog.removeAttribute("aria-modal");
+    }
+  }
+  /** @internal */
+  connectedCallback() {
+    super.connectedCallback();
+    this.typeChanged(void 0, this.type);
+  }
   /**
    * @public
    * Method to show the dialog
@@ -6718,26 +6734,25 @@ class Dialog extends FASTElement {
    * @returns boolean
    */
   clickHandler(event) {
-    event.preventDefault();
     if (this.dialog.open && this.type !== DialogType.alert && event.target === this.dialog) {
       this.hide();
     }
     return true;
   }
 }
-__decorateClass$E([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$E([attr({
+__decorateClass$D([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$D([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$E([attr({
+__decorateClass$D([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$E([attr], Dialog.prototype, "type", 2);
+__decorateClass$D([attr], Dialog.prototype, "type", 2);
 
-const template$y = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+const template$y = html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
 const styles$x = css`
-  @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:calc(-48px + 100vh);padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
 
 const definition$y = Dialog.compose({
@@ -6748,45 +6763,30 @@ const definition$y = Dialog.compose({
 
 definition$y.define(FluentDesignSystem.registry);
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
-  return result;
-};
 class DialogBody extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.noTitleAction = false;
+  /**
+   * Handles click event for the close slot
+   *
+   * @param e - the click event
+   * @internal
+   */
+  clickHandler(event) {
+    if (!event.defaultPrevented) {
+      const dialog = this.parentElement;
+      if (isDialog(dialog)) {
+        dialog.hide();
+      }
+    }
+    return true;
   }
 }
-__decorateClass$D([attr({
-  mode: "boolean",
-  attribute: "no-title-action"
-})], DialogBody.prototype, "noTitleAction", 2);
 
-const dismissed16Regular = html.partial(`
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-      fill="currentColor"
-    ></path>
-  </svg>`);
-const template$x = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
+const template$x = html`<template><div class="title" part="title"><slot name="title"></slot><slot name="title-action"></slot><slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></template>`;
 
 const styles$w = css`
   ${display("grid")}
 
-  :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL};position:sticky;z-index:1}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL};position:sticky;z-index:2}:not(:has(:is([slot='title'],[slot='title-action']))) .title:not(:has(.title-action)),:not(:has([slot='action'])) .actions{display:none}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}`;
+  :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
 
 const definition$x = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
@@ -6952,6 +6952,28 @@ class Drawer extends FASTElement {
       });
     };
   }
+  typeChanged() {
+    if (!this.dialog) {
+      return;
+    }
+    this.updateDialogRole();
+    if (this.type === DrawerType.modal) {
+      this.dialog.setAttribute("aria-modal", "true");
+    } else {
+      this.dialog.removeAttribute("aria-modal");
+    }
+  }
+  /** @internal */
+  connectedCallback() {
+    super.connectedCallback();
+    this.typeChanged();
+    this.observeRoleAttr();
+  }
+  /** @internal */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.roleAttrObserver.disconnect();
+  }
   /**
    * @public
    * Method to show the drawer
@@ -6989,6 +7011,32 @@ class Drawer extends FASTElement {
     }
     return true;
   }
+  /**
+   * @public
+   * Handles cancel events on the drawer.
+   */
+  cancelHandler() {
+    this.hide();
+  }
+  observeRoleAttr() {
+    if (this.roleAttrObserver) {
+      return;
+    }
+    this.roleAttrObserver = new MutationObserver(() => {
+      this.updateDialogRole();
+    });
+    this.roleAttrObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ["role"]
+    });
+  }
+  updateDialogRole() {
+    console.log(this.role);
+    if (!this.dialog) {
+      return;
+    }
+    this.dialog.role = this.type === DrawerType.modal ? "dialog" : this.role;
+  }
 }
 __decorateClass$A([attr], Drawer.prototype, "type", 2);
 __decorateClass$A([attr({
@@ -7009,7 +7057,7 @@ const styles$u = css`
   :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
 
 function drawerTemplate() {
-  return html`<dialog class="dialog" part="dialog" role="${x => x.type === "modal" ? "dialog" : x.role}" aria-modal="${x => x.type === "modal" ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" type="${x => x.type}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+  return html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.cancelHandler()}" ${ref("dialog")}><slot></slot></dialog>`;
 }
 const template$v = drawerTemplate();
 
@@ -7021,14 +7069,30 @@ const definition$v = Drawer.compose({
 
 definition$v.define(FluentDesignSystem.registry);
 
-class DrawerBody extends FASTElement {}
+class DrawerBody extends FASTElement {
+  /**
+   * Handles click event for the close slot
+   *
+   * @param e - the click event
+   * @internal
+   */
+  clickHandler(event) {
+    if (!event.defaultPrevented) {
+      const dialog = this.parentElement;
+      if (isDialog(dialog, "-drawer")) {
+        dialog.hide();
+      }
+    }
+    return true;
+  }
+}
 
 const styles$t = css`
   ${display("grid")}
   :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;
 
 function drawerBodyTemplate() {
-  return html`<div class="header" part="header"><slot name="title"></slot><slot name="close"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
+  return html`<div class="header" part="header"><slot name="title"></slot><slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
 }
 const template$u = drawerBodyTemplate();
 
@@ -7064,6 +7128,46 @@ function uniqueId(prefix = "id-") {
   return document.getElementById(str) ? uniqueId(prefix) : str;
 }
 
+function requestIdleCallback(callback, options) {
+  if ("requestIdleCallback" in globalThis) {
+    return globalThis.requestIdleCallback(callback, options);
+  }
+  const start = Date.now();
+  return setTimeout(() => {
+    callback({
+      didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
+      timeRemaining: () => 0
+    });
+  }, 1);
+}
+function cancelIdleCallback(id) {
+  if ("cancelIdleCallback" in globalThis) {
+    globalThis.cancelIdleCallback(id);
+  } else {
+    clearTimeout(id);
+  }
+}
+function waitForConnectedDescendants(target, callback, options) {
+  let idleCallbackId;
+  const shallow = options?.shallow ?? false;
+  const query = `${shallow ? ":scope > " : ""}:not(:defined)`;
+  const timeout = options?.timeout ?? 50;
+  const scheduleCheck = deadline => {
+    if (idleCallbackId) {
+      cancelIdleCallback(idleCallbackId);
+      idleCallbackId = void 0;
+    }
+    if (!target.querySelector(query) || deadline && deadline.timeRemaining() <= 0) {
+      callback();
+      return;
+    }
+    idleCallbackId = requestIdleCallback(scheduleCheck, {
+      timeout
+    });
+  };
+  scheduleCheck();
+}
+
 const DropdownAppearance = {
   filledDarker: "filled-darker",
   filledLighter: "filled-lighter",
@@ -7076,11 +7180,11 @@ const DropdownType = {
   select: "select"
 };
 
-const dropdownIndicatorTemplate = html`<svg class="chevron-down-20-regular" role="button" slot="indicator" viewBox="0 0 20 20" ${ref("indicator")}><path d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0" fill="currentColor" /></svg>`;
-const dropdownInputTemplate = html`<input @input="${(x, c) => x.inputHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-labelledby="${x => x.ariaLabelledBy}" aria-expanded="${x => x.open}" aria-haspopup="listbox" placeholder="${x => x.placeholder}" role="combobox" ?disabled="${x => x.disabled}" type="${x => x.type}" value="${x => x.valueAttribute}" ${ref("control")} />`;
-const dropdownButtonTemplate = html`<button aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-expanded="${x => x.open}" aria-haspopup="listbox" role="combobox" ?disabled="${x => x.disabled}" type="button" ${ref("control")}>${x => x.displayValue}</button>`;
+const dropdownIndicatorTemplate = html`<svg class="chevron-down-20-regular" aria-hidden="true" slot="indicator" viewBox="0 0 20 20" ${ref("indicator")}><path d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0" fill="currentColor" /></svg>`;
+const dropdownInputTemplate = html`<input @input="${(x, c) => x.inputHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-labelledby="${x => x.ariaLabelledBy}" aria-expanded="${x => x.open}" aria-haspopup="listbox" placeholder="${x => x.placeholder}" role="combobox" ?disabled="${x => x.disabled}" type="${x => x.type}" value="${x => x.valueAttribute}" slot="control" ${ref("control")} />`;
+const dropdownButtonTemplate = html`<button aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-expanded="${x => x.open}" aria-haspopup="listbox" role="combobox" ?disabled="${x => x.disabled}" type="button" slot="control" ${ref("control")}>${x => x.displayValue}</button>`;
 function dropdownTemplate(options = {}) {
-  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><div class="control"><slot name="control" ${ref("controlSlot")}></slot><slot name="indicator" ${ref("indicatorSlot")}>${staticallyCompose(options.indicator)}</slot></div><slot ${ref("listboxSlot")}></slot></template>`;
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><div class="control"><slot name="control" ${ref("controlSlot")}></slot><slot name="indicator" ${ref("indicatorSlot")}>${staticallyCompose(options.indicator)}</slot></div><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
 }
 const template$t = dropdownTemplate({
   indicator: dropdownIndicatorTemplate
@@ -7102,6 +7206,31 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     this.required = false;
     this.type = DropdownType.dropdown;
     this.valueAttribute = "";
+    /**
+     * Repositions the listbox to align with the control element. Used when the browser does not support CSS anchor
+     * positioning.
+     *
+     * @internal
+     */
+    this.repositionListbox = () => {
+      if (this.frameId) {
+        cancelAnimationFrame(this.frameId);
+      }
+      this.frameId = requestAnimationFrame(() => {
+        const controlRect = this.getBoundingClientRect();
+        const right = window.innerWidth - controlRect.right;
+        const left = controlRect.left;
+        this.listbox.style.minWidth = `${controlRect.width}px`;
+        this.listbox.style.top = `${controlRect.top}px`;
+        if (left + controlRect.width > window.innerWidth || getDirection(this) === "rtl" && right - controlRect.width > 0) {
+          this.listbox.style.right = `${right}px`;
+          this.listbox.style.left = "unset";
+        } else {
+          this.listbox.style.left = `${left}px`;
+          this.listbox.style.right = "unset";
+        }
+      });
+    };
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -7109,7 +7238,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "presentation";
-    this.addEventListener("connected", this.listboxConnectedHandler);
     Updates.enqueue(() => {
       this.insertControl();
     });
@@ -7152,7 +7280,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
   controlChanged(prev, next) {
     if (next) {
       next.id = next.id || uniqueId("input-");
-      this.controlSlot?.assign(next);
     }
   }
   /**
@@ -7201,7 +7328,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     if (next) {
       next.dropdown = this;
       next.popover = "manual";
-      this.listboxSlot.assign(next);
+      next.tabIndex = -1;
       const notifier = Observable.getNotifier(this);
       notifier.subscribe(next);
       for (const key of ["disabled", "multiple"]) {
@@ -7213,6 +7340,11 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
         });
         this.setValidity();
       });
+      if (AnchorPositioningCSSSupported) {
+        const anchorName = uniqueId("--dropdown-anchor-");
+        this.style.setProperty("anchor-name", anchorName);
+        this.listbox.style.setProperty("position-anchor", anchorName);
+      }
     }
   }
   /**
@@ -7252,11 +7384,9 @@ const _BaseDropdown = 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;
+    if (!AnchorPositioningCSSSupported) {
+      this.anchorPositionFallback(next);
     }
-    _BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
   }
   /**
    * Changes the slotted control element based on the dropdown type.
@@ -7277,25 +7407,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
   get enabledOptions() {
     return this.listbox?.enabledOptions ?? [];
   }
-  /**
-   * Resets the form value to its initial value when the form is reset.
-   *
-   * @internal
-   */
-  formResetCallback() {
-    this.enabledOptions.forEach((x, i) => {
-      if (this.multiple) {
-        x.selected = !!x.defaultSelected;
-        return;
-      }
-      if (!x.defaultSelected) {
-        x.selected = false;
-        return;
-      }
-      this.selectOption(i);
-    });
-    this.setValidity();
-  }
   /**
    * A reference to the first freeform option, if present.
    *
@@ -7445,7 +7556,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     }
     const target = e.target;
     this.focus();
-    if (target === this.control && !this.isCombobox) {
+    if ((target === this.control || e.composedPath().includes(this.indicator)) && !this.isCombobox) {
       this.listbox.togglePopover();
       return true;
     }
@@ -7511,6 +7622,25 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     }
     return true;
   }
+  /**
+   * Resets the form value to its initial value when the form is reset.
+   *
+   * @internal
+   */
+  formResetCallback() {
+    this.enabledOptions.forEach((x, i) => {
+      if (this.multiple) {
+        x.selected = !!x.defaultSelected;
+        return;
+      }
+      if (!x.defaultSelected) {
+        x.selected = false;
+        return;
+      }
+      this.selectOption(i);
+    });
+    this.setValidity();
+  }
   /**
    * Ensures the active index is within bounds of the enabled options. Out-of-bounds indices are wrapped to the opposite
    * end of the range.
@@ -7683,6 +7813,22 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       }, message ?? this.validationMessage, anchor ?? this.control);
     }
   }
+  /**
+   * Handles the `slotchange` event for the dropdown.
+   * Sets the `listbox` property when a valid listbox is assigned to the default slot.
+   *
+   * @param e - the slot change event
+   * @internal
+   */
+  slotchangeHandler(e) {
+    const target = e.target;
+    waitForConnectedDescendants(this, () => {
+      const listbox = target.assignedElements().find(el => isListbox(el));
+      if (listbox) {
+        this.listbox = listbox;
+      }
+    });
+  }
   /**
    * Updates the freeform option with the provided value.
    *
@@ -7702,52 +7848,60 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     this.freeformOption.value = value;
     this.freeformOption.hidden = false;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.anchorPositionFallback();
-  }
   disconnectedCallback() {
-    _BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
+    _BaseDropdown.AnchorPositionFallbackObserver?.disconnect();
+    this.debounceController?.abort();
     super.disconnectedCallback();
   }
-  /**
-   * Handles the connected event for the listbox.
-   *
-   * @param e - the event object
-   * @internal
-   */
-  listboxConnectedHandler(e) {
-    const target = e.target;
-    if (isListbox(target)) {
-      this.listbox = target;
-    }
-  }
   /**
    * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
    * viewport bounds. One static observer is used for all dropdowns.
    *
    * @internal
    */
-  anchorPositionFallback() {
-    _BaseDropdown.AnchorPositionFallbackObserver = _BaseDropdown.AnchorPositionFallbackObserver ?? new IntersectionObserver(entries => {
-      entries.forEach(({
-        boundingClientRect,
-        isIntersecting,
-        target
-      }) => {
-        if (isListbox(target) && !isIntersecting) {
-          if (boundingClientRect.bottom > window.innerHeight) {
-            toggleState(target.dropdown.elementInternals, "flip-block", true);
-            return;
-          }
-          if (boundingClientRect.top < 0) {
-            toggleState(target.dropdown.elementInternals, "flip-block", false);
+  anchorPositionFallback(shouldObserve) {
+    if (!_BaseDropdown.AnchorPositionFallbackObserver) {
+      _BaseDropdown.AnchorPositionFallbackObserver = new IntersectionObserver(entries => {
+        entries.forEach(({
+          boundingClientRect,
+          isIntersecting,
+          target
+        }) => {
+          if (isListbox(target)) {
+            if (boundingClientRect.bottom > window.innerHeight) {
+              toggleState(target.elementInternals, "flip-block", true);
+              return;
+            }
+            if (boundingClientRect.top < 0) {
+              toggleState(target.elementInternals, "flip-block", false);
+            }
           }
-        }
+        });
+      }, {
+        threshold: 1
       });
-    }, {
-      threshold: 1
-    });
+    }
+    if (shouldObserve) {
+      this.debounceController = new AbortController();
+      _BaseDropdown.AnchorPositionFallbackObserver.observe(this.listbox);
+      window.addEventListener("scroll", this.repositionListbox, {
+        passive: true,
+        capture: true,
+        signal: this.debounceController.signal
+      });
+      window.addEventListener("resize", this.repositionListbox, {
+        passive: true,
+        signal: this.debounceController.signal
+      });
+      this.repositionListbox();
+      return;
+    }
+    _BaseDropdown.AnchorPositionFallbackObserver.unobserve(this.listbox);
+    this.debounceController?.abort();
+    if (this.frameId) {
+      cancelAnimationFrame(this.frameId);
+      this.frameId = void 0;
+    }
   }
 };
 /**
@@ -7778,7 +7932,6 @@ __decorateClass$z([attr({
   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);
@@ -7814,15 +7967,12 @@ __decorateClass$y([attr], Dropdown.prototype, "size", 2);
 const styles$s = css`
   ${display("inline-flex")}
 
-  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]){inset:unset;position:absolute;position-anchor:--dropdown-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,block-start;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);overflow:auto}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){::slotted([popover]){margin-block-start:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin});max-height:50vh}:host([size='small']) ::slotted([popover]){margin-block-start:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']) ::slotted([popover]){margin-block-start:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}:host(${flipBlockState}) ::slotted([popover]){margin-block-start:revert;transform:translate(0,-100%)}}`;
+  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){color:GrayText}`;
 
 const definition$t = Dropdown.compose({
   name: `${FluentDesignSystem.prefix}-dropdown`,
   template: template$t,
-  styles: styles$s,
-  shadowOptions: {
-    slotAssignment: "manual"
-  }
+  styles: styles$s
 });
 
 definition$t.define(FluentDesignSystem.registry);
@@ -7887,15 +8037,6 @@ class BaseField extends FASTElement {
    */
   messageSlotChanged(prev, next) {
     toggleState(this.elementInternals, "has-message", !!next.length);
-    if (!next.length) {
-      this.removeEventListener("invalid", this.invalidHandler, {
-        capture: true
-      });
-      return;
-    }
-    this.addEventListener("invalid", this.invalidHandler, {
-      capture: true
-    });
   }
   /**
    * Sets the `input` property to the first slotted input.
@@ -7905,9 +8046,9 @@ class BaseField extends FASTElement {
    * @internal
    */
   slottedInputsChanged(prev, next) {
-    if (next?.length) {
-      this.input = next?.[0];
-      this.setStates();
+    const filtered = next?.filter(node => node.nodeType === Node.ELEMENT_NODE) ?? [];
+    if (filtered?.length) {
+      this.input = filtered?.[0];
     }
   }
   /**
@@ -7920,6 +8061,11 @@ class BaseField extends FASTElement {
     if (next) {
       this.setStates();
       this.setLabelProperties();
+      this.slottedInputObserver.observe(this.input, {
+        attributes: true,
+        attributeFilter: ["disabled", "required", "readonly"],
+        subtree: true
+      });
     }
   }
   /**
@@ -7945,6 +8091,22 @@ class BaseField extends FASTElement {
     }
     return true;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("invalid", this.invalidHandler, {
+      capture: true
+    });
+    this.slottedInputObserver = new MutationObserver(() => {
+      this.setStates();
+    });
+  }
+  disconnectedCallback() {
+    this.slottedInputObserver.disconnect();
+    this.removeEventListener("invalid", this.invalidHandler, {
+      capture: true
+    });
+    super.disconnectedCallback();
+  }
   /**
    * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
    *
@@ -7991,7 +8153,6 @@ class BaseField extends FASTElement {
         if (label instanceof HTMLLabelElement) {
           label.htmlFor = label.htmlFor || this.input.id;
           label.id = label.id || `${this.input.id}--label`;
-          label.setAttribute("aria-hidden", "true");
           this.input.setAttribute("aria-labelledby", label.id);
         }
       });
@@ -8011,7 +8172,7 @@ class BaseField extends FASTElement {
     }
   }
   setValidationStates() {
-    if (!this.input.validity) {
+    if (!this.input?.validity) {
       return;
     }
     for (const [flag, value] of Object.entries(ValidationFlags)) {
@@ -8045,16 +8206,9 @@ __decorateClass$w([attr({
 const styles$r = css`
   ${display("inline-grid")}
 
-  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host([label-position='below']:not(${hasMessageState})){grid-template-areas:'input' 'label'}::slotted([slot='label'])::after{content:'';display:block;position:absolute;inset:0}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
+  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*' / '';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
-const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
-  property: "slottedInputs",
-  attributes: true,
-  attributeFilter: ["disabled", "required", "readonly"],
-  subtree: true,
-  selector: '[slot="input"]',
-  filter: elements()
-})}><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input"></slot><slot name="message" part="message" ${slotted({
+const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}"><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input" ${slotted("slottedInputs")}></slot><slot name="message" part="message" ${slotted({
   property: "messageSlot",
   filter: elements("[flag]")
 })}></slot></template>`;
@@ -8134,7 +8288,7 @@ const styles$p = css`
   :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
 
 function labelTemplate() {
-  return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
+  return html`<slot></slot><span part="asterisk" class="asterisk" aria-hidden="true" ?hidden="${x => !x.required}">*</span>`;
 }
 const template$q = labelTemplate();
 
@@ -8283,10 +8437,6 @@ class Listbox extends FASTElement {
     }
     return true;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.$emit("connected");
-  }
   /**
    * Handles observable subscriptions for the listbox.
    *
@@ -8326,6 +8476,20 @@ class Listbox extends FASTElement {
     }
     this.selectedIndex = selectedIndex;
   }
+  /**
+   * Handles the `slotchange` event for the default slot.
+   * Sets the `options` property to the list of slotted options.
+   *
+   * @param e - The slotchange event
+   * @public
+   */
+  slotchangeHandler(e) {
+    const target = e.target;
+    waitForConnectedDescendants(this, () => {
+      const options = target.assignedElements().filter(option => isDropdownOption(option));
+      this.options = options;
+    });
+  }
 }
 __decorateClass$s([attr({
   attribute: "id",
@@ -8339,13 +8503,10 @@ __decorateClass$s([observable], Listbox.prototype, "dropdown", 2);
 const styles$n = css`
   ${display("inline-flex")}
 
-  :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}`;
+  :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:absolute;margin-block-start:0;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);position-anchor:--dropdown;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,--flip-block,block-start}@position-try --flip-block{bottom:anchor(top);top:unset}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-height:var(--listbox-max-height,50vh);position:fixed}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
 
 function listboxTemplate() {
-  return html`<template id="${x => x.id}" @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><slot ${slotted({
-    property: "options",
-    filter: node => isDropdownOption(node)
-  })}></slot></template>`;
+  return html`<template id="${x => x.id}" @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
 }
 const template$o = listboxTemplate();
 
@@ -8360,7 +8521,7 @@ definition$o.define(FluentDesignSystem.registry);
 class MenuButton extends Button {}
 
 const template$n = buttonTemplate$1({
-  end: html.partial( /* html */
+  end: html.partial(/* html */
   `
     <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path>
@@ -8395,6 +8556,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
+function isMenuItem(element, tagName = "-menu-item") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName);
+}
 
 var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
@@ -8607,7 +8774,7 @@ applyMixins(MenuItem, StartEnd);
 const styles$m = css`
   ${display("grid")}
 
-  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline,block-start,block-end;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${disabledState}),:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:GrayText}`));
 
 const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
@@ -8718,7 +8885,7 @@ const _MenuList = class _MenuList extends FASTElement {
      * check if the item is a menu item
      */
     this.isMenuItemElement = el => {
-      return el instanceof MenuItem || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
+      return isMenuItem(el) || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
     };
     /**
      * check if the item is focusable
@@ -8818,9 +8985,7 @@ const _MenuList = class _MenuList extends FASTElement {
       return Math.max(accum, elementValue);
     }, 0);
     filteredMenuListItems?.forEach(item => {
-      if (item instanceof MenuItem) {
-        item.setAttribute("data-indent", `${indent}`);
-      }
+      item.dataset.indent = `${indent}`;
     });
   }
   /**
@@ -8931,10 +9096,12 @@ class Menu extends FASTElement {
      */
     this.toggleHandler = e => {
       if (e.type === "toggle" && e.newState) {
-        const newState = e.newState === "open" ? true : false;
+        const newState = e.newState === "open";
         this._trigger?.setAttribute("aria-expanded", `${newState}`);
         this._open = newState;
-        this.focusMenuList();
+        if (this._open) {
+          this.focusMenuList();
+        }
       }
     };
     /**
@@ -8977,7 +9144,9 @@ class Menu extends FASTElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    Updates.enqueue(() => this.setComponent());
+    queueMicrotask(() => {
+      this.setComponent();
+    });
   }
   /**
    * Called when the element is disconnected from the DOM.
@@ -9332,6 +9501,7 @@ class DropdownOption extends FASTElement {
   disabledChanged(prev, next) {
     this.elementInternals.ariaDisabled = this.disabled ? "true" : "false";
     toggleState(this.elementInternals, "disabled", this.disabled);
+    this.setFormValue(!this.disabled && this.selected ? this.value : null);
   }
   /**
    * Sets the disabled state when the `disabled` attribute changes.
@@ -9510,10 +9680,10 @@ const styles$i = css`
   ${display("inline-grid")}
 
   :host{-webkit-tap-highlight-color:transparent;${typographyBody1Styles}
-    align-items:center;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThick} solid ${colorTransparentStroke};box-sizing:border-box;color:${colorNeutralForeground2};column-gap:${spacingHorizontalXS};cursor:pointer;grid-template-areas:'indicator start content';grid-template-columns:auto auto 1fr;min-height:32px;padding:${spacingHorizontalSNudge}}.content{grid-area:content;line-height:1}::slotted([slot='start']){grid-area:start}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Pressed};color:${colorNeutralForeground2Pressed}}:host(:disabled){background-color:${colorNeutralBackground1};color:${colorNeutralForegroundDisabled};cursor:default}.checkmark-16-filled{fill:currentColor;width:16px}slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator']){aspect-ratio:1;flex:0 0 auto;grid-area:indicator;visibility:hidden}:host(${selectedState}) :is(slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator'])){visibility:visible}:host(${multipleState}) .checkmark-16-filled,:host(:not(${multipleState})) .checkmark-12-regular{display:none}:host(${multipleState}) .checkmark-12-regular{background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;fill:transparent;position:relative;visibility:visible;width:16px}:host(${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorCompoundBrandBackground};border-color:${colorCompoundBrandStroke};fill:${colorNeutralForegroundInverted}}:host(:disabled${multipleState}) .checkmark-12-regular{border-color:${colorNeutralStrokeDisabled}}:host(:disabled${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorNeutralBackgroundDisabled}}:host(${activeState}){border:${strokeWidthThick} solid ${colorStrokeFocus2}}@supports (selector(:host(:has(*)))){:host(:has([slot='start']:not([size='16']))){column-gap:${spacingHorizontalSNudge}}}:host(${descriptionState}){column-gap:${spacingHorizontalSNudge};grid-template-areas:'indicator start content'
-      'indicator start description'}::slotted([slot='description']){color:${colorNeutralForeground3};grid-area:description;${typographyCaption1Styles}}`;
+    align-items:center;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};box-sizing:border-box;color:${colorNeutralForeground2};column-gap:${spacingHorizontalXS};cursor:pointer;grid-template-areas:'indicator start content';grid-template-columns:auto auto 1fr;min-height:32px;padding:${spacingHorizontalSNudge};text-align:start}.content{grid-area:content;line-height:1}::slotted([slot='start']){grid-area:start}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Pressed};color:${colorNeutralForeground2Pressed}}:host(:disabled){background-color:${colorNeutralBackground1};color:${colorNeutralForegroundDisabled};cursor:default}.checkmark-16-filled{fill:currentColor;width:16px}slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator']){aspect-ratio:1;flex:0 0 auto;grid-area:indicator;visibility:hidden}:host(${selectedState}) :is(slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator'])){visibility:visible}:host(${multipleState}) .checkmark-16-filled,:host(:not(${multipleState})) .checkmark-12-regular{display:none}:host(${multipleState}) .checkmark-12-regular{background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;fill:transparent;position:relative;visibility:visible;width:16px}:host(${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorCompoundBrandBackground};border-color:${colorCompoundBrandStroke};fill:${colorNeutralForegroundInverted}}:host(:disabled${multipleState}) .checkmark-12-regular{border-color:${colorNeutralStrokeDisabled}}:host(:disabled${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorNeutralBackgroundDisabled}}:host(${activeState}){border:${strokeWidthThick} solid ${colorStrokeFocus2}}@supports (selector(:host(:has(*)))){:host(:has([slot='start']:not([size='16']))){column-gap:${spacingHorizontalSNudge}}}:host(${descriptionState}){column-gap:${spacingHorizontalSNudge};grid-template-areas:'indicator start content'
+      'indicator start description'}::slotted([slot='description']){color:${colorNeutralForeground3};grid-area:description;${typographyCaption1Styles}}@media (forced-colors:active){:host(:disabled){color:GrayText}}`;
 
-const checkedIndicator$1 = html.partial( /* html */
+const checkedIndicator$1 = html.partial(/* html */
 `
   <svg aria-hidden="true" class="checkmark-16-filled" viewBox="0 0 16 16">
     <path
@@ -9585,6 +9755,7 @@ class BaseProgressBar extends FASTElement {
    */
   valueChanged(prev, next) {
     this.elementInternals.ariaValueNow = typeof next === "number" ? `${next}` : null;
+    this.setIndicatorWidth();
   }
   /**
    * Updates the percent complete when the `min` property changes.
@@ -9594,6 +9765,7 @@ class BaseProgressBar extends FASTElement {
    */
   minChanged(prev, next) {
     this.elementInternals.ariaValueMin = typeof next === "number" ? `${next}` : null;
+    this.setIndicatorWidth();
   }
   /**
    * Updates the percent complete when the `max` property changes.
@@ -9604,15 +9776,29 @@ class BaseProgressBar extends FASTElement {
    */
   maxChanged(prev, next) {
     this.elementInternals.ariaValueMax = typeof next === "number" ? `${next}` : null;
+    this.setIndicatorWidth();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setIndicatorWidth();
   }
-  get percentComplete() {
+  setIndicatorWidth() {
+    if (!this.$fastController.isConnected || CSS.supports("width: attr(value type(<number>))")) {
+      return;
+    }
+    if (typeof this.value !== "number") {
+      this.indicator.style.removeProperty("width");
+      return;
+    }
     const min = this.min ?? 0;
     const max = this.max ?? 100;
     const value = this.value ?? 0;
     const range = max - min;
-    return range === 0 ? 0 : Math.fround((value - min) / range * 100);
+    const width = range === 0 ? 0 : Math.fround((value - min) / range * 100);
+    this.indicator.style.setProperty("width", `${width}%`);
   }
 }
+__decorateClass$m([observable], BaseProgressBar.prototype, "indicator", 2);
 __decorateClass$m([attr({
   attribute: "validation-state"
 })], BaseProgressBar.prototype, "validationState", 2);
@@ -9625,7 +9811,6 @@ __decorateClass$m([attr({
 __decorateClass$m([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "max", 2);
-__decorateClass$m([volatile], BaseProgressBar.prototype, "percentComplete", 1);
 
 var __defProp$l = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
@@ -9642,13 +9827,13 @@ __decorateClass$l([attr], ProgressBar.prototype, "shape", 2);
 const styles$h = css`
   ${display("block")}
 
-  :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
+  :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content;@supports (width:attr(value type(<number>))){--max:attr(max type(<number>),100);--min:attr(min type(<number>),0);--value:attr(value type(<number>),0);--indicator-width:clamp(0%,calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%),100%)}}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out;@supports (width:attr(value type(<number>))){width:var(--indicator-width)}}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
       to right,${colorNeutralBackground6} 0%,${colorTransparentBackground} 50%,${colorNeutralBackground6} 100%
     );animation-name:indeterminate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}:host([validation-state='error']) .indicator{background-color:${colorPaletteRedBackground3}}:host([validation-state='warning']) .indicator{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='success']) .indicator{background-color:${colorPaletteGreenBackground3}}@layer animations{@media (prefers-reduced-motion:no-preference){:host([value]){transition:none}:host(:not([value])) .indicator{animation-duration:0.01ms;animation-iteration-count:1}}}@keyframes indeterminate{0%{inset-inline-start:-33%}100%{inset-inline-start:100%}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{background-color:CanvasText}.indicator,:host(:is([validation-state='success'],[validation-state='warning'],[validation-state='error'])) .indicator{background-color:Highlight}`));
 
 function progressTemplate() {
-  return html`<div class="indicator" part="indicator" style="${x => typeof x.value === "number" ? `width: ${x.percentComplete}%` : void 0}"></div>`;
+  return html`<div class="indicator" part="indicator" ${ref("indicator")}></div>`;
 }
 const template$h = progressTemplate();
 
@@ -9661,10 +9846,6 @@ const definition$h = ProgressBar.compose({
 definition$h.define(FluentDesignSystem.registry);
 
 class Radio extends BaseCheckbox {
-  connectedCallback() {
-    super.connectedCallback();
-    this.tabIndex = this.disabled ? -1 : 0;
-  }
   constructor() {
     super();
     this.elementInternals.role = "radio";
@@ -9679,9 +9860,6 @@ class Radio extends BaseCheckbox {
    */
   disabledChanged(prev, next) {
     super.disabledChanged(prev, next);
-    if (next) {
-      this.tabIndex = -1;
-    }
     this.$emit("disabled", next, {
       bubbles: true
     });
@@ -9792,7 +9970,7 @@ class RadioGroup extends FASTElement {
     if (this.$fastController.isConnected) {
       this.checkedIndex = -1;
       this.radios?.forEach(radio => {
-        radio.disabled = radio.disabledAttribute || this.disabled;
+        radio.disabled = !!radio.disabledAttribute || !!this.disabled;
       });
       this.restrictFocus();
     }
@@ -9852,12 +10030,20 @@ class RadioGroup extends FASTElement {
         radio.checked = index === checkedIndex;
       }
       radio.name = this.name ?? radio.name;
-      radio.disabled = this.disabled || radio.disabledAttribute;
+      radio.disabled = !!this.disabled || !!radio.disabledAttribute;
     });
     if (!this.dirtyState && this.initialValue) {
       this.value = this.initialValue;
     }
-    if (!this.value) {
+    if (!this.value ||
+    // This logic covers the case when the RadioGroup doesn't have a `value`
+    // attribute, but does have a checked child Radio. Without this condition,
+    // the checked Radio's value will be assigned to `this.value`, and
+    // `checkedIndex` will be the checked Radio's index, but `this.checkedIndex`
+    // will remain `undefined`, which would cause the RadioGroup to add
+    // `tabindex=-1` to the checked Radio, and effectively makes the whole
+    // RadioGroup unfocusable.
+    this.value && typeof this.checkedIndex !== "number" && checkedIndex >= 0) {
       this.checkedIndex = checkedIndex;
     }
     const radioIds = next.map(radio => radio.id).join(" ").trim();
@@ -10145,17 +10331,43 @@ class RadioGroup extends FASTElement {
    * @param anchor - Optional anchor to use for the validation message.
    *
    * @internal
+   * @remarks
+   * RadioGroup validation is reported through the individual Radio elements rather than the RadioGroup itself.
+   * This is necessary because:
+   * 1. Each Radio is form-associated (extends BaseCheckbox which has `formAssociated = true`)
+   * 2. Browser validation UIs and screen readers announce validation against individual form controls
+   * 3. For groups like RadioGroup, the browser needs to report the error on a specific member of the group
+   * 4. We anchor the error to the first Radio so it receives focus and announcement
+   *
+   * When the group is invalid (required but no selection):
+   * - Only the first Radio gets the invalid state with the validation message
+   * - Other Radios are kept valid since selecting any of them would satisfy the requirement
+   *
+   * When the group becomes valid (user selects any Radio):
+   * - All Radios are cleared back to valid state
+   * - This allows form submission to proceed
    */
   setValidity(flags, message, anchor) {
     if (this.$fastController.isConnected) {
-      if (this.disabled || !this.required) {
-        this.elementInternals.setValidity({});
+      const isInvalid = this.required && !this.value && !this.disabled;
+      if (!isInvalid) {
+        this.enabledRadios?.forEach(radio => {
+          radio.elementInternals.setValidity({});
+        });
         return;
       }
-      this.elementInternals.setValidity({
-        valueMissing: this.required && !this.value,
+      const validationFlags = {
+        valueMissing: true,
         ...flags
-      }, message ?? this.validationMessage, anchor ?? this.enabledRadios[0]);
+      };
+      const validationMessage = message ?? this.validationMessage;
+      this.enabledRadios?.forEach((radio, index) => {
+        if (index === 0) {
+          radio.elementInternals.setValidity(validationFlags, validationMessage, radio);
+        } else {
+          radio.elementInternals.setValidity({});
+        }
+      });
     }
   }
   /**
@@ -10196,7 +10408,7 @@ __decorateClass$k([attr({
 const styles$g = css`
   ${display("flex")}
 
-  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
+  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}:host([slot='input']){margin:${spacingVerticalS} ${spacingHorizontalS}}`;
 
 function radioGroupTemplate() {
   return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
@@ -10217,7 +10429,7 @@ const styles$f = css`
   :host{--size:16px;aspect-ratio:1;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};box-sizing:border-box;position:relative;width:var(--size)}:host([size='large']){--size:20px}.checked-indicator{aspect-ratio:1;border-radius:${borderRadiusCircular};color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute;width:calc(var(--size) * 0.625)}:host(:not([slot='input']))::after{content:'' / '';position:absolute;display:block;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(${checkedState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}) .checked-indicator{background-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover) .checked-indicator{background-color:${colorCompoundBrandBackgroundHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:active) .checked-indicator{background-color:${colorCompoundBrandBackgroundPressed}}:host(:focus-visible){outline:none}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host(${checkedState}${disabledState}) .checked-indicator{background-color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not(${disabledState}):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.checked-indicator{color:HighlightText}:host(${checkedState}) .checked-indicator{background-color:FieldText}:host(${checkedState}:not(${disabledState}):hover) .checked-indicator{background-color:Highlight}:host(${disabledState}){border-color:GrayText;color:GrayText}:host(${disabledState}${checkedState}) .checked-indicator{background-color:GrayText}`));
 
-const checkedIndicator = html.partial( /* html */
+const checkedIndicator = html.partial(/* html */
 `
     <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
 `);
@@ -10244,6 +10456,19 @@ var __decorateClass$j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$j(target, key, result);
   return result;
 };
+const SUPPORTS_ATTR_TYPE = CSS.supports("width: attr(value type(<number>))");
+const CUSTOM_PROPERTY_NAME = {
+  max: "--_attr-max",
+  value: "--_attr-value",
+  maskImageFilled: "--_mask-image-filled",
+  maskImageOutlined: "--_mask-image-outlined"
+};
+function svgToDataURI(svg) {
+  if (!svg) {
+    return "";
+  }
+  return ["data:image/svg+xml", encodeURIComponent(svg.replace(/\n/g, "").replace(/\s+/g, " "))].join(",");
+}
 class BaseRatingDisplay extends FASTElement {
   constructor() {
     super();
@@ -10253,16 +10478,20 @@ class BaseRatingDisplay extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.intlNumberFormatter = new Intl.NumberFormat();
+    this.defaultCustomIconViewBox = "0 0 20 20";
     this.elementInternals.role = "img";
+    this.numberFormatter = new Intl.NumberFormat();
   }
-  /**
-   * @internal
-   */
-  slottedIconChanged() {
-    if (this.$fastController.isConnected) {
-      this.customIcon = this.slottedIcon[0]?.outerHTML;
-    }
+  maxChanged() {
+    this.setCustomPropertyValue("max");
+  }
+  valueChanged() {
+    this.setCustomPropertyValue("value");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setCustomPropertyValue("value");
+    this.setCustomPropertyValue("max");
   }
   /**
    * Returns "count" as string, formatted according to the locale.
@@ -10270,41 +10499,47 @@ class BaseRatingDisplay extends FASTElement {
    * @internal
    */
   get formattedCount() {
-    return this.count ? this.intlNumberFormatter.format(this.count) : "";
-  }
-  /**
-   * Gets the selected value
-   *
-   * @protected
-   */
-  getSelectedValue() {
-    return Math.round((this.value ?? 0) * 2) / 2;
-  }
-  /**
-   * Gets the maximum icons to render
-   *
-   * @protected
-   */
-  getMaxIcons() {
-    return (this.max ?? 5) * 2;
+    return this.count ? this.numberFormatter.format(this.count) : "";
   }
-  /**
-   * Generates the icon SVG elements based on the "max" attribute.
-   *
-   * @internal
-   */
-  generateIcons() {
-    let htmlString = "";
-    let customIcon;
-    if (this.customIcon) {
-      customIcon = /<svg[^>]*>([\s\S]*?)<\/svg>/.exec(this.customIcon)?.[1] ?? "";
+  /** @internal */
+  handleSlotChange() {
+    const icon = this.iconSlot.assignedElements()?.find(el => el.nodeName.toLowerCase() === "svg");
+    this.renderSlottedIcon(icon ?? null);
+  }
+  renderSlottedIcon(svg) {
+    if (!svg) {
+      this.display.style.removeProperty(CUSTOM_PROPERTY_NAME.maskImageFilled);
+      this.display.style.removeProperty(CUSTOM_PROPERTY_NAME.maskImageOutlined);
+      return;
+    }
+    const innerSvg = svg.innerHTML;
+    const viewBox = svg.getAttribute("viewBox") ?? this.iconViewBox ?? this.defaultCustomIconViewBox;
+    const customSvgFilled = `
+            <svg
+                viewBox="${viewBox}"
+                xmlns="http://www.w3.org/2000/svg"
+            >${innerSvg}</svg>`;
+    const customSvgOutlined = `
+            <svg
+                viewBox="${viewBox}"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                stroke="black"
+                stroke-width="2"
+            >${innerSvg}</svg>`;
+    this.display.style.setProperty(CUSTOM_PROPERTY_NAME.maskImageFilled, `url(${svgToDataURI(customSvgFilled)})`);
+    this.display.style.setProperty(CUSTOM_PROPERTY_NAME.maskImageOutlined, `url(${svgToDataURI(customSvgOutlined)})`);
+  }
+  setCustomPropertyValue(propertyName) {
+    if (!this.display || SUPPORTS_ATTR_TYPE) {
+      return;
     }
-    const selectedValue = this.getSelectedValue();
-    for (let i = 0; i < this.getMaxIcons(); i++) {
-      const iconValue = (i + 1) / 2;
-      htmlString += `<svg aria-hidden="true" viewBox="${this.iconViewBox ?? "0 0 20 20"}" ${iconValue === selectedValue ? "selected" : ""}>${customIcon ?? '<use href="#star"></use>'}</svg>`;
+    const propertyValue = this[propertyName];
+    if (typeof propertyValue !== "number" || Number.isNaN(propertyValue)) {
+      this.display.style.removeProperty(CUSTOM_PROPERTY_NAME[propertyName]);
+    } else {
+      this.display.style.setProperty(CUSTOM_PROPERTY_NAME[propertyName], `${propertyValue}`);
     }
-    return htmlString;
   }
 }
 __decorateClass$j([attr({
@@ -10319,8 +10554,6 @@ __decorateClass$j([attr({
 __decorateClass$j([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "value", 2);
-__decorateClass$j([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
-__decorateClass$j([observable], BaseRatingDisplay.prototype, "customIcon", 2);
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
@@ -10335,22 +10568,6 @@ class RatingDisplay extends BaseRatingDisplay {
     super(...arguments);
     this.compact = false;
   }
-  /**
-   * Overrides the selected value and returns 1 if compact is true.
-   *
-   * @override
-   */
-  getSelectedValue() {
-    return Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
-  }
-  /**
-   * Overrides the maximum icons and returns a max of 1 if compact is true.
-   *
-   * @override
-   */
-  getMaxIcons() {
-    return (this.compact ? 1 : this.max ?? 5) * 2;
-  }
 }
 __decorateClass$i([attr], RatingDisplay.prototype, "color", 2);
 __decorateClass$i([attr], RatingDisplay.prototype, "size", 2);
@@ -10358,21 +10575,30 @@ __decorateClass$i([attr({
   mode: "boolean"
 })], RatingDisplay.prototype, "compact", 2);
 
-const styles$e = css`
-  ${display("inline-flex")}
-
-  :host{--icon-size:16px;--icon-color-filled:${colorPaletteMarigoldBackground3};--icon-color-empty:${colorPaletteMarigoldBackground2};align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host([size='small']){--icon-size:12px}:host([size='large']){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color-filled);margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(odd){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host([color='neutral']) svg{--icon-color-filled:${colorNeutralForeground1}}:host([color='brand']) svg{--icon-color-filled:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:var(--icon-color-empty)}:host([color='neutral']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='neutral']) svg[selected] ~ svg{--icon-color-empty:${colorNeutralBackground1Pressed}}:host([color='brand']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='brand']) svg[selected] ~ svg{--icon-color-empty:${colorBrandStroke2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([color]) svg{fill:CanvasText}:host([color]:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,:host([color]) svg[selected] ~ svg{fill:Canvas;stroke:CanvasText}`));
-
-const star = html`<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="star"><path d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z" /></symbol></svg>`;
+const defaultIconPath = `<path d="M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z" />`;
+const defaultIconFilled = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">${defaultIconPath}</svg>
+`;
+const defaultIconOutlined = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"
+    fill="none" stroke="black" stroke-width="2"
+>${defaultIconPath}</svg>
+`;
 function ratingDisplayTemplate() {
-  return html` ${x => html`${staticallyCompose(x.generateIcons())}`}<slot name="icon" ${slotted({
-    property: "slottedIcon",
-    filter: elements("svg")
-  })}>${star}</slot><slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
+  return html`<div ${ref("display")} class="display" aria-hidden="true"></div><slot name="icon" ${ref("iconSlot")} @slotchange="${x => x.handleSlotChange()}"></slot><slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
 }
 const template$e = ratingDisplayTemplate();
 
+const styles$e = css`
+  ${display("inline-flex")}
+
+  :host{--_icon-size:16px;--_icon-gradient-degree:90deg;--_icon-color-value:${colorPaletteMarigoldBorderActive};--_icon-color-empty:${colorPaletteMarigoldBackground2};--_default-value:0;--_default-max:5;--_mask-image-filled:url(${svgToDataURI(defaultIconFilled)});--_mask-image-outlined:url(${svgToDataURI(defaultIconOutlined)});--_mask-position-x:left;align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(:dir(rtl)){--_icon-gradient-degree:-90deg;--_mask-position-x:right}:host([size='small']){--_icon-size:12px}:host([size='large']){--_icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}:host([color='neutral']){--_icon-color-value:${colorNeutralForeground1};--_icon-color-empty:${colorNeutralBackground6}}:host([color='brand']){--_icon-color-value:${colorBrandForeground1};--_icon-color-empty:${colorBrandBackground2}}@supports (width:attr(value type(<number>))){:host{--_attr-value:attr(value type(<number>));--_attr-max:attr(max type(<number>))}}:host([compact]) .display{--_max:1}.display{--_value:max(0,round(var(--_attr-value,var(--_default-value)) * 2) / 2);--_max:max(1,var(--_attr-max,var(--_default-max)));--_mask-inline-size:calc(var(--_icon-size) + ${spacingHorizontalXXS});--_icon-gradient-stop-visual-adjustment:0px;--_icon-gradient-stop:calc(
+      var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
+    );background-image:linear-gradient(
+      var(--_icon-gradient-degree),var(--_icon-color-value) var(--_icon-gradient-stop),var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
+    );block-size:var(--_icon-size);display:grid;inline-size:calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);mask-image:var(--_mask-image-filled);mask-repeat:repeat no-repeat;mask-size:var(--_mask-inline-size) var(--_icon-size);mask-position:var(--_mask-position-x) center}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .display{--_icon-color-value:CanvasText;--_icon-color-empty:Canvas;--_icon-gradient-stop-visual-adjustment:0.5px;forced-color-adjust:none}.display::before{background-color:var(--_icon-color-value);content:'';grid-area:1 / 1 / -1 / -1;mask:inherit;mask-image:var(--_mask-image-outlined)}`));
+
 const definition$e = RatingDisplay.compose({
   name: `${FluentDesignSystem.prefix}-rating-display`,
   template: template$e,
@@ -10853,7 +11079,7 @@ class Slider extends FASTElement {
    * Places the thumb based on the current value
    */
   setSliderPosition() {
-    const newPct = convertPixelToPercent(parseFloat(this.value), this.minAsNumber, this.maxAsNumber, this.direction);
+    const newPct = convertPixelToPercent(parseFloat(this.value), this.minAsNumber, this.maxAsNumber, this.orientation === Orientation.vertical ? void 0 : this.direction);
     const percentage = newPct * 100;
     this.position = `--slider-thumb: ${percentage}%; --slider-progress: ${percentage}%`;
   }
@@ -10888,7 +11114,7 @@ class Slider extends FASTElement {
    */
   calculateNewValue(rawValue) {
     this.setupTrackConstraints();
-    const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.vertical ? this.trackMinHeight : this.trackMinWidth, this.orientation === Orientation.vertical ? this.trackHeight : this.trackWidth, this.direction);
+    const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.vertical ? this.trackMinHeight : this.trackMinWidth, this.orientation === Orientation.vertical ? this.trackHeight : this.trackWidth, this.orientation === Orientation.vertical ? void 0 : this.direction);
     const newValue = (this.maxAsNumber - this.minAsNumber) * newPosition + this.minAsNumber;
     return this.convertToConstrainedValue(newValue);
   }
@@ -10960,7 +11186,7 @@ const styles$d = css`
     .track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}`));
 
 function sliderTemplate(options = {}) {
-  return html`<template tabindex="${x => x.disabled ? null : 0}" @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
+  return html`<template @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
 }
 const template$d = sliderTemplate({
   thumb: `<div class="thumb"></div>`
@@ -11023,7 +11249,7 @@ class Switch extends BaseCheckbox {
 }
 
 function switchTemplate(options = {}) {
-  return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="switch">${staticallyCompose(options.switch)}</slot></template>`;
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="switch">${staticallyCompose(options.switch)}</slot></template>`;
 }
 const template$b = switchTemplate({
   switch: `<span class="checked-indicator" part="checked-indicator"></span>`
@@ -11032,7 +11258,7 @@ const template$b = switchTemplate({
 const styles$b = css`
   ${display("inline-flex")}
 
-  :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular}}:host(:enabled){cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};outline-offset:1px;box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}:host(:disabled) .checked-indicator,:host(${checkedState}:disabled) .checked-indicator{background-color:GrayText}`));
 
 const definition$b = Switch.compose({
@@ -11095,7 +11321,7 @@ const template$9 = tabTemplate({});
 const styles$9 = css`
   ${display("inline-flex")}
 
-  :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium}}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{position:relative;flex-direction:row;align-items:center;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};gap:4px}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host([data-hasIndent]){display:grid;grid-template-columns:20px 1fr auto}:host([data-hasIndent]) .tab-content{grid-column:2}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-selected='true'])::after{background-color:Highlight}`));
 
 const definition$9 = Tab.compose({
@@ -11557,6 +11783,13 @@ const isFocusableElement = el => {
   return !isARIADisabledElement(el) && !isHiddenElement(el);
 };
 
+function isTab(element, tagName = "-tab") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName);
+}
+
 const TablistAppearance = {
   subtle: "subtle",
   transparent: "transparent"
@@ -11647,6 +11880,9 @@ class BaseTablist extends FASTElement {
    */
   disabledChanged(prev, next) {
     toggleState(this.elementInternals, "disabled", next);
+    if (this.$fastController.isConnected) {
+      this.setTabs();
+    }
   }
   /**
    * @internal
@@ -11683,6 +11919,13 @@ class BaseTablist extends FASTElement {
       }
     }
   }
+  /**
+   * Updates the tabs property when content in the tabs slot changes.
+   * @internal
+   */
+  slottedTabsChanged(prev, next) {
+    this.tabs = next?.filter(tab => isTab(tab)) ?? [];
+  }
   /**
    * @internal
    */
@@ -11717,10 +11960,15 @@ class BaseTablist extends FASTElement {
    */
   setTabs() {
     this.activeTabIndex = this.getActiveIndex();
+    const hasStartSlot = this.tabs.some(tab => !!tab.querySelector("[slot='start']"));
     this.tabs.forEach((tab, index) => {
       if (tab.slot === "tab") {
         const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
         const tabId = this.tabIds[index];
+        console.log("disabled", this.disabled);
+        if (!tab.disabled) {
+          this.disabled ? tab.setAttribute("aria-disabled", "true") : tab.removeAttribute("aria-disabled");
+        }
         tab.setAttribute("id", tabId);
         tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
         tab.addEventListener("click", this.handleTabClick);
@@ -11730,6 +11978,9 @@ class BaseTablist extends FASTElement {
           this.activetab = tab;
           this.activeid = tabId;
         }
+        if (hasStartSlot && this.orientation === TablistOrientation.vertical) {
+          tab.setAttribute("data-hasIndent", "");
+        }
       }
     });
   }
@@ -11787,6 +12038,7 @@ __decorateClass$c([attr({
 })], BaseTablist.prototype, "disabled", 2);
 __decorateClass$c([attr], BaseTablist.prototype, "orientation", 2);
 __decorateClass$c([attr], BaseTablist.prototype, "activeid", 2);
+__decorateClass$c([observable], BaseTablist.prototype, "slottedTabs", 2);
 __decorateClass$c([observable], BaseTablist.prototype, "tabs", 2);
 
 var __defProp$b = Object.defineProperty;
@@ -11939,12 +12191,12 @@ class Tablist extends BaseTablist {
 __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>`;
+const template$7 = html`<template role="tablist"><slot name="tab" ${slotted("slottedTabs")}></slot></template>`;
 
 const styles$7 = css`
   ${display("flex")}
 
-  :host{--tabPaddingInline:inherit;--tabPaddingBlock:inherit;--tabIndicatorInsetInline:0;--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row}:host([orientation='vertical']){flex-direction:column}:host ::slotted([role='tab']){align-items:flex-start}:host ::slotted([slot='tab'][data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host(:where([size='small'],[size='large'])) ::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([size='small']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalSNudge}}:host([size='large']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([orientation='vertical']) ::slotted([slot='tab']){padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([orientation='vertical']){--tabIndicatorInsetBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']){--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host([orientation='vertical'][size='large']){--tabIndicatorInsetBlock:${spacingVerticalMNudge}}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}`;
+  :host{--tabPaddingInline:inherit;--tabPaddingBlock:inherit;--tabIndicatorInsetInline:0;--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row}:host([orientation='vertical']){flex-direction:column}:host([orientation='vertical']) ::slotted([role='tab']){justify-content:flex-start}:host ::slotted([slot='tab'][data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host(:where([size='small'],[size='large'])) ::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([size='small']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalSNudge}}:host([size='large']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([orientation='vertical']) ::slotted([slot='tab']){padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([orientation='vertical']){--tabIndicatorInsetBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']){--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host([orientation='vertical'][size='large']){--tabIndicatorInsetBlock:${spacingVerticalMNudge}}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}`;
 
 const definition$7 = Tablist.compose({
   name: `${FluentDesignSystem.prefix}-tablist`,
@@ -11983,6 +12235,8 @@ class BaseTextArea extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
+    this.filteredLabelSlottedNodes = [];
+    this.labelSlottedNodes = [];
     this.userInteracted = false;
     this.preConnectControlEl = document.createElement("textarea");
     this.autoResize = false;
@@ -11999,10 +12253,11 @@ class BaseTextArea extends FASTElement {
     this.value = next;
   }
   labelSlottedNodesChanged() {
+    this.filteredLabelSlottedNodes = this.labelSlottedNodes.filter(whitespaceFilter);
     if (this.labelEl) {
-      this.labelEl.hidden = !this.labelSlottedNodes.length;
+      this.labelEl.hidden = !this.filteredLabelSlottedNodes.length;
     }
-    this.labelSlottedNodes.forEach(node => {
+    this.filteredLabelSlottedNodes.forEach(node => {
       node.disabled = this.disabled;
       node.required = this.required;
     });
@@ -12036,8 +12291,8 @@ class BaseTextArea extends FASTElement {
   }
   requiredChanged() {
     this.elementInternals.ariaRequired = `${!!this.required}`;
-    if (this.labelSlottedNodes?.length) {
-      this.labelSlottedNodes.forEach(node => node.required = this.required);
+    if (this.filteredLabelSlottedNodes?.length) {
+      this.filteredLabelSlottedNodes.forEach(node => node.required = this.required);
     }
   }
   resizeChanged(prev, next) {
@@ -12272,8 +12527,8 @@ class BaseTextArea extends FASTElement {
     if (this.controlEl) {
       this.controlEl.disabled = disabled;
     }
-    if (this.labelSlottedNodes?.length) {
-      this.labelSlottedNodes.forEach(node => node.disabled = this.disabled);
+    if (this.filteredLabelSlottedNodes?.length) {
+      this.filteredLabelSlottedNodes.forEach(node => node.disabled = this.disabled);
     }
   }
   toggleUserValidityState() {
@@ -12446,13 +12701,7 @@ const styles$6 = css`
     :host{--border-color:FieldText;--border-block-end-color:FieldText;--focus-indicator-color:Highlight;--placeholder-color:FieldText}:host(:hover),:host(:active),:host(:focus-within){--border-color:Highlight;--border-block-end-color:Highlight}:host(:disabled){--color:GrayText;--border-color:GrayText;--border-block-end-color:GrayText;--placeholder-color:GrayText}`));
 
 function textAreaTemplate() {
-  return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted({
-    property: "labelSlottedNodes",
-    filter: whitespaceFilter
-  })}></slot></label><div class="root" part="root"><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted({
-    property: "defaultSlottedNodes",
-    filter: whitespaceFilter
-  })}></slot></div></template>`;
+  return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted("labelSlottedNodes")}></slot></label><div class="root" part="root"><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted("defaultSlottedNodes")}></slot></div></template>`;
 }
 const template$6 = textAreaTemplate();
 
@@ -12955,7 +13204,7 @@ __decorateClass$6([attr], Text.prototype, "align", 2);
 const styles$4 = css`
   ${display("inline")}
 
-  :host{contain:content;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host([nowrap]),:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]),:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]){display:block}:host([italic]){font-style:italic}:host([underline]){text-decoration-line:underline}:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']){text-align:center}:host([align='end']){text-align:end}:host([align='justify']){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host([nowrap]),:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]),:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]){display:block}:host([italic]){font-style:italic}:host([underline]){text-decoration-line:underline}:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']){text-align:center}:host([align='end']){text-align:end}:host([align='justify']){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
 
 const template$4 = html`<slot></slot>`;
 
@@ -13295,6 +13544,7 @@ class BaseTree extends FASTElement {
     this.childTreeItems = [];
     this.elementInternals.role = "tree";
   }
+  /** @internal */
   childTreeItemsChanged() {
     this.updateCurrentSelected();
   }
@@ -13391,6 +13641,9 @@ class BaseTree extends FASTElement {
     }
     if (e.target === this) {
       this.currentFocused = this.getValidFocusableItem();
+      if (this.currentFocused && this.currentFocused.tabIndex < 0) {
+        this.currentFocused.tabIndex = 0;
+      }
       this.currentFocused?.focus();
       return;
     }
@@ -13478,6 +13731,10 @@ class BaseTree extends FASTElement {
       focusItem.focus();
     }
   }
+  /** @internal */
+  handleDefaultSlotChange() {
+    this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
+  }
 }
 __decorateClass$3([observable], BaseTree.prototype, "currentSelected", 2);
 __decorateClass$3([observable], BaseTree.prototype, "childTreeItems", 2);
@@ -13529,12 +13786,10 @@ __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 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)}"><slot ${ref("defaultSlot")} @slotchange="${x => x.handleDefaultSlotChange()}"></slot></template>`;
 
 const definition$1 = Tree.compose({
   name: `${FluentDesignSystem.prefix}-tree`,
@@ -13592,6 +13847,7 @@ class BaseTreeItem extends FASTElement {
    * @internal
    */
   selectedChanged(prev, next) {
+    this.updateTabindexBySelected();
     this.$emit("change");
     toggleState(this.elementInternals, "selected", next);
     this.elementInternals.ariaSelected = next ? "true" : "false";
@@ -13613,6 +13869,10 @@ class BaseTreeItem extends FASTElement {
     this.empty = this.childTreeItems?.length === 0;
     this.updateChildTreeItems();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateTabindexBySelected();
+  }
   /**
    * Updates the childrens indent
    *
@@ -13653,7 +13913,17 @@ class BaseTreeItem extends FASTElement {
   get isNestedItem() {
     return isTreeItem(this.parentElement);
   }
+  updateTabindexBySelected() {
+    if (this.$fastController.isConnected) {
+      this.tabIndex = this.selected ? 0 : -1;
+    }
+  }
+  /** @internal */
+  handleItemSlotChange() {
+    this.childTreeItems = this.itemSlot.assignedElements().filter(el => isTreeItem(el));
+  }
 }
+__decorateClass$1([observable], BaseTreeItem.prototype, "itemSlot", 2);
 __decorateClass$1([attr({
   mode: "boolean"
 })], BaseTreeItem.prototype, "expanded", 2);
@@ -13729,13 +13999,10 @@ const styles = css`
   ${display("block")}
 
   :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)}`;
+      ${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)}.chevron svg{inline-size:12px;block-size:12px}.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="${x => x.selected ? 0 : -1}" slot="${x => x.isNestedItem ? "item" : void 0}" ${children({
-  property: "childTreeItems",
-  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 chevronIcon = html`<svg viewBox="0 0 12 12" 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 slot="${x => x.isNestedItem ? "item" : void 0}"><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron" aria-hidden="true"><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" ${ref("itemSlot")} @slotchange="${x => x.handleItemSlotChange()}"></slot></div></template>`;
 
 const definition = TreeItem.compose({
   name: `${FluentDesignSystem.prefix}-tree-item`,