@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/esm/avatar/avatar.d.ts

@@ -0,0 +1,98 @@
+import { BaseAvatar } from './avatar.base.js';
+import { type AvatarActive, type AvatarAppearance, AvatarColor, AvatarNamedColor, type AvatarShape, type AvatarSize } from './avatar.options.js';
+/**
+ * An Avatar Custom HTML Element.
+ * Based on BaseAvatar and includes style and layout specific attributes
+ *
+ * @tag fluent-avatar
+ *
+ * @public
+ */
+export declare class Avatar extends BaseAvatar {
+    /**
+     * Optional activity indicator
+     * * active: the avatar will be decorated according to activeAppearance
+     * * inactive: the avatar will be reduced in size and partially transparent
+     * * undefined: normal display
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: active
+     */
+    active?: AvatarActive | undefined;
+    /**
+     * The avatar can have a circular or square shape.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: AvatarShape | undefined;
+    /**
+     * The appearance when `active="active"`
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: AvatarAppearance | undefined;
+    /**
+     * Size of the avatar in pixels.
+     *
+     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
+     * based on design guidelines for the Avatar control.
+     *
+     * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
+     * to override the rendered size.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     *
+     */
+    size?: AvatarSize | undefined;
+    /**
+     * The color when displaying either an icon or initials.
+     * * neutral (default): gray
+     * * brand: color from the brand palette
+     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
+     * * [AvatarNamedColor]: a specific color from the theme
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color?: AvatarColor | undefined;
+    /**
+     * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
+     * Use this when a name is not available, but there is another unique identifier that can be used instead.
+     */
+    colorId?: AvatarNamedColor | undefined;
+    /**
+     * Holds the current color state
+     */
+    private currentColor;
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Generates and sets the initials for the template
+     * @internal
+     */
+    generateInitials(): string | void;
+    /**
+     * Sets the data-color attribute used for the visual presentation
+     * @internal
+     */
+    generateColor(): void;
+    /**
+     * An array of the available Avatar named colors
+     */
+    static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/esm/avatar/avatar.js

@@ -1,83 +1,89 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, Observable } from '@microsoft/fast-element';
 import { getInitials } from '../utils/get-initials.js';
+import { BaseAvatar } from './avatar.base.js';
 import { AvatarColor, AvatarNamedColor, } from './avatar.options.js';
 /**
- * The base class used for constructing a fluent-avatar custom element
+ * An Avatar Custom HTML Element.
+ * Based on BaseAvatar and includes style and layout specific attributes
+ *
+ * @tag fluent-avatar
+ *
  * @public
  */
-export class Avatar extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The color when displaying either an icon or initials.
-         * * neutral (default): gray
-         * * brand: color from the brand palette
-         * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
-         * * [AvatarNamedColor]: a specific color from the theme
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: color
-         */
-        this.color = 'neutral';
-    }
+export class Avatar extends BaseAvatar {
     /**
-     * Sets the data-color attribute used for the visual presentation
+     * Handles changes to observable properties
      * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
      */
-    generateColor() {
-        var _a, _b;
-        if (!this.color) {
-            return;
+    handleChange(source, propertyName) {
+        switch (propertyName) {
+            case 'color':
+            case 'colorId':
+                this.generateColor();
+                break;
+            default:
+                break;
         }
-        return this.color === AvatarColor.colorful
-            ? Avatar.colors[getHashCode((_b = (_a = this.colorId) !== null && _a !== void 0 ? _a : this.name) !== null && _b !== void 0 ? _b : '') % Avatar.colors.length]
-            : this.color;
     }
     /**
      * Generates and sets the initials for the template
      * @internal
      */
     generateInitials() {
-        var _a, _b;
         if (!this.name && !this.initials) {
             return;
         }
         // size can be undefined since we default it in CSS only
-        const size = (_a = this.size) !== null && _a !== void 0 ? _a : 32;
-        return ((_b = this.initials) !== null && _b !== void 0 ? _b : getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
-            firstInitialOnly: size <= 16,
-        }));
+        const size = this.size ?? 32;
+        return (this.initials ??
+            getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
+                firstInitialOnly: size <= 16,
+            }));
+    }
+    /**
+     * Sets the data-color attribute used for the visual presentation
+     * @internal
+     */
+    generateColor() {
+        const colorful = this.color === AvatarColor.colorful;
+        const prev = this.currentColor;
+        this.currentColor =
+            colorful && this.colorId
+                ? this.colorId
+                : colorful
+                    ? Avatar.colors[getHashCode(this.name ?? '') % Avatar.colors.length]
+                    : this.color ?? AvatarColor.neutral;
+        this.setAttribute('data-color', this.currentColor);
+    }
+    /**
+     * An array of the available Avatar named colors
+     */
+    static { this.colors = Object.values(AvatarNamedColor); }
+    connectedCallback() {
+        super.connectedCallback();
+        Observable.getNotifier(this).subscribe(this);
+        this.generateColor();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Observable.getNotifier(this).unsubscribe(this);
     }
 }
