@fluentui/web-components 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/esm/rating-display/rating-display.template.js

@@ -0,0 +1,32 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Reusable star icon symbol
+ */
+const star = html `
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+    <symbol id="star" viewBox="0 0 12 12">
+      <path
+        d="M5.28347 1.54556C5.57692 0.95096 6.42479 0.950961 6.71825 1.54556L7.82997 3.79817L10.3159 4.15939C10.9721 4.25474 11.2341 5.06112 10.7592 5.52394L8.96043 7.27736L9.38507 9.75321C9.49716 10.4067 8.81122 10.9051 8.22431 10.5966L6.00086 9.42761L3.7774 10.5966C3.19049 10.9051 2.50455 10.4067 2.61664 9.75321L3.04128 7.27736L1.24246 5.52394C0.767651 5.06111 1.02966 4.25474 1.68584 4.15939L4.17174 3.79817L5.28347 1.54556Z"
+      />
+    </symbol>
+  </svg>
+`;
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export function ratingDisplayTemplate() {
+    return html `
+    ${star} ${x => html `${html.partial(x.generateIcons())}`}
+    <slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot>
+    <slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>
+  `;
+}
+/**
+ * The template for the Rating Display component.
+ *
+ * @public
+ */
+export const template = ratingDisplayTemplate();
+//# sourceMappingURL=rating-display.template.js.map

package/dist/esm/rating-display/rating-display.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;CAQhB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;MACV,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE;sEACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}

package/dist/esm/styles/partials/badge.partials.js

@@ -2,7 +2,6 @@ import { css } from '@microsoft/fast-element';
 import { display } from '../../utils/index.js';
 import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground1Static, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
 import { dangerState, extraLargeState, extraSmallState, ghostState, importantState, informativeState, largeState, outlineState, severeState, smallState, subtleState, successState, tintState, tinyState, warningState, } from '../states/index.js';
-const textPadding = spacingHorizontalXXS;
 export const badgeBaseStyles = css.partial `
   ${display('inline-flex')} :host {
     position: relative;
@@ -15,7 +14,7 @@ export const badgeBaseStyles = css.partial `
     line-height: ${lineHeightBase200};
     min-width: 20px;
     height: 20px;
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
     border-radius: ${borderRadiusCircular};
     border-color: ${colorTransparentStroke};
     background-color: ${colorBrandBackground};
