@fluentui/web-components 3.0.0-rc.19 → 3.0.0-rc.20

package/dist/web-components.js

@@ -4725,14 +4725,14 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-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$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$O(target, key, result);
+  if (kind && result) __defProp$P(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4749,31 +4749,31 @@ class BaseAccordionItem extends FASTElement {
     this.disabled = false;
   }
 }
-__decorateClass$O([
+__decorateClass$P([
   attr({
     attribute: "heading-level",
     mode: "fromView",
     converter: nullableNumberConverter
   })
 ], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$O([
+__decorateClass$P([
   attr({ mode: "boolean" })
 ], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$O([
+__decorateClass$P([
   attr({ mode: "boolean" })
 ], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$O([
+__decorateClass$P([
   observable
 ], BaseAccordionItem.prototype, "expandbutton", 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$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$N(target, key, result);
+  if (kind && result) __defProp$O(target, key, result);
   return result;
 };
 class AccordionItem extends BaseAccordionItem {
@@ -4782,13 +4782,13 @@ class AccordionItem extends BaseAccordionItem {
     this.block = false;
   }
 }
-__decorateClass$N([
+__decorateClass$O([
   attr
 ], AccordionItem.prototype, "size", 2);
-__decorateClass$N([
+__decorateClass$O([
   attr({ attribute: "marker-position" })
 ], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$N([
+__decorateClass$O([
   attr({ mode: "boolean" })
 ], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -5101,14 +5101,14 @@ function waitForConnectedDescendants(target, callback, options) {
   scheduleCheck();
 }
 
-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$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$M(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -5253,10 +5253,10 @@ class Accordion extends FASTElement {
     this.setItems();
   }
 }
-__decorateClass$M([
+__decorateClass$N([
   attr({ attribute: "expand-mode" })
 ], Accordion.prototype, "expandmode", 2);
-__decorateClass$M([
+__decorateClass$N([
   observable
 ], Accordion.prototype, "slottedAccordionItems", 2);
 
@@ -5354,14 +5354,14 @@ function swapStates(elementInternals, prev = "", next = "", States, prefix = "")
   }
 }
 
-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$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$L(target, key, result);
+  if (kind && result) __defProp$M(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -5473,39 +5473,39 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "download", 2);
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "href", 2);
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "ping", 2);
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "rel", 2);
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "target", 2);
-__decorateClass$L([
+__decorateClass$M([
   attr
 ], BaseAnchor.prototype, "type", 2);
 
-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$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$K(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 class AnchorButton extends BaseAnchor {
@@ -5546,16 +5546,16 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$K([
+__decorateClass$L([
   attr
 ], AnchorButton.prototype, "appearance", 2);
-__decorateClass$K([
+__decorateClass$L([
   attr
 ], AnchorButton.prototype, "shape", 2);
-__decorateClass$K([
+__decorateClass$L([
   attr
 ], AnchorButton.prototype, "size", 2);
-__decorateClass$K([
+__decorateClass$L([
   attr({ attribute: "icon-only", mode: "boolean" })
 ], AnchorButton.prototype, "iconOnly", 2);
 applyMixins(AnchorButton, StartEnd);
@@ -5659,14 +5659,14 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
-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$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$J(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 class BaseAvatar extends FASTElement {
@@ -5775,30 +5775,30 @@ class BaseAvatar extends FASTElement {
     }
   }
 }
-__decorateClass$J([
+__decorateClass$K([
   observable
 ], BaseAvatar.prototype, "defaultSlot", 2);
-__decorateClass$J([
+__decorateClass$K([
   observable
 ], BaseAvatar.prototype, "monogram", 2);
-__decorateClass$J([
+__decorateClass$K([
   observable
 ], BaseAvatar.prototype, "slottedDefaults", 2);
-__decorateClass$J([
+__decorateClass$K([
   attr
 ], BaseAvatar.prototype, "name", 2);
-__decorateClass$J([
+__decorateClass$K([
   attr
 ], BaseAvatar.prototype, "initials", 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$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$I(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 const _Avatar = class _Avatar extends BaseAvatar {
@@ -5853,22 +5853,22 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$I([
+__decorateClass$J([
   attr
 ], _Avatar.prototype, "active", 2);
-__decorateClass$I([
+__decorateClass$J([
   attr
 ], _Avatar.prototype, "shape", 2);
-__decorateClass$I([
+__decorateClass$J([
   attr
 ], _Avatar.prototype, "appearance", 2);
-__decorateClass$I([
+__decorateClass$J([
   attr({ converter: nullableNumberConverter })
 ], _Avatar.prototype, "size", 2);
-__decorateClass$I([
+__decorateClass$J([
   attr
 ], _Avatar.prototype, "color", 2);
-__decorateClass$I([
+__decorateClass$J([
   attr({ attribute: "color-id" })
 ], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5927,14 +5927,14 @@ const BadgeColor = {
 };
 const tagName$A = `${FluentDesignSystem.prefix}-badge`;
 
-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$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$H(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -5944,16 +5944,16 @@ class Badge extends FASTElement {
     this.color = BadgeColor.brand;
   }
 }
-__decorateClass$H([
+__decorateClass$I([
   attr
 ], Badge.prototype, "appearance", 2);
-__decorateClass$H([
+__decorateClass$I([
   attr
 ], Badge.prototype, "color", 2);
-__decorateClass$H([
+__decorateClass$I([
   attr
 ], Badge.prototype, "shape", 2);
-__decorateClass$H([
+__decorateClass$I([
   attr
 ], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
@@ -5980,14 +5980,14 @@ const definition$B = Badge.compose({
 
 definition$B.define(FluentDesignSystem.registry);
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 class BaseButton extends FASTElement {
@@ -6212,54 +6212,54 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$G([
+__decorateClass$H([
   attr({ mode: "boolean" })
 ], BaseButton.prototype, "autofocus", 2);
-__decorateClass$G([
+__decorateClass$H([
   observable
 ], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ mode: "boolean" })
 ], BaseButton.prototype, "disabled", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ attribute: "disabled-focusable", mode: "boolean" })
 ], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ attribute: "formaction" })
 ], BaseButton.prototype, "formAction", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ attribute: "form" })
 ], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ attribute: "formenctype" })
 ], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ attribute: "formmethod" })
 ], BaseButton.prototype, "formMethod", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ attribute: "formnovalidate", mode: "boolean" })
 ], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr({ attribute: "formtarget" })
 ], BaseButton.prototype, "formTarget", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr
 ], BaseButton.prototype, "name", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr
 ], BaseButton.prototype, "type", 2);
-__decorateClass$G([
+__decorateClass$H([
   attr
 ], BaseButton.prototype, "value", 2);
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 class Button extends BaseButton {
@@ -6268,16 +6268,16 @@ class Button extends BaseButton {
     this.iconOnly = false;
   }
 }
-__decorateClass$F([
+__decorateClass$G([
   attr
 ], Button.prototype, "appearance", 2);
-__decorateClass$F([
+__decorateClass$G([
   attr
 ], Button.prototype, "shape", 2);
-__decorateClass$F([
+__decorateClass$G([
   attr
 ], Button.prototype, "size", 2);
-__decorateClass$F([
+__decorateClass$G([
   attr({ attribute: "icon-only", mode: "boolean" })
 ], Button.prototype, "iconOnly", 2);
 applyMixins(Button, StartEnd);
@@ -6297,14 +6297,14 @@ definition$A.define(FluentDesignSystem.registry);
 
 const tagName$z = `${FluentDesignSystem.prefix}-checkbox`;
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -6654,39 +6654,39 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$E([
+__decorateClass$F([
   attr({ mode: "boolean" })
 ], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$E([
+__decorateClass$F([
   observable
 ], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$E([
+__decorateClass$F([
   attr({ attribute: "disabled", mode: "boolean" })
 ], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$E([
+__decorateClass$F([
   attr({ attribute: "form" })
 ], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$E([
+__decorateClass$F([
   attr({ attribute: "checked", mode: "boolean" })
 ], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$E([
+__decorateClass$F([
   attr({ attribute: "value", mode: "fromView" })
 ], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$E([
+__decorateClass$F([
   attr
 ], BaseCheckbox.prototype, "name", 2);
-__decorateClass$E([
+__decorateClass$F([
   attr({ mode: "boolean" })
 ], BaseCheckbox.prototype, "required", 2);
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 class Checkbox extends BaseCheckbox {
@@ -6729,13 +6729,13 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$D([
+__decorateClass$E([
   observable
 ], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$D([
+__decorateClass$E([
   attr
 ], Checkbox.prototype, "shape", 2);
-__decorateClass$D([
+__decorateClass$E([
   attr
 ], Checkbox.prototype, "size", 2);
 
@@ -6816,17 +6816,17 @@ definition$y.define(FluentDesignSystem.registry);
 
 const tagName$x = `${FluentDesignSystem.prefix}-counter-badge`;
 
-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$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$C(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
-class CounterBadge extends FASTElement {
+class BaseCounterBadge extends FASTElement {
   constructor() {
     super(...arguments);
     /**
@@ -6840,27 +6840,45 @@ class CounterBadge extends FASTElement {
     this.showZero = false;
     this.dot = false;
   }
-  countChanged() {
-    this.setCount();
-  }
-  overflowCountChanged() {
-    this.setCount();
-  }
-  /**
-   * Function to set the count
-   * This is the default slotted content for the counter badge
-   * If children are slotted, that will override the value returned
-   *
-   * @internal
-   */
-  setCount() {
+  get displayValue() {
     const count = this.count ?? 0;
-    if ((count !== 0 || this.showZero) && !this.dot) {
-      return count > this.overflowCount ? `${this.overflowCount}+` : `${count}`;
+    if (!this.showZero && count === 0 || this.dot) {
+      return "";
     }
-    return;
+    if (this.overflowCount > 0 && count > this.overflowCount) {
+      return `${this.overflowCount}+`;
+    }
+    return `${count}`;
   }
 }
+__decorateClass$D([
+  attr({ converter: nullableNumberConverter })
+], BaseCounterBadge.prototype, "count", 2);
+__decorateClass$D([
+  attr({ attribute: "overflow-count", converter: nullableNumberConverter })
+], BaseCounterBadge.prototype, "overflowCount", 2);
+__decorateClass$D([
+  attr({ attribute: "show-zero", mode: "boolean" })
+], BaseCounterBadge.prototype, "showZero", 2);
+__decorateClass$D([
+  attr({ mode: "boolean" })
+], BaseCounterBadge.prototype, "dot", 2);
+__decorateClass$D([
+  volatile
+], BaseCounterBadge.prototype, "displayValue", 1);
+
+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$C(target, key, result);
+  return result;
+};
+class CounterBadge extends BaseCounterBadge {
+}
 __decorateClass$C([
   attr
 ], CounterBadge.prototype, "appearance", 2);
@@ -6873,28 +6891,14 @@ __decorateClass$C([
 __decorateClass$C([
   attr
 ], CounterBadge.prototype, "size", 2);
-__decorateClass$C([
-  attr({ converter: nullableNumberConverter })
-], CounterBadge.prototype, "count", 2);
-__decorateClass$C([
-  attr({ attribute: "overflow-count", converter: nullableNumberConverter })
-], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$C([
-  attr({ attribute: "show-zero", mode: "boolean" })
-], CounterBadge.prototype, "showZero", 2);
-__decorateClass$C([
-  attr({ mode: "boolean" })
-], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
 const styles$w = css`:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeSizeStyles} ${badgeFilledStyles} ${badgeGhostStyles} ${badgeBaseStyles} :host(:is([dot],[dot][appearance][size])){min-width:auto;width:6px;height:6px;padding:0}`;
 
-function composeTemplate(options = {}) {
-  return badgeTemplate({
-    defaultContent: html`${(x) => x.setCount()}`
-  });
+function counterBadgeTemplate(options = {}) {
+  return html`${startSlotTemplate(options)} <span>${(x) => x.displayValue}</span> ${endSlotTemplate(options)}`;
 }
-const template$x = composeTemplate();
+const template$x = counterBadgeTemplate();
 
 const definition$x = CounterBadge.compose({
   name: tagName$x,
@@ -8334,7 +8338,7 @@ __decorateClass$w([
   attr
 ], Dropdown.prototype, "size", 2);
 
-const styles$q = 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:${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(:not([slot]):not([popover])),::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 styles$q = 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:${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};white-space:normal;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(:not([slot]):not([popover])),::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$r = Dropdown.compose({
   name: tagName$r,