-/**
- * An array of the available Avatar named colors
- */
-Avatar.colors = Object.values(AvatarNamedColor);
-__decorate([
-    attr
-], Avatar.prototype, "name", void 0);
 __decorate([
     attr
-], Avatar.prototype, "initials", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], Avatar.prototype, "size", void 0);
+], Avatar.prototype, "active", void 0);
 __decorate([
     attr
 ], Avatar.prototype, "shape", void 0);
-__decorate([
-    attr
-], Avatar.prototype, "active", void 0);
 __decorate([
     attr
 ], Avatar.prototype, "appearance", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Avatar.prototype, "size", void 0);
 __decorate([
     attr
 ], Avatar.prototype, "color", void 0);

package/dist/esm/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAGL,WAAW,EACX,gBAAgB,GAGjB,MAAM,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QAuEE;;;;;;;;;;WAUG;QAEI,UAAK,GAAiB,SAAS,CAAC;IA+CzC,CAAC;IAtCC;;;OAGG;IACI,aAAa;;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QAED,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,QAAQ;YACxC,CAAC,CAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAiB;YACrG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACjB,CAAC;IAED;;;OAGG;IACI,gBAAgB;;QACrB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChC,OAAO;SACR;QAED,wDAAwD;QACxD,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;QAE7B,OAAO,CACL,MAAA,IAAI,CAAC,QAAQ,mCACb,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAE,IAA+B,CAAC,CAAC,SAAS,KAAK,KAAK,EAAE;YACpG,gBAAgB,EAAE,IAAI,IAAI,EAAE;SAC7B,CAAC,CACH,CAAC;IACJ,CAAC;;AAED;;GAEG;AACW,aAAM,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAxHvD;IADC,IAAI;oCAC4B;AAUjC;IADC,IAAI;wCACgC;AAiBrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;oCACR;AAUrC;IADC,IAAI;qCACkC;AAavC;IADC,IAAI;sCACoC;AAUzC;IADC,IAAI;0CAC4C;AAcjD;IADC,IAAI;qCACkC;AAOvC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;uCACc;AA0ChD,2BAA2B;AAC3B,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IAC1C,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,KAAK,IAAI,GAAG,GAAW,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE;QACtD,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;QACtB,QAAQ,IAAI,CAAC,EAAE,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,iCAAiC;KACnF;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/avatar/avatar.ts"],"names":[],"mappings":"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"}

package/dist/esm/avatar/avatar.options.d.ts