@@ -72,7 +71,7 @@ export const badgeSizeStyles = css.partial `
     height: 16px;
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
-    padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
   }
   :host(${smallState}) ::slotted(svg) {
     font-size: 12px;
@@ -82,7 +81,7 @@ export const badgeSizeStyles = css.partial `
     height: 24px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
   }
   :host(${largeState}) ::slotted(svg) {
     font-size: 16px;
@@ -92,7 +91,7 @@ export const badgeSizeStyles = css.partial `
     height: 32px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
   }
   :host(${extraLargeState}) ::slotted(svg) {
     font-size: 20px;

package/dist/esm/styles/partials/badge.partials.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}

package/dist/esm/styles/states/index.js

@@ -149,6 +149,16 @@ export const importantState = css.partial `:is([state--important], :state(import
  * @public
  */
 export const informativeState = css.partial `:is([state--informative], :state(informative))`;
+/**
+ * Selector for the `marigold` state.
+ * @public
+ */
+export const marigoldState = css.partial `:is([state--marigold], :state(marigold))`;
+/**
+ * Selector for the `neutral` state.
+ * @public
+ */
+export const neutralState = css.partial `:is([state--neutral], :state(neutral))`;
 /**
  * Selector for the `severe` state.
  * @public
@@ -174,4 +184,14 @@ export const verticalState = css.partial `:is([state--vertical], :state(vertical
  * @public
  */
 export const horizontalState = css.partial `:is([state--horizontal], :state(horizontal))`;
+/**
+ * Selector for the `singleline` state.
+ * @public
+ */
+export const singleLineState = css.partial `:is([state--singleline], :state(singleline))`;
+/**
+ * Selector for the `multiline` state.
+ * @public
+ */
+export const multiLineState = css.partial `:is([state--multiline], :state(multiline))`;
 //# sourceMappingURL=index.js.map

package/dist/esm/styles/states/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/states/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/states/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/theme/set-theme.bench.js

@@ -0,0 +1,23 @@
+import { measurePerformance } from '@tensile-perf/web-components';
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+import { setTheme } from './set-theme.js';
+const tests = {
+    mount: ({ onComplete }) => {
+        const { startMeasure, endMeasure } = measurePerformance();
+        startMeasure();
+        // Newly set themes
+        setTheme(webLightTheme);
+        setTheme(webDarkTheme);
+        setTheme(teamsDarkTheme);
+        setTheme(teamsLightTheme);
+        // Cached themes
+        setTheme(webLightTheme);
+        setTheme(webDarkTheme);
+        setTheme(teamsDarkTheme);
+        setTheme(teamsLightTheme);
+        endMeasure();
+        onComplete();
+    },
+};
+export { tests };
+//# sourceMappingURL=set-theme.bench.js.map

package/dist/esm/theme/set-theme.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-theme.bench.js","sourceRoot":"","sources":["../../../src/theme/set-theme.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,8BAA8B,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,KAAK,GAAuC;IAChD,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;QACxB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,kBAAkB,EAAE,CAAC;QAE1D,YAAY,EAAE,CAAC;QAEf,mBAAmB;QACnB,QAAQ,CAAC,aAAa,CAAC,CAAC;QACxB,QAAQ,CAAC,YAAY,CAAC,CAAC;QACvB,QAAQ,CAAC,cAAc,CAAC,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,CAAC;QAE1B,gBAAgB;QAChB,QAAQ,CAAC,aAAa,CAAC,CAAC;QACxB,QAAQ,CAAC,YAAY,CAAC,CAAC;QACvB,QAAQ,CAAC,cAAc,CAAC,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,CAAC;QAE1B,UAAU,EAAE,CAAC;QAEb,UAAU,EAAE,CAAC;IACf,CAAC;CACF,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/esm/theme/set-theme.js

@@ -1,32 +1,48 @@
 import * as tokens from './design-tokens.js';
 const tokenNames = Object.keys(tokens);
+const SUPPORTS_REGISTER_PROPERTY = 'registerProperty' in CSS;
+const SUPPORTS_ADOPTED_STYLE_SHEETS = 'adoptedStyleSheets' in document;
+const themeStyleSheet = new CSSStyleSheet();
+const themeStyleTextMap = new Map();
 /**
  * Sets the theme tokens on defaultNode.
  * @param theme - Flat object of theme token values.
  * @internal
  */
 export const setTheme = (theme) => {
-    for (const t of tokenNames) {
-        let registered = false;
-        if ('registerProperty' in CSS) {
-            try {
-                CSS.registerProperty({
-                    name: `--${t}`,
-                    inherits: true,
-                    initialValue: theme[t],
-                });
-                registered = true;
-            }
-            catch {
-                // Do nothing.
+    // Fallback to setting token custom properties on `<html>` element’s `style`
+    // attribute, only checking the support of  `document.adoptedStyleSheets`
+    // here because it has broader support than `CSS.registerProperty()`, which
+    // is checked later.
+    if (!SUPPORTS_ADOPTED_STYLE_SHEETS) {
+        setThemeFor(document.documentElement, theme);
+        return;
+    }
+    if (!themeStyleTextMap.has(theme)) {
+        const tokenDeclarations = [];
+        for (const t of tokenNames) {
+            if (SUPPORTS_REGISTER_PROPERTY) {
+                try {
+                    CSS.registerProperty({
+                        name: `--${t}`,
+                        inherits: true,
+                        initialValue: theme[t],
+                    });
+                }
+                catch { }
             }
+            tokenDeclarations.push(`--${t}: ${theme[t]};`);
         }
-        if (!registered) {
-            // TODO: Find a better way to update the values. Current approach adds
-            // lots of code to the `style` attribute on `<body>`. Maybe look into
-            // `document.adoptedStyleSheets`.
-            setThemeFor(document.body, theme);
-        }
+        themeStyleTextMap.set(theme, `html{${tokenDeclarations.join('')}}`);
+    }
+    if (!document.adoptedStyleSheets.includes(themeStyleSheet)) {
+        document.adoptedStyleSheets.push(themeStyleSheet);
+    }
+    else {
+        // The very first call to `setTheme()` within a document doesn’t need to
+        // call `replaceSync()`, because `CSS.registerProperty()` above is
+        // sufficient to set the tokens.
+        themeStyleSheet.replaceSync(themeStyleTextMap.get(theme));
     }
 };
 /**

package/dist/esm/theme/set-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC7B,IAAI;gBACF,GAAG,CAAC,gBAAgB,CAAC;oBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;oBACd,QAAQ,EAAE,IAAI;oBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;iBACjC,CAAC,CAAC;gBACH,UAAU,GAAG,IAAI,CAAC;aACnB;YAAC,MAAM;gBACN,cAAc;aACf;SACF;QAED,IAAI,CAAC,UAAU,EAAE;YACf,sEAAsE;YACtE,qEAAqE;YACrE,iCAAiC;YACjC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SACnC;KACF;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}
+{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D,MAAM,0BAA0B,GAAG,kBAAkB,IAAI,GAAG,CAAC;AAC7D,MAAM,6BAA6B,GAAG,oBAAoB,IAAI,QAAQ,CAAC;AACvE,MAAM,eAAe,GAAG,IAAI,aAAa,EAAE,CAAC;AAC5C,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAiB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,4EAA4E;IAC5E,yEAAyE;IACzE,2EAA2E;IAC3E,oBAAoB;IACpB,IAAI,CAAC,6BAA6B,EAAE;QAClC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACjC,MAAM,iBAAiB,GAAa,EAAE,CAAC;QAEvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;YAC1B,IAAI,0BAA0B,EAAE;gBAC9B,IAAI;oBACF,GAAG,CAAC,gBAAgB,CAAC;wBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;wBACd,QAAQ,EAAE,IAAI;wBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;qBACjC,CAAC,CAAC;iBACJ;gBAAC,MAAM,GAAE;aACX;YACD,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAW,GAAG,CAAC,CAAC;SAC1D;QAED,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACrE;IAED,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;QAC1D,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACnD;SAAM;QACL,wEAAwE;QACxE,kEAAkE;QAClE,gCAAgC;QAChC,eAAe,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC,CAAC;KAC5D;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}

package/dist/web-components.d.ts

@@ -4655,6 +4655,158 @@ export declare const DividerStyles: ElementStyles;
  */
 export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
+/**
+ * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
+ * @extends FASTElement
+ *
+ * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
+ * @attr {DrawerPosition} position - Sets the position of the drawer (start/end).
+ * @attr {DrawerSize} size - Sets the size of the drawer (small/medium/large).
+ * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
+ * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
+ *
+ * @csspart dialog - The dialog element of the drawer.
+ *
+ * @slot - Default slot for the content of the drawer.
+ *
+ * @fires toggle - Event emitted after the dialog's open state changes.
+ * @fires beforetoggle - Event emitted before the dialog's open state changes.
+ *
+ * @method show - Method to show the drawer.
+ * @method hide - Method to hide the drawer.
+ * @method clickHandler - Handles click events on the drawer.
+ * @method emitToggle - Emits an event after the dialog's open state changes.
+ * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
+ *
+ * @summary A component that provides a drawer for displaying content in a side panel.
+ *
+ * @tag fluent-drawer
+ */
+export declare class Drawer extends FASTElement {
+    /**
+     * @public
+     * Determines whether the drawer should be displayed as modal or non-modal
+     * When rendered as a modal, an overlay is applied over the rest of the view.
+     */
+    type: DrawerType;
+    /**
+     * @public
+     * The ID of the element that labels the drawer.
+     */
+    ariaLabelledby?: string;
+    /**
+     * @public
+     * The ID of the element that describes the drawer.
+     */
+    ariaDescribedby?: string;
+    /**""
+     * @public
+     * @defaultValue start
+     * Sets the position of the drawer (start/end).
+     */
+    position: DrawerPosition;
+    /**
+     * @public
+     * @defaultValue medium
+     * Sets the size of the drawer (small/medium/large).
+     */
+    size: DrawerSize;
+    /**
+     * @public
+     * The dialog element.
+     */
+    dialog: HTMLDialogElement;
+    /**
+     * @public
+     * Method to emit an event after the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitToggle: () => void;
+    /**
+     * @public
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     */
+    emitBeforeToggle: () => void;
+    /**
+     * @public
+     * Method to show the drawer
+     */
+    show(): void;
+    /**
+     * @public
+     * Method to hide the drawer
+     */
+    hide(): void;
+    /**
+     * @public
+     * @param event - The click event
+     * @returns boolean - Always returns true
+     * Handles click events on the drawer.
+     */
+    clickHandler(event: Event): boolean;
+}
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-drawer>
+ */
+export declare const DrawerDefinition: FASTElementDefinition<typeof Drawer>;
+
+/**
+ * A drawer can be positioned on the left or right side of the viewport.
+ */
+export declare const DrawerPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+
+/**
+ * The position of the drawer.
+ * @public
+ */
+export declare type DrawerPosition = ValuesOf<typeof DrawerPosition>;
+
+/**
+ * A drawer can be different sizes
+ */
+export declare const DrawerSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly full: "full";
+};
+
+/**
+ * The size of the drawer.
+ * @public
+ */
+export declare type DrawerSize = ValuesOf<typeof DrawerSize>;
+
+/** Drawer styles
+ * @public
+ */
+export declare const DrawerStyles: ElementStyles;
+
+export declare const DrawerTemplate: ElementViewTemplate<Drawer>;
+
+/**
+ * A drawer can be different sizes
+ */
+export declare const DrawerType: {
+    readonly nonModal: "non-modal";
+    readonly modal: "modal";
+    readonly inline: "inline";
+};
+
+/**
+ * The size of the drawer.
+ * @public
+ */
+export declare type DrawerType = ValuesOf<typeof DrawerType>;
+
 /**
  * CSS custom property value for the {@link @fluentui/tokens#durationFast | `durationFast`} design token.
  * @public
@@ -6455,6 +6607,154 @@ export declare const RadioStyles: ElementStyles;
 
 export declare const RadioTemplate: ElementViewTemplate<Radio>;
 
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ * @public
+ */
+export declare class RatingDisplay extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The color of the rating display icons.
+     *
+     * @public
+     * @default `marigold`
+     * @remarks
+     * HTML Attribute: `color`
+     */
+    color?: RatingDisplayColor;
+    /**
+     * Handles changes to the color attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    colorChanged(prev: RatingDisplayColor | undefined, next: RatingDisplayColor | undefined): void;
+    /**
+     * Renders a single filled icon with a label next to it.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `compact`
+     */
+    compact: boolean;
+    /**
+     * The number of ratings.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `count`
+     */
+    count?: number;
+    /**
+     * The maximum possible value of the rating.
+     * This attribute determines the number of icons displayed.
+     * Must be a whole number greater than 1.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * The size of the component.
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: RatingDisplaySize;
+    /**
+     * Handles changes to the size attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    sizeChanged(prev: RatingDisplaySize | undefined, next: RatingDisplaySize | undefined): void;
+    /**
+     * The value of the rating.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    private intlNumberFormatter;
+    constructor();
+    /**
+     * Returns "count" as string, formatted according to the locale.
+     *
+     * @internal
+     */
+    get formattedCount(): string;
+    /**
+     * Generates the icon SVG elements based on the "max" attribute.
+     *
+     * @internal
+     */
+    generateIcons(): string;
+}
+
+/**
+ * The color of the Rating Display items can be `neutral`, `brand`, or `marigold`.
+ * @public
+ */
+export declare const RatingDisplayColor: {
+    readonly neutral: "neutral";
+    readonly brand: "brand";
+    readonly marigold: "marigold";
+};
+
+/**
+ * The Rating Display items can be one of several colors.
+ * @public
+ */
+export declare type RatingDisplayColor = ValuesOf<typeof RatingDisplayColor>;
+
+/**
+ * The definition for the Fluent Rating Display component.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-rating-display>`
+ */
+export declare const RatingDisplayDefinition: FASTElementDefinition<typeof RatingDisplay>;
+
+/**
+ * The size of a Rating Display can be `small`, `medium`, or `large`.
+ * @public
+ */
+export declare const RatingDisplaySize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * A Rating Display can be one of several preset sizes.
+ * @public
+ */
+export declare type RatingDisplaySize = ValuesOf<typeof RatingDisplaySize>;
+
+/**
+ * The styles for the Rating Display component.
+ *
+ * @public
+ */
+export declare const RatingDisplayStyles: ElementStyles;
+
+/**
+ * The template for the Rating Display component.
+ *
+ * @public
+ */
+export declare const RatingDisplayTemplate: ElementViewTemplate<RatingDisplay>;
+
 /**
  * @internal
  */