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

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 13 May 2026 04:08:24 GMT and should not be manually modified.
+This log was last generated on Tue, 19 May 2026 04:10:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-rc.20](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.20)
+
+Tue, 19 May 2026 04:10:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.19..@fluentui/web-components_v3.0.0-rc.20)
+
+### Changes
+
+- Adds white-space normal to dropdown .control div to prevent text overflow issues. ([PR #36210](https://github.com/microsoft/fluentui/pull/36210) by mibaraka@microsoft.com)
+- feat: implement BaseCounterBadge class and update CounterBadge component structure ([PR #36209](https://github.com/microsoft/fluentui/pull/36209) by 863023+radium-v@users.noreply.github.com)
+
 ## [3.0.0-rc.19](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.19)
 
-Wed, 13 May 2026 04:08:24 GMT 
+Wed, 13 May 2026 04:08:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.18..@fluentui/web-components_v3.0.0-rc.19)
 
 ### Changes

package/custom-elements.json

@@ -13173,13 +13173,131 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "./dist/esm/counter-badge/counter-badge.base.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The base class used for constructing a fluent-counter-badge custom element.\nContains the count-related state and display logic, without any visual\nappearance attributes.",
+          "name": "BaseCounterBadge",
+          "members": [
+            {
+              "kind": "field",
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "0",
+              "description": "The count to be displayed in the badge."
+            },
+            {
+              "kind": "field",
+              "name": "overflowCount",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "99",
+              "description": "The maximum count to be displayed before showing the overflow count (e.g. \"99+\")."
+            },
+            {
+              "kind": "field",
+              "name": "showZero",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether to show the badge when the count is zero. By default, the badge will be hidden when the count is zero."
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether to display the badge as a dot. When true, the badge will be displayed as a dot and the count will not be\nshown."
+            },
+            {
+              "kind": "field",
+              "name": "displayValue",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "The value to be displayed in the badge, which is determined by the `count`, `overflow-count`, and `show-zero` attributes.",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The count to be displayed in the badge.",
+              "fieldName": "count"
+            },
+            {
+              "name": "overflow-count",
+              "type": {
+                "text": "number"
+              },
+              "default": "99",
+              "description": "The maximum count to be displayed before showing the overflow count (e.g. \"99+\").",
+              "fieldName": "overflowCount"
+            },
+            {
+              "name": "show-zero",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show the badge when the count is zero. By default, the badge will be hidden when the count is zero.",
+              "fieldName": "showZero"
+            },
+            {
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to display the badge as a dot. When true, the badge will be displayed as a dot and the count will not be\nshown.",
+              "fieldName": "dot"
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "customElement": true,
+          "modulePath": "./dist/esm/counter-badge/counter-badge.base.js",
+          "definitionPath": "./dist/esm/counter-badge/define.js"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BaseCounterBadge",
+          "declaration": {
+            "name": "BaseCounterBadge",
+            "module": "src/counter-badge/counter-badge.base.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "./dist/esm/counter-badge/counter-badge.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The base class used for constructing a fluent-badge custom element",
+          "description": "A CounterBadge Custom HTML Element.\nBased on BaseCounterBadge and includes style and layout specific attributes.",
           "name": "CounterBadge",
           "members": [
             {
@@ -13238,12 +13356,11 @@
               },
               "privacy": "public",
               "default": "0",
-              "description": "The count the badge should have."
-            },
-            {
-              "kind": "method",
-              "name": "countChanged",
-              "privacy": "protected"
+              "description": "The count to be displayed in the badge.",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             },
             {
               "kind": "field",
@@ -13253,12 +13370,11 @@
               },
               "privacy": "public",
               "default": "99",
-              "description": "Max number to be displayed"
-            },
-            {
-              "kind": "method",
-              "name": "overflowCountChanged",
-              "privacy": "protected"
+              "description": "The maximum count to be displayed before showing the overflow count (e.g. \"99+\").",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             },
             {
               "kind": "field",
@@ -13268,7 +13384,11 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "If the badge should be shown when count is 0"
+              "description": "Whether to show the badge when the count is zero. By default, the badge will be hidden when the count is zero.",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             },
             {
               "kind": "field",
@@ -13278,7 +13398,25 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "If a dot should be displayed without the count"
+              "description": "Whether to display the badge as a dot. When true, the badge will be displayed as a dot and the count will not be\nshown.",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "displayValue",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "The value to be displayed in the badge, which is determined by the `count`, `overflow-count`, and `show-zero` attributes.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             }
           ],
           "attributes": [
@@ -13332,8 +13470,12 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "The count the badge should have.",
-              "fieldName": "count"
+              "description": "The count to be displayed in the badge.",
+              "fieldName": "count",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             },
             {
               "name": "overflow-count",
@@ -13341,8 +13483,12 @@
                 "text": "number"
               },
               "default": "99",
-              "description": "Max number to be displayed",
-              "fieldName": "overflowCount"
+              "description": "The maximum count to be displayed before showing the overflow count (e.g. \"99+\").",
+              "fieldName": "overflowCount",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             },
             {
               "name": "show-zero",
@@ -13350,8 +13496,12 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If the badge should be shown when count is 0",
-              "fieldName": "showZero"
+              "description": "Whether to show the badge when the count is zero. By default, the badge will be hidden when the count is zero.",
+              "fieldName": "showZero",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             },
             {
               "name": "dot",
@@ -13359,18 +13509,27 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If a dot should be displayed without the count",
-              "fieldName": "dot"
+              "description": "Whether to display the badge as a dot. When true, the badge will be displayed as a dot and the count will not be\nshown.",
+              "fieldName": "dot",
+              "inheritedFrom": {
+                "name": "BaseCounterBadge",
+                "module": "src/counter-badge/counter-badge.base.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "FASTElement",
-            "package": "@microsoft/fast-element"
+            "name": "BaseCounterBadge",
+            "module": "/src/counter-badge/counter-badge.base.js"
           },
           "tagName": "fluent-counter-badge",
           "customElement": true,
           "modulePath": "./dist/esm/counter-badge/counter-badge.js",
-          "definitionPath": "./dist/esm/counter-badge/define.js"
+          "definitionPath": "./dist/esm/counter-badge/define.js",
+          "cssProperties": [],
+          "cssParts": [],
+          "cssStates": [],
+          "events": [],
+          "slots": []
         }
       ],
       "exports": [
@@ -28658,6 +28817,22 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "./dist/esm/counter-badge/define.js",
+      "deprecated": false,
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "BaseCounterBadge",
+          "declaration": {
+            "name": "BaseCounterBadge",
+            "module": "./dist/esm/counter-badge/counter-badge.base.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "./dist/esm/counter-badge/define.js",

package/dist/esm/badge/index.d.ts

@@ -1,6 +1,5 @@
+export { definition as BadgeDefinition } from './badge.definition.js';
 export { Badge } from './badge.js';
-export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
-export { template as BadgeTemplate } from './badge.template.js';
+export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize, tagName as BadgeTagName, type BadgeOptions, } from './badge.options.js';
 export { styles as BadgeStyles } from './badge.styles.js';
-export { definition as BadgeDefinition } from './badge.definition.js';
-export { tagName as BadgeTagName } from './badge.options.js';
+export { template as BadgeTemplate } from './badge.template.js';

package/dist/esm/badge/index.js

@@ -1,7 +1,6 @@
+export { definition as BadgeDefinition } from './badge.definition.js';
 export { Badge } from './badge.js';
-export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
-export { template as BadgeTemplate } from './badge.template.js';
+export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize, tagName as BadgeTagName, } from './badge.options.js';
 export { styles as BadgeStyles } from './badge.styles.js';
-export { definition as BadgeDefinition } from './badge.definition.js';
-export { tagName as BadgeTagName } from './badge.options.js';
+export { template as BadgeTemplate } from './badge.template.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,IAAI,YAAY,GAExB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/counter-badge/counter-badge.base.d.ts

@@ -0,0 +1,55 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constructing a fluent-counter-badge custom element.
+ * Contains the count-related state and display logic, without any visual
+ * appearance attributes.
+ *
+ * @public
+ */
+export declare class BaseCounterBadge extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The count to be displayed in the badge.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `count`
+     */
+    count: number;
+    /**
+     * The maximum count to be displayed before showing the overflow count (e.g. "99+").
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `overflow-count`
+     */
+    overflowCount: number;
+    /**
+     * Whether to show the badge when the count is zero. By default, the badge will be hidden when the count is zero.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `show-zero`
+     */
+    showZero: boolean;
+    /**
+     * Whether to display the badge as a dot. When true, the badge will be displayed as a dot and the count will not be
+     * shown.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `dot`
+     */
+    dot: boolean;
+    /**
+     * The value to be displayed in the badge, which is determined by the `count`, `overflow-count`, and `show-zero` attributes.
+     *
+     * @public
+     */
+    get displayValue(): string | undefined;
+}

package/dist/esm/counter-badge/counter-badge.base.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter, volatile } from '@microsoft/fast-element';
+/**
+ * The base class used for constructing a fluent-counter-badge custom element.
+ * Contains the count-related state and display logic, without any visual
+ * appearance attributes.
+ *
+ * @public
+ */
+export class BaseCounterBadge extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * The count to be displayed in the badge.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `count`
+         */
+        this.count = 0;
+        /**
+         * The maximum count to be displayed before showing the overflow count (e.g. "99+").
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `overflow-count`
+         */
+        this.overflowCount = 99;
+        /**
+         * Whether to show the badge when the count is zero. By default, the badge will be hidden when the count is zero.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `show-zero`
+         */
+        this.showZero = false;
+        /**
+         * Whether to display the badge as a dot. When true, the badge will be displayed as a dot and the count will not be
+         * shown.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `dot`
+         */
+        this.dot = false;
+    }
+    /**
+     * The value to be displayed in the badge, which is determined by the `count`, `overflow-count`, and `show-zero` attributes.
+     *
+     * @public
+     */
+    get displayValue() {
+        const count = this.count ?? 0;
+        if ((!this.showZero && count === 0) || this.dot) {
+            return '';
+        }
+        if (this.overflowCount > 0 && count > this.overflowCount) {
+            return `${this.overflowCount}+`;
+        }
+        return `${count}`;
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseCounterBadge.prototype, "count", void 0);
+__decorate([
+    attr({ attribute: 'overflow-count', converter: nullableNumberConverter })
+], BaseCounterBadge.prototype, "overflowCount", void 0);
+__decorate([
+    attr({ attribute: 'show-zero', mode: 'boolean' })
+], BaseCounterBadge.prototype, "showZero", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseCounterBadge.prototype, "dot", void 0);
+__decorate([
+    volatile
+], BaseCounterBadge.prototype, "displayValue", null);
+//# sourceMappingURL=counter-badge.base.js.map

