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

package/dist/web-components.d.ts

@@ -1614,6 +1614,61 @@ export declare class BaseCheckbox extends FASTElement {
     toggleChecked(force?: boolean): void;
 }
 
+/**
+ * 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;
+}
+
 /**
  * A Divider Custom HTML Element.
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
@@ -6407,19 +6462,14 @@ export declare const CompoundButtonStyles: ElementStyles;
 export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
 
 /**
- * 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.
      *
@@ -6452,61 +6502,14 @@ 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 declare interface CounterBadge extends StartEnd {
 }
 
 /**
- * CounterBadgeAppearance constants
+ * Values for the `appearance` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeAppearance: {
@@ -6515,13 +6518,14 @@ export declare const CounterBadgeAppearance: {
 };
 
 /**
- * A CounterBadge can have an appearance of filled or ghost
+ * Type for the `appearance` attribute on CounterBadge elements, based on the CounterBadgeAppearance constants.
  * @public
  */
 export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
 
 /**
- * CounterBadgeColor constants
+ * Values for the `color` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeColor: {
@@ -6536,7 +6540,7 @@ export declare const CounterBadgeColor: {
 };
 
 /**
- * A CounterBadge can be one of preset colors
+ * Type for the `color` attribute on CounterBadge elements, based on the CounterBadgeColor constants.
  * @public
  */
 export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
@@ -6549,7 +6553,8 @@ export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 export declare const CounterBadgeDefinition: FASTElementDefinition<typeof CounterBadge>;
 
 /**
- * A CounterBadge shape can be circular or rounded.
+ * Values for the `shape` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeShape: {
@@ -6558,13 +6563,15 @@ export declare const CounterBadgeShape: {
 };
 
 /**
- * A CounterBadge can be one of preset colors
+ * Type for the `shape` attribute on CounterBadge elements, based on the CounterBadgeShape constants.
+ *
  * @public
  */
 export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
 
 /**
- * A CounterBadge can be square, circular or rounded.
+ * Values for the `size` attribute on CounterBadge elements.
+ *
  * @public
  */
 export declare const CounterBadgeSize: {
@@ -6577,7 +6584,8 @@ export declare const CounterBadgeSize: {
 };
 
 /**
- * A CounterBadge can be on of several preset sizes.
+ * Type for the `size` attribute on CounterBadge elements, based on the CounterBadgeSize constants.
+ *
  * @public
  */
 export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
@@ -6588,7 +6596,15 @@ export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
 export declare const CounterBadgeStyles: ElementStyles;
 
 /**
- * The template for the Counter Badge component.
+ * The tag name for the counter badge element.
+ *
+ * @public
+ */
+export declare const CounterBadgeTagName: "fluent-counter-badge";
+
+/**
+ * The template for the fluent-counter-badge component.
+ *
  * @public
  */
 export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;