@@ -0,0 +1,142 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * The Avatar "active" state
+ */
+export declare const AvatarActive: {
+    readonly active: "active";
+    readonly inactive: "inactive";
+};
+/**
+ * The types of Avatar active state
+ */
+export type AvatarActive = ValuesOf<typeof AvatarActive>;
+/**
+ * The Avatar Shape
+ */
+export declare const AvatarShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+/**
+ * The types of Avatar Shape
+ */
+export type AvatarShape = ValuesOf<typeof AvatarShape>;
+/**
+ * The Avatar Appearance when "active"
+ */
+export declare const AvatarAppearance: {
+    readonly ring: "ring";
+    readonly shadow: "shadow";
+    readonly ringShadow: "ring-shadow";
+};
+/**
+ * The appearance when "active"
+ */
+export type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
+/**
+ * A specific named color for the Avatar
+ */
+export declare const AvatarNamedColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+};
+/**
+ * An avatar can be one of named colors
+ * @public
+ */
+export type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+/**
+ * Supported Avatar colors
+ */
+export declare const AvatarColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+    readonly neutral: "neutral";
+    readonly brand: "brand";
+    readonly colorful: "colorful";
+};
+/**
+ * The Avatar Color
+ */
+export type AvatarColor = ValuesOf<typeof AvatarColor>;
+/**
+ * The Avatar Sizes
+ * @public
+ */
+export declare const AvatarSize: {
+    readonly _16: 16;
+    readonly _20: 20;
+    readonly _24: 24;
+    readonly _28: 28;
+    readonly _32: 32;
+    readonly _36: 36;
+    readonly _40: 40;
+    readonly _48: 48;
+    readonly _56: 56;
+    readonly _64: 64;
+    readonly _72: 72;
+    readonly _96: 96;
+    readonly _120: 120;
+    readonly _128: 128;
+};
+/**
+ * A Avatar can be on of several preset sizes.
+ * @public
+ */
+export type AvatarSize = ValuesOf<typeof AvatarSize>;

package/dist/esm/avatar/avatar.template.d.ts

@@ -0,0 +1,8 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { Avatar } from './avatar.js';
+/**
+ * The template for the Avatar component.
+ * @public
+ */
+export declare function avatarTemplate<T extends Avatar>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Avatar>;

package/dist/esm/avatar/avatar.template.js

@@ -18,10 +18,8 @@ const defaultIconTemplate = html `<svg
  */
 export function avatarTemplate() {
     return html `