package/dist/esm/counter-badge/counter-badge.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-badge.base.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE/F;;;;;;GAMG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAAjD;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;WAMG;QAEI,UAAK,GAAW,CAAC,CAAC;QAEzB;;;;;;WAMG;QAEI,kBAAa,GAAW,EAAE,CAAC;QAElC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;;WAOG;QAEI,QAAG,GAAY,KAAK,CAAC;IAqB9B,CAAC;IAnBC;;;;OAIG;IAEH,IAAW,YAAY;QACrB,MAAM,KAAK,GAAW,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAEtC,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YAChD,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACzD,OAAO,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC;QAClC,CAAC;QAED,OAAO,GAAG,KAAK,EAAE,CAAC;IACpB,CAAC;CACF;AApDQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;+CACpB;AAUlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;uDACxC;AAU3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDACjB;AAW1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CACE;AAQ5B;IADC,QAAQ;oDAaR"}

package/dist/esm/counter-badge/counter-badge.d.ts

@@ -1,20 +1,15 @@
-import { FASTElement } from '@microsoft/fast-element';
 import { StartEnd } from '../patterns/start-end.js';
+import { BaseCounterBadge } from './counter-badge.base.js';
 import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize } from './counter-badge.options.js';
 /**
- * The base class used for constructing a fluent-badge custom element
+ * A CounterBadge Custom HTML Element.
+ * Based on BaseCounterBadge and includes style and layout specific attributes.
  *
  * @tag fluent-counter-badge
  *
  * @public
  */
-export declare class CounterBadge extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
+export declare class CounterBadge extends BaseCounterBadge {
     /**
      * The appearance the badge should have.
      *
@@ -47,54 +42,6 @@ export declare class CounterBadge extends FASTElement {
      * HTML Attribute: size
      */
     size?: CounterBadgeSize;
-    /**
-     * The count the badge should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: count
-     */
-    count: number;
-    protected countChanged(): void;
-    /**
-     * Max number to be displayed
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: overflow-count
-     */
-    overflowCount: number;
-    protected overflowCountChanged(): void;
-    /**
-     * If the badge should be shown when count is 0
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: show-zero
-     */
-    showZero: boolean;
-    /**
-     * If a dot should be displayed without the count
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: dot
-     */
-    dot: boolean;
-    /**
-     * 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(): string | void;
 }
-/**
- * Mark internal because exporting class and interface of the same name
- * confuses API extractor.
- * TODO: Below will be unnecessary when Badge class gets updated
- * @internal
- */
 export interface CounterBadge extends StartEnd {
 }