@fluentui/web-components 3.0.0-beta.36 → 3.0.0-beta.38

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":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAAA,sDAAsD,CAAC;AAEpG;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAAA,oDAAoD,CAAC;AAEjG;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,0CAA0C,CAAC;AAEnF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA,4CAA4C,CAAC;AAEtF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE5F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,0CAA0C,CAAC;AAEnF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,4CAA4C,CAAC;AAErF;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,kCAAkC,CAAC;AAE3E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAA,oCAAoC,CAAC;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA,4CAA4C,CAAC;AAEtF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA,gDAAgD,CAAC;AAE5F;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAE7E;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,0CAA0C,CAAC;AAEnF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA,8CAA8C,CAAC"}
+{"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

@@ -6607,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
  */