@fluentui/web-components 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/web-components.js

@@ -774,6 +774,21 @@ const Observable = FAST.getById(KernelServiceId.observable, () => {
 function observable(target, nameOrAccessor) {
   Observable.defineProperty(target, nameOrAccessor);
 }
+/**
+ * Decorator: Marks a property getter as having volatile observable dependencies.
+ * @param target - The target that the property is defined on.
+ * @param name - The property name.
+ * @param name - The existing descriptor.
+ * @public
+ */
+function volatile(target, name, descriptor) {
+  return Object.assign({}, descriptor, {
+    get() {
+      Observable.trackVolatile();
+      return descriptor.get.apply(this);
+    }
+  });
+}
 const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
   let current = null;
   return {
@@ -3681,6 +3696,12 @@ const colorNeutralForeground3Hover = "var(--colorNeutralForeground3Hover)";
 const colorNeutralForeground3Pressed = "var(--colorNeutralForeground3Pressed)";
 const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
 const colorNeutralForegroundDisabled = "var(--colorNeutralForegroundDisabled)";
+const colorBrandForegroundLink = "var(--colorBrandForegroundLink)";
+const colorBrandForegroundLinkHover = "var(--colorBrandForegroundLinkHover)";
+const colorBrandForegroundLinkPressed = "var(--colorBrandForegroundLinkPressed)";
+const colorNeutralForeground2Link = "var(--colorNeutralForeground2Link)";
+const colorNeutralForeground2LinkHover = "var(--colorNeutralForeground2LinkHover)";
+const colorNeutralForeground2LinkPressed = "var(--colorNeutralForeground2LinkPressed)";
 const colorCompoundBrandForeground1 = "var(--colorCompoundBrandForeground1)";
 const colorCompoundBrandForeground1Hover = "var(--colorCompoundBrandForeground1Hover)";
 const colorCompoundBrandForeground1Pressed = "var(--colorCompoundBrandForeground1Pressed)";
@@ -3748,14 +3769,12 @@ const colorPaletteRedForeground1 = "var(--colorPaletteRedForeground1)";
 const colorPaletteRedForeground2 = "var(--colorPaletteRedForeground2)";
 const colorPaletteRedForeground3 = "var(--colorPaletteRedForeground3)";
 const colorPaletteGreenBackground1 = "var(--colorPaletteGreenBackground1)";
-const colorPaletteGreenBackground2 = "var(--colorPaletteGreenBackground2)";
 const colorPaletteGreenBackground3 = "var(--colorPaletteGreenBackground3)";
 const colorPaletteGreenBorder2 = "var(--colorPaletteGreenBorder2)";
 const colorPaletteGreenForeground1 = "var(--colorPaletteGreenForeground1)";
 const colorPaletteGreenForeground2 = "var(--colorPaletteGreenForeground2)";
 const colorPaletteGreenForeground3 = "var(--colorPaletteGreenForeground3)";
 const colorPaletteDarkOrangeBackground1 = "var(--colorPaletteDarkOrangeBackground1)";
-const colorPaletteDarkOrangeBackground2 = "var(--colorPaletteDarkOrangeBackground2)";
 const colorPaletteDarkOrangeBackground3 = "var(--colorPaletteDarkOrangeBackground3)";
 const colorPaletteDarkOrangeBorder1 = "var(--colorPaletteDarkOrangeBorder1)";
 const colorPaletteDarkOrangeForeground1 = "var(--colorPaletteDarkOrangeForeground1)";
@@ -3897,7 +3916,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$t = css`
+const styles$u = css`
   ${display("block")}
 
   :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;vertical-align:middle;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.heading-content{height:100%;display:flex;align-items:center}.button{box-sizing:border-box;appearance:none;border:none;outline:none;text-align:start;cursor:pointer;font-family:inherit;height:44px;color:${colorNeutralForeground1};background:${colorTransparentBackground};line-height:${lineHeightBase300};height:auto;padding:0;font-size:inherit;grid-column:auto / span 2;grid-row:1}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}.icon{display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-right:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.region{margin:0 ${spacingHorizontalM}}::slotted([slot='start']),::slotted([slot='end']){justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1 / span 1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .region{display:block}:host([expanded]) .default-collapsed-icon,:host([expanded]) ::slotted([slot='collapsed-icon']),:host(:not([expanded])) .default-expanded-icon,:host(:not([expanded])) ::slotted([slot='expanded-icon']),:host([expanded]) ::slotted([slot='end']),::slotted([slot='start']),.region{display:none}:host([expanded]) ::slotted([slot='start']),:host([expanded]) ::slotted([slot='expanded-icon']),:host(:not([expanded])) ::slotted([slot='collapsed-icon']),::slotted([slot='end']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([expand-icon-position='end']) :slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) ::slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) .icon{grid-column:4 / span 1;grid-row:1;display:flex;padding-left:10px;padding-right:0}:host([expand-icon-position='end']) .button{grid-column:2 / span 3;grid-row:1}:host([block]){max-width:100%}:host([expand-icon-position='end']) .heading{grid-template-columns:auto auto 28px}:host([expand-icon-position='end']) .icon{grid-column:5 / span 1}:host([block][expand-icon-position='end']) .heading{grid-template-columns:auto 1fr}:host([block][expand-icon-position='end']) .icon{grid-column:5 / span 1}`;
@@ -3931,18 +3950,18 @@ const chevronDown20Filled = html.partial(`<svg
 function accordionItemTemplate(options = {}) {
   return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}" @click="${(x, c) => x.clickHandler(c.event)}"><span class="heading-content" part="heading-content"><slot name="heading"></slot></span></button>${startSlotTemplate(options)} ${endSlotTemplate(options)}<span class="icon" part="icon" aria-hidden="true"><slot name="expanded-icon">${staticallyCompose(options.expandedIcon)}</slot><slot name="collapsed-icon">${staticallyCompose(options.collapsedIcon)}</slot><span></div><div class="region" part="region" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
-const template$u = accordionItemTemplate({
+const template$v = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$u = AccordionItem.compose({
+const definition$v = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$u,
-  styles: styles$t
+  template: template$v,
+  styles: styles$u
 });
 
-definition$u.define(FluentDesignSystem.registry);
+definition$v.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
@@ -4137,7 +4156,7 @@ __decorateClass$q([attr({
 })], Accordion.prototype, "expandmode", 2);
 __decorateClass$q([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$s = css`
+const styles$t = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -4148,15 +4167,32 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$t = accordionTemplate();
+const template$u = accordionTemplate();
 
-const definition$t = Accordion.compose({
+const definition$u = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$t,
-  styles: styles$s
+  template: template$u,
+  styles: styles$t
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
+
+const ButtonType = {
+  submit: "submit",
+  reset: "reset",
+  button: "button"
+};
+
+const AnchorAttributes = {
+  download: "download",
+  href: "href",
+  hreflang: "hreflang",
+  ping: "ping",
+  referrerpolicy: "referrerpolicy",
+  rel: "rel",
+  target: "target",
+  type: "type"
+};
 
 var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
@@ -4166,59 +4202,105 @@ var __decorateClass$p = (decorators, target, key, kind) => {
   if (kind && result) __defProp$p(target, key, result);
   return result;
 };
-class AnchorButton extends FASTElement {
+class BaseAnchor extends FASTElement {
   constructor() {
-    super(...arguments);
-    this.iconOnly = false;
-    this.disabled = false;
-    this.disabledFocusable = false;
+    super();
     /**
-     * Prevents disabledFocusable click events
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
      */
-    this.handleDisabledFocusableClick = e => {
-      if (e && this.disabled || this.disabledFocusable) {
-        e.stopImmediatePropagation();
-        return;
-      }
-    };
+    this.elementInternals = this.attachInternals();
+    /**
+     * The proxy anchor element
+     * @internal
+     */
+    this.internalProxyAnchor = this.createProxyElement();
+    this.elementInternals.role = "link";
   }
-  disabledChanged(prev, next) {
-    if (this.disabled) {
-      this.setAttribute("aria-disabled", "true");
-      this.setAttribute("tabindex", "-1");
-    } else {
-      this.removeAttribute("aria-disabled");
-      this.removeAttribute("tabindex");
+  connectedCallback() {
+    super.connectedCallback();
+    Observable.getNotifier(this).subscribe(this);
+    Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
+      this.handleChange(this, key);
+    });
+    this.append(this.internalProxyAnchor);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    Observable.getNotifier(this).unsubscribe(this);
+  }
+  /**
+   * Handles changes to observable properties
+   * @internal
+   * @param source - the source of the change
+   * @param propertyName - the property name being changed
+   */
+  handleChange(source, propertyName) {
+    if (propertyName in AnchorAttributes) {
+      const attribute = this.$fastController.definition.attributeLookup[propertyName]?.attribute;
+      if (attribute) {
+        this.handleProxyAttributeChange(attribute, this[propertyName]);
+      }
     }
   }
-  disabledFocusableChanged(prev, next) {
-    if (!this.$fastController.isConnected) {
+  /**
+   * Handles the anchor click event.
+   *
+   * @param e - The event object
+   * @internal
+   */
+  clickHandler() {
+    this.internalProxyAnchor.click();
+    return true;
+  }
+  /**
+   * Handles keypress events for the anchor.
+   *
+   * @param e - the keyboard event
+   * @returns - the return value of the click handler
+   * @public
+   */
+  keypressHandler(e) {
+    if (e.key === keyEnter) {
+      this.internalProxyAnchor.click();
       return;
     }
-    if (this.disabledFocusable) {
-      this.setAttribute("aria-disabled", "true");
+    return true;
+  }
+  /**
+   * A method for updating proxy attributes when attributes have changed
+   * @internal
+   * @param attribute - an attribute to set/remove
+   * @param value - the value of the attribute
+   */
+  handleProxyAttributeChange(attribute, value) {
+    if (value) {
+      this.internalProxyAnchor.setAttribute(attribute, value);
     } else {
-      this.removeAttribute("aria-disabled");
+      this.internalProxyAnchor.removeAttribute(attribute);
     }
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.handleDisabledFocusableClick);
+  createProxyElement() {
+    const proxy = this.internalProxyAnchor ?? document.createElement("a");
+    proxy.hidden = true;
+    return proxy;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.handleDisabledFocusableClick);
-  }
-}
-__decorateClass$p([attr], AnchorButton.prototype, "download", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "href", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "hreflang", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "ping", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "referrerpolicy", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "rel", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "target", 2);
-__decorateClass$p([attr], AnchorButton.prototype, "type", 2);
-__decorateClass$p([observable], AnchorButton.prototype, "defaultSlottedContent", 2);
+}
+__decorateClass$p([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$p([attr], BaseAnchor.prototype, "type", 2);
+class AnchorButton extends BaseAnchor {
+  constructor() {
+    super(...arguments);
+    this.iconOnly = false;
+  }
+}
 __decorateClass$p([attr], AnchorButton.prototype, "appearance", 2);
 __decorateClass$p([attr], AnchorButton.prototype, "shape", 2);
 __decorateClass$p([attr], AnchorButton.prototype, "size", 2);
@@ -4226,43 +4308,33 @@ __decorateClass$p([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
-__decorateClass$p([attr({
-  mode: "boolean"
-})], AnchorButton.prototype, "disabled", 2);
-__decorateClass$p([attr({
-  attribute: "disabled-focusable",
-  mode: "boolean"
-})], AnchorButton.prototype, "disabledFocusable", 2);
-class DelegatesARIALink {}
-__decorateClass$p([attr({
-  attribute: "aria-expanded"
-})], DelegatesARIALink.prototype, "ariaExpanded", 2);
-applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-applyMixins(AnchorButton, StartEnd, DelegatesARIALink);
+applyMixins(AnchorButton, StartEnd);
 
-const styles$r = css`
+const baseButtonStyles = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit;text-align:center}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary'])) .control,:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover) .control,:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline'])) .control,:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover) .control,:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle'])) .control,:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover) .control,:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent'])) .control,:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover) .control,:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover:active)
-    .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
-    .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([appearance='transparent']:hover) .control{border-color:Highlight}`));
+  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}`;
+const styles$s = css`
+  ${baseButtonStyles}
+
+  :host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover:active){border-color:transparent}:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{background:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight}`));
+
+const styles$r = baseButtonStyles.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{border-color:LinkText;color:LinkText}`));
 
-function anchorTemplate(options = {}) {
-  return html`<a class="control" part="control" download="${x => x.download}" href="${x => x.href}" hreflang="${x => x.hreflang}" ping="${x => x.ping}" referrerpolicy="${x => x.referrerpolicy}" rel="${x => x.rel}" target="${x => x.target}" type="${x => x.type}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-expanded="${x => x.ariaExpanded}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")}>${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</a>`;
+function anchorTemplate$1(options = {}) {
+  return html`<template tabindex="0" @click="${x => x.clickHandler()}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$s = anchorTemplate();
+const template$t = anchorTemplate$1();
 
-const definition$s = AnchorButton.compose({
+const definition$t = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$s,
-  styles: styles$r,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  template: template$t,
+  styles: styles$r
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$t.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -4426,15 +4498,15 @@ const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 2
 function avatarTemplate() {
   return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
 }
-const template$r = avatarTemplate();
+const template$s = avatarTemplate();
 
-const definition$r = Avatar.compose({
+const definition$s = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$r,
+  template: template$s,
   styles: styles$q
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$s.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -4839,21 +4911,15 @@ const styles$p = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$q = badgeTemplate();
+const template$r = badgeTemplate();
 
-const definition$q = Badge.compose({
+const definition$r = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$q,
+  template: template$r,
   styles: styles$p
 });
 
-definition$q.define(FluentDesignSystem.registry);
-
-const ButtonType = {
-  submit: "submit",
-  reset: "reset",
-  button: "button"
-};
+definition$r.define(FluentDesignSystem.registry);
 
 var __defProp$m = Object.defineProperty;
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
@@ -5106,24 +5172,18 @@ __decorateClass$m([attr], Button.prototype, "type", 2);
 __decorateClass$m([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
-const styles$o = css`
-  ${display("inline-flex")}
-
-  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover:active){border-color:transparent}:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([appearance='transparent']:hover){border-color:Highlight}`));
-
 function buttonTemplate$1(options = {}) {
   return html`<template tabindex="${x => x.disabled ? -1 : 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$p = buttonTemplate$1();