-    <template role="img" data-color=${x => x.generateColor()}>
-      <slot>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
-      <slot name="badge"></slot>
-    </template>
+    <slot>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
+    <slot name="badge"></slot>
   `;
 }
 export const template = avatarTemplate();

package/dist/esm/avatar/avatar.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../src/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;;OAYzB,CAAC;AAER;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;sCACsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;cAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;GAGnF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"avatar.template.js","sourceRoot":"","sources":["../../../src/avatar/avatar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;;OAYzB,CAAC;AAER;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;YACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC;;GAEjF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,6 @@
+export { Avatar } from './avatar.js';
+export { BaseAvatar } from './avatar.base.js';
+export { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarShape, AvatarSize, } from './avatar.options.js';
+export { template as AvatarTemplate } from './avatar.template.js';
+export { styles as AvatarStyles } from './avatar.styles.js';
+export { definition as AvatarDefinition } from './avatar.definition.js';

package/dist/esm/avatar/index.js

@@ -1,5 +1,6 @@
-export * from './avatar.js';
-export * from './avatar.options.js';
+export { Avatar } from './avatar.js';
+export { BaseAvatar } from './avatar.base.js';
+export { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarShape, AvatarSize, } from './avatar.options.js';
 export { template as AvatarTemplate } from './avatar.template.js';
 export { styles as AvatarStyles } from './avatar.styles.js';
 export { definition as AvatarDefinition } from './avatar.definition.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/badge/badge.bench.js

@@ -0,0 +1,11 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './badge.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const badge = document.createElement('fluent-badge');
+    badge.appendChild(document.createTextNode('Badge'));
+    return badge;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=badge.bench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.bench.js","sourceRoot":"","sources":["../../../src/badge/badge.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

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

@@ -0,0 +1,51 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '../patterns/index.js';
+import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export declare class Badge extends FASTElement {
+    /**
+     * The appearance the badge should have.
+     *
+     * @tag fluent-badge
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: BadgeAppearance;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color: BadgeColor;
+    /**
+     * The shape the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: BadgeShape;
+    /**
+     * The size the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: BadgeSize;
+}
+/**
+ * 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 Badge extends StartEnd {
+}

package/dist/esm/badge/badge.js

@@ -1,11 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
-// TODO: Remove with https://github.com/microsoft/fast/pull/6797
 import { applyMixins } from '../utils/apply-mixins.js';
 import { StartEnd } from '../patterns/index.js';
 import { BadgeAppearance, BadgeColor } from './badge.options.js';
@@ -19,6 +13,8 @@ export class Badge extends FASTElement {
         /**
          * The appearance the badge should have.
          *
+         * @tag fluent-badge
+         *
          * @public
          * @remarks
          * HTML Attribute: appearance

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;;;WAMG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAoB9C,CAAC;CAAA;AA9BC;IADC,IAAI;yCACuD;AAU5D;IADC,IAAI;oCACuC;AAS5C;IADC,IAAI;oCACqB;AAU1B;IADC,IAAI;mCACmB;AAW1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;;;;;WAQG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IAqB9C,CAAC;CAAA;AA/BQ;IADN,IAAI;yCACuD;AAUrD;IADN,IAAI;oCACuC;AAUrC;IADN,IAAI;oCACqB;AAUnB;IADN,IAAI;mCACmB;AAW1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -0,0 +1,74 @@
+import type { StartEndOptions } from '../patterns/index.js';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
+import type { Badge } from './badge.js';
+/**
+ * @internal - marking as internal update when Badge PR for start/end is in
+ */
+export type BadgeOptions = StartEndOptions<Badge> & {
+    defaultContent?: StaticallyComposableHTML;
+};
+/**
+ * BadgeAppearance constants
+ * @public
+ */
+export declare const BadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+    readonly outline: "outline";
+    readonly tint: "tint";
+};
+/**
+ * A Badge can be filled, outline, ghost, inverted
+ * @public
+ */
+export type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
+/**
+ * BadgeColor constants
+ * @public
+ */
+export declare const BadgeColor: {
+    readonly brand: "brand";
+    readonly danger: "danger";
+    readonly important: "important";
+    readonly informative: "informative";
+    readonly severe: "severe";
+    readonly subtle: "subtle";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export type BadgeColor = ValuesOf<typeof BadgeColor>;
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export type BadgeShape = ValuesOf<typeof BadgeShape>;
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * A Badge can be on of several preset sizes.
+ * @public
+ */
+export type BadgeSize = ValuesOf<typeof BadgeSize>;

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

@@ -1,4 +1,5 @@
 import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
 // why is the border not showing up?
@@ -14,17 +15,21 @@ export const styles = css `
     border-radius: ${borderRadiusMedium};
   }
 
-  :host([shape='rounded'][size='tiny']),
-  :host([shape='rounded'][size='extra-small']),
-  :host([shape='rounded'][size='small']) {
+  :host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
     border-radius: ${borderRadiusSmall};
   }
 
-  ${badgeSizeStyles}
-  ${badgeFilledStyles}
-  ${badgeGhostStyles}
-  ${badgeOutlineStyles}
   ${badgeTintStyles}
+  ${badgeOutlineStyles}
+  ${badgeGhostStyles}
+  ${badgeFilledStyles}
+  ${badgeSizeStyles}
   ${badgeBaseStyles}
-`;
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host,
+    :host([appearance='outline']),
+    :host([appearance='tint']) {
+      border-color: CanvasText;
+    }
+  `));
 //# sourceMappingURL=badge.styles.js.map