+const template$q = buttonTemplate$1();
 
-const definition$p = Button.compose({
+const definition$q = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$p,
-  styles: styles$o
+  template: template$q,
+  styles: styles$s
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
 const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
 function toggleState(elementInternals, state, force) {
@@ -5499,7 +5559,7 @@ __decorateClass$l([attr], Checkbox.prototype, "size", 2);
 
 const checkedState$1 = css.partial`:is([state--checked], :state(checked))`;
 const indeterminateState = css.partial`:is([state--indeterminate], :state(indeterminate))`;
-const styles$n = css`
+const styles$o = css`
   ${display("inline-flex")}
 
   :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState$1}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState$1}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState$1})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState$1}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState$1}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([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$1}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState$1}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -5525,23 +5585,23 @@ const indeterminateIndicator = html.partial( /* html */
 function checkboxTemplate(options = {}) {
   return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
-const template$o = checkboxTemplate({
+const template$p = checkboxTemplate({
   checkedIndicator,
   indeterminateIndicator
 });
 
-const definition$o = Checkbox.compose({
+const definition$p = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$o,
-  styles: styles$n
+  template: template$p,
+  styles: styles$o
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$p.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$m = css`
-  ${styles$o}
+const styles$n = css`
+  ${styles$s}
 
   :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']:hover,[appearance='primary']:active))
     ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
@@ -5551,15 +5611,15 @@ const styles$m = css`
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$n = buttonTemplate();
+const template$o = buttonTemplate();
 
-const definition$n = CompoundButton.compose({
+const definition$o = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$n,
-  styles: styles$m
+  template: template$o,
+  styles: styles$n
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$o.define(FluentDesignSystem.registry);
 
 var __defProp$k = Object.defineProperty;
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -5617,7 +5677,7 @@ __decorateClass$k([attr({
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const styles$l = css`
+const styles$m = css`
   :host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -5630,15 +5690,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$m = composeTemplate();
+const template$n = composeTemplate();
 
-const definition$m = CounterBadge.compose({
+const definition$n = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$m,
-  styles: styles$l
+  template: template$n,
+  styles: styles$m
 });
 
-definition$m.define(FluentDesignSystem.registry);
+definition$n.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -5728,19 +5788,19 @@ __decorateClass$j([attr({
 })], Dialog.prototype, "ariaLabelledby", 2);
 __decorateClass$j([attr], Dialog.prototype, "type", 2);
 
-const template$l = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+const template$m = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
-const styles$k = css`
+const styles$l = css`
   @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:calc(-48px + 100vh);padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
 
-const definition$l = Dialog.compose({
+const definition$m = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$l,
-  styles: styles$k
+  template: template$m,
+  styles: styles$l
 });
 
-definition$l.define(FluentDesignSystem.registry);
+definition$m.define(FluentDesignSystem.registry);
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
@@ -5775,20 +5835,20 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$k = 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$l = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
 
-const styles$j = css`
+const styles$k = css`
   ${display("grid")}
 
   :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL};position:sticky;z-index:1}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL};position:sticky;z-index:2}:not(:has(:is([slot='title'],[slot='title-action']))) .title:not(:has(.title-action)),:not(:has([slot='action'])) .actions{display:none}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}`;
 
-const definition$k = DialogBody.compose({
+const definition$l = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$k,
-  styles: styles$j
+  template: template$l,
+  styles: styles$k
 });
 
-definition$k.define(FluentDesignSystem.registry);
+definition$l.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -5868,21 +5928,21 @@ __decorateClass$h([attr({
 function dividerTemplate() {
   return html`<slot></slot>`;
 }
-const template$j = dividerTemplate();
+const template$k = dividerTemplate();
 
-const styles$i = css`
+const styles$j = css`
   ${display("flex")}
 
   :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
-const definition$j = Divider.compose({
+const definition$k = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$j,
-  styles: styles$i
+  template: template$k,
+  styles: styles$j
 });
 
-definition$j.define(FluentDesignSystem.registry);
+definition$k.define(FluentDesignSystem.registry);
 
 const LabelPosition = {
   above: "above",
@@ -6047,12 +6107,12 @@ const tooShortState = css.partial`:is([state--${ValidationFlags.tooShort}], :sta
 const typeMismatchState = css.partial`:is([state--${ValidationFlags.typeMismatch}], :state(${ValidationFlags.typeMismatch}))`;
 const validState = css.partial`:is([state-${ValidationFlags.valid}], :state(${ValidationFlags.valid}))`;
 const valueMissingState = css.partial`:is([state--${ValidationFlags.valueMissing}], :state(${ValidationFlags.valueMissing}))`;
-const styles$h = css`
+const styles$i = css`
   ${display("inline-grid")}
 
   :host{align-items:center;cursor:pointer;gap:0 ${spacingHorizontalM};justify-items:start;padding:${spacingVerticalS}}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message'}::slotted([slot='label']){cursor:pointer;grid-area:label}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label){display:inline-flex;color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}) ::slotted(label){color:${colorNeutralForeground1};cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
-const template$i = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
+const template$j = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
   property: "slottedInputs",
   attributes: true,
   attributeFilter: ["disabled", "required", "readonly"],
@@ -6064,16 +6124,16 @@ const template$i = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
   filter: elements("[flag]")
 })}></slot></template>`;
 
-const definition$i = Field.compose({
+const definition$j = Field.compose({
   name: `${FluentDesignSystem.prefix}-field`,
-  template: template$i,
-  styles: styles$h,
+  template: template$j,
+  styles: styles$i,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$i.define(FluentDesignSystem.registry);
+definition$j.define(FluentDesignSystem.registry);
 
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
@@ -6096,18 +6156,18 @@ __decorateClass$f([attr({
 __decorateClass$f([attr], Image.prototype, "fit", 2);
 __decorateClass$f([attr], Image.prototype, "shape", 2);
 
-const template$h = html`<slot></slot>`;
+const template$i = html`<slot></slot>`;
 
-const styles$g = css`
+const styles$h = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
-const definition$h = Image.compose({
+const definition$i = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$h,
-  styles: styles$g
+  template: template$i,
+  styles: styles$h
 });
 
-definition$h.define(FluentDesignSystem.registry);
+definition$i.define(FluentDesignSystem.registry);
 
 var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
@@ -6133,7 +6193,7 @@ __decorateClass$e([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
-const styles$f = css`
+const styles$g = css`
   ${display("inline-flex")}
 
   :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']),:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
@@ -6141,10 +6201,48 @@ const styles$f = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$g = labelTemplate();
+const template$h = labelTemplate();
 
-const definition$g = Label.compose({
+const definition$h = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
+  template: template$h,
+  styles: styles$g
+});
+
+definition$h.define(FluentDesignSystem.registry);
+
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$d(target, key, result);
+  return result;
+};
+class Link extends BaseAnchor {
+  constructor() {
+    super(...arguments);
+    this.inline = false;
+  }
+}
+__decorateClass$d([attr], Link.prototype, "appearance", 2);
+__decorateClass$d([attr({
+  mode: "boolean"
+})], Link.prototype, "inline", 2);
+
+const styles$f = css`
+  ${display("inline")}
+
+  :host{box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};margin:0;padding:0;overflow:inherit;text-align:left;text-decoration:none;text-decoration-thinkness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{color:LinkText}`));
+
+function anchorTemplate() {
+  return html`<template tabindex="0" @click="${x => x.clickHandler()}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><slot></slot></template>`;
+}
+const template$g = anchorTemplate();
+
+const definition$g = Link.compose({
+  name: `${FluentDesignSystem.prefix}-link`,
   template: template$g,
   styles: styles$f
 });
@@ -6165,7 +6263,7 @@ const template$f = buttonTemplate$1({
 const definition$f = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
   template: template$f,
-  styles: styles$o
+  styles: styles$s
 });
 
 definition$f.define(FluentDesignSystem.registry);
@@ -7105,12 +7203,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 class MenuItem extends FASTElement {
@@ -7315,21 +7413,21 @@ class MenuItem extends FASTElement {
     });
   }
 }
-__decorateClass$d([attr({
+__decorateClass$c([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$d([attr({
+__decorateClass$c([attr({
   mode: "boolean"
 })], MenuItem.prototype, "expanded", 2);
-__decorateClass$d([attr], MenuItem.prototype, "role", 2);
-__decorateClass$d([attr({
+__decorateClass$c([attr], MenuItem.prototype, "role", 2);
+__decorateClass$c([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$d([attr({
+__decorateClass$c([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$d([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$d([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$c([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$c([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
 const styles$e = css`
@@ -7359,12 +7457,12 @@ const definition$e = MenuItem.compose({
 
 definition$e.define(FluentDesignSystem.registry);
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -7605,7 +7703,7 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$c([observable], _MenuList.prototype, "items", 2);
+__decorateClass$b([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
 const styles$d = css`
@@ -7626,12 +7724,12 @@ const definition$d = MenuList.compose({
 
 definition$d.define(FluentDesignSystem.registry);
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
@@ -7967,27 +8065,27 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$b([observable, attr({
+__decorateClass$a([observable, attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$b([observable, attr({
+__decorateClass$a([observable, attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$b([observable, attr({
+__decorateClass$a([observable, attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$b([observable, attr({
+__decorateClass$a([observable, attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$b([observable, attr({
+__decorateClass$a([observable, attr({
   mode: "boolean"
 })], Menu.prototype, "open", 2);
-__decorateClass$b([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$b([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$a([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$a([observable], Menu.prototype, "slottedTriggers", 2);
 
 const styles$c = css`
   :host{position:relative;z-index:var(--z-index-menu,1)}.positioning-container{position:fixed;top:0;left:0;transform:translate(0,0)}`;
@@ -8011,70 +8109,59 @@ const definition$c = Menu.compose({
 
 definition$c.define(FluentDesignSystem.registry);
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
-class BaseProgress extends FASTElement {
+class ProgressBar extends FASTElement {
   constructor() {
-    super(...arguments);
-    this.percentComplete = 0;
-  }
-  valueChanged() {
-    this.updatePercentComplete();
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.validationState = null;
+    this.elementInternals.role = "progressbar";
   }
-  minChanged() {
-    if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
-    }
+  /**
+   * Updates the percent complete when the `value` property changes.
+   *
+   * @internal
+   */
+  valueChanged(prev, next) {
+    this.elementInternals.ariaValueNow = typeof next === "number" ? `${next}` : null;
   }
-  maxChanged() {
-    if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
-    }
+  /**
+   * Updates the percent complete when the `min` property changes.
+   *
+   * @param prev - The previous min value
+   * @param next - The current min value
+   */
+  minChanged(prev, next) {
+    this.elementInternals.ariaValueMin = typeof next === "number" ? `${next}` : null;
   }
   /**
+   * Updates the percent complete when the `max` property changes.
+   *
+   * @param prev - The previous max value
+   * @param next - The current max value
    * @internal
    */
-  connectedCallback() {
-    super.connectedCallback();
-    this.updatePercentComplete();
+  maxChanged(prev, next) {
+    this.elementInternals.ariaValueMax = typeof next === "number" ? `${next}` : null;
   }
-  updatePercentComplete() {
-    const min = typeof this.min === "number" ? this.min : 0;
-    const max = typeof this.max === "number" ? this.max : 100;
-    const value = typeof this.value === "number" ? this.value : 0;
+  get percentComplete() {
+    const min = this.min ?? 0;
+    const max = this.max ?? 100;
+    const value = this.value ?? 0;
     const range = max - min;
-    this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
-  }
-}
-__decorateClass$a([attr({
-  converter: nullableNumberConverter
-})], BaseProgress.prototype, "value", 2);
-__decorateClass$a([attr({
-  converter: nullableNumberConverter
-})], BaseProgress.prototype, "min", 2);
-__decorateClass$a([attr({
-  converter: nullableNumberConverter
-})], BaseProgress.prototype, "max", 2);
-__decorateClass$a([observable], BaseProgress.prototype, "percentComplete", 2);
-
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
-  return result;
-};
-class ProgressBar extends BaseProgress {
-  constructor() {
-    super(...arguments);
-    this.validationState = null;
+    return range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
 __decorateClass$9([attr], ProgressBar.prototype, "thickness", 2);
@@ -8082,30 +8169,29 @@ __decorateClass$9([attr], ProgressBar.prototype, "shape", 2);
 __decorateClass$9([attr({
   attribute: "validation-state"
 })], ProgressBar.prototype, "validationState", 2);
+__decorateClass$9([attr({
+  converter: nullableNumberConverter
+})], ProgressBar.prototype, "value", 2);
+__decorateClass$9([attr({
+  converter: nullableNumberConverter
+})], ProgressBar.prototype, "min", 2);
+__decorateClass$9([attr({
+  converter: nullableNumberConverter
+})], ProgressBar.prototype, "max", 2);
+__decorateClass$9([volatile], ProgressBar.prototype, "percentComplete", 1);
 
 const styles$b = css`
-  ${display("flex")}
+  ${display("block")}
 
-  :host{align-items:center;height:2px;overflow-x:hidden;border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']),:host([thickness='large']) .progress,:host([thickness='large']) .determinate{height:4px}:host([shape='square']),:host([shape='square']) .progress,:host([shape='square']) .determinate{border-radius:0}:host([validation-state='error']) .determinate{background-color:${colorPaletteRedBackground3}}:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background:linear-gradient(
-      to right,${colorPaletteRedBackground2} 0%,${colorPaletteRedBackground3} 50%,${colorPaletteRedBackground2}
-    )}:host([validation-state='warning']) .determinate{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2{background:linear-gradient(
-      to right,${colorPaletteDarkOrangeBackground2} 0%,${colorPaletteDarkOrangeBackground3} 50%,${colorPaletteDarkOrangeBackground2}
-    )}:host([validation-state='success']) .determinate{background-color:${colorPaletteGreenBackground3}}:host([validation-state='success']) .indeterminate-indicator-1,:host([validation-state='success']) .indeterminate-indicator-2{background:linear-gradient(
-      to right,${colorPaletteGreenBackground2} 0%,${colorPaletteGreenBackground3} 50%,${colorPaletteGreenBackground2}
-    )}.progress{background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};width:100%;height:2px;display:flex;align-items:center;position:relative}.determinate{background-color:${colorCompoundBrandBackground};border-radius:${borderRadiusMedium};height:2px;transition:all 0.2s ease-in-out;display:flex}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background:linear-gradient(
-      to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
-    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 3s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background:linear-gradient(
-      to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
-    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 3s infinite}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .progress{background-color:HighlightText}.determinate,:host([validation-state='success']) .determinate,:host([validation-state='warning']) .determinate,:host([validation-state='error']) .determinate,:host([validation-state='success']) ..indeterminate-indicator-1,:host([validation-state='success']) ..indeterminate-indicator-2,:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2,:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background-color:Highlight}`));
-
-function progressTemplate(options = {}) {
-  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`, html`<div class="progress" part="progress" slot="indeterminate"><slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator1)} ${staticallyCompose(options.indeterminateIndicator2)}</slot></div>`)}</template>`;
-}
-const template$b = progressTemplate({
-  indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
-  indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`
-});
+  :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(
+      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>`;
+}
+const template$b = progressTemplate();
 
 const definition$b = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
@@ -10468,7 +10554,7 @@ __decorateClass([attr({
 })], ToggleButton.prototype, "mixed", 2);
 
 const styles = css`
-  ${styles$o}
+  ${styles$s}
 
   :host([aria-pressed='true']){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover),:host([aria-pressed='true'][appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active),:host([aria-pressed='true'][appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-pressed='true']),:host([aria-pressed='true'][appearance='primary']),:host([aria-pressed='true'][appearance='subtle']),:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background:SelectedItem;color:SelectedItemText}`));