@fluentui/web-components 3.0.0-beta.8 → 3.0.0-beta.80

package/dist/esm/compound-button/compound-button.template.js

@@ -1,4 +1,4 @@
-import { html, ref, slotted } from '@microsoft/fast-element';
+import { html, slotted } from '@microsoft/fast-element';
 import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
 /**
  * The template for the Compound Button component.
@@ -6,50 +6,14 @@ import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
  */
 export function buttonTemplate(options = {}) {
     return html `
-    <button
-      class="control"
-      part="control"
-      ?autofocus="${x => x.autofocus}"
-      ?disabled="${x => x.disabled}"
-      form="${x => x.formId}"
-      formaction="${x => x.formaction}"
-      formenctype="${x => x.formenctype}"
-      formmethod="${x => x.formmethod}"
-      ?formnovalidate="${x => x.formnovalidate}"
-      formtarget="${x => x.formtarget}"
-      name="${x => x.name}"
-      type="${x => x.type}"
-      value="${x => x.value}"
-      aria-atomic="${x => x.ariaAtomic}"
-      aria-busy="${x => x.ariaBusy}"
-      aria-controls="${x => x.ariaControls}"
-      aria-current="${x => x.ariaCurrent}"
-      aria-describedby="${x => x.ariaDescribedby}"
-      aria-details="${x => x.ariaDetails}"
-      aria-disabled="${x => x.ariaDisabled}"
-      aria-errormessage="${x => x.ariaErrormessage}"
-      aria-expanded="${x => x.ariaExpanded}"
-      aria-flowto="${x => x.ariaFlowto}"
-      aria-haspopup="${x => x.ariaHaspopup}"
-      aria-hidden="${x => x.ariaHidden}"
-      aria-invalid="${x => x.ariaInvalid}"
-      aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-      aria-label="${x => x.ariaLabel}"
-      aria-labelledby="${x => x.ariaLabelledby}"
-      aria-live="${x => x.ariaLive}"
-      aria-owns="${x => x.ariaOwns}"
-      aria-pressed="${x => x.ariaPressed}"
-      aria-relevant="${x => x.ariaRelevant}"
-      aria-roledescription="${x => x.ariaRoledescription}"
-      ${ref('control')}
-    >
+    <template ?disabled="${x => x.disabled}" tabindex="${x => (x.disabled ? null : x.tabIndex ?? 0)}">
       ${startSlotTemplate(options)}
       <span class="content" part="content">
         <slot ${slotted('defaultSlottedContent')}></slot>
         <slot name="description"></slot>
       </span>
       ${endSlotTemplate(options)}
-    </button>
+    </template>
   `;
 }
 /**

package/dist/esm/compound-button/compound-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI1E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;;;;oBAII,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;mBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;cACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;qBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;yBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;oBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;cACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;eACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;qBACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;mBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;sBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;0BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;sBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;uBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;2BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;uBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;sBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;2BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;oBAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;uBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;8BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;QAChD,GAAG,CAAC,SAAS,CAAC;;QAEd,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI1E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;2BACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC;QAC3F,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}

package/dist/esm/compound-button/index.js

@@ -1,5 +1,5 @@
-export * from './compound-button.js';
-export * from './compound-button.options.js';
+export { CompoundButton } from './compound-button.js';
+export { CompoundButtonAppearance, CompoundButtonShape, CompoundButtonSize } from './compound-button.options.js';
 export { template as CompoundButtonTemplate } from './compound-button.template.js';
 export { styles as CompoundButtonStyles } from './compound-button.styles.js';
 export { definition as CompoundButtonDefinition } from './compound-button.definition.js';

package/dist/esm/compound-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/compound-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/compound-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AACjH,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-badge.bench.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACpE,YAAY,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACxC,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

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

@@ -1,13 +1,9 @@
-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, nullableNumberConverter } 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 { swapStates, toggleState } from '../utils/element-internals.js';
+import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
@@ -15,6 +11,12 @@ import { StartEnd } from '../patterns/index.js';
 export class CounterBadge 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 the badge should have.
          *
@@ -48,12 +50,52 @@ export class CounterBadge extends FASTElement {
          */
         this.dot = false;
     }
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev, next) {
+        swapStates(this.elementInternals, prev, next, CounterBadgeAppearance);
+    }
+    /**
+     * Handles changes to color attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    colorChanged(prev, next) {
+        swapStates(this.elementInternals, prev, next, CounterBadgeColor);
+    }
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev, next) {
+        swapStates(this.elementInternals, prev, next, CounterBadgeShape);
+    }
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev, next) {
+        swapStates(this.elementInternals, prev, next, CounterBadgeSize);
+    }
     countChanged() {
         this.setCount();
     }
     overflowCountChanged() {
         this.setCount();
     }
+    /**
+     * Handles changes to dot attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    dotChanged(prev, next) {
+        toggleState(this.elementInternals, 'dot', !!next);
+    }
     /**
      * @internal
      * Function to set the count
@@ -61,8 +103,7 @@ export class CounterBadge extends FASTElement {
      * If children are slotted, that will override the value returned
      */
     setCount() {
-        var _a;
-        const count = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        const count = this.count ?? 0;
         if ((count !== 0 || this.showZero) && !this.dot) {
             return count > this.overflowCount ? `${this.overflowCount}+` : `${count}`;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAwCE;;;;;;WAMG;QAEI,UAAK,GAAW,CAAC,CAAC;QAKzB;;;;;;WAMG;QAEI,kBAAa,GAAW,EAAE,CAAC;QAKlC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,QAAG,GAAY,KAAK,CAAC;IAiB9B,CAAC;IApDW,YAAY;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAWS,oBAAoB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAsBD;;;;;OAKG;IACI,QAAQ;;QACb,MAAM,KAAK,GAAkB,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAC/C,OAAO,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC;SAC3E;QAED,OAAO;IACT,CAAC;CACF;AA5FC;IADC,IAAI;gDACsC;AAU3C;IADC,IAAI;2CAC4B;AASjC;IADC,IAAI;2CAC4B;AAUjC;IADC,IAAI;0CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CACpB;AAazB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDACxC;AAalC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACE;AA2B9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":"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"}

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

@@ -1,18 +1,19 @@
 import { css } from '@microsoft/fast-element';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
+import { dotState, extraSmallState, roundedState, smallState, tinyState } from '../styles/states/index.js';
 /** Badge styles
  * @public
  */
 export const styles = css `
-  :host([shape='rounded']) {
-    border-radius: var(${borderRadiusMedium});
+  :host(${roundedState}) {
+    border-radius: ${borderRadiusMedium};
   }
 
-  :host([shape='rounded'][size='tiny']),
-  :host([shape='rounded'][size='extra-small']),
-  :host([shape='rounded'][size='small']) {
-    border-radius: var(${borderRadiusSmall});
+  :host(${roundedState}${tinyState}),
+  :host(${roundedState}${extraSmallState}),
+  :host(${roundedState}${smallState}) {
+    border-radius: ${borderRadiusSmall};
   }
 
   ${badgeSizeStyles}
@@ -20,8 +21,8 @@ export const styles = css `
   ${badgeGhostStyles}
   ${badgeBaseStyles}
 
-  :host([dot]),
-  :host([dot][appearance][size]) {
+  :host(${dotState}),
+  :host(${dotState}[appearance][size]) {
     min-width: auto;
     width: 6px;
     height: 6px;

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

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;yBAEA,kBAAkB;;;;;;yBAMlB,iBAAiB;;;IAGtC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;;CASlB,CAAC"}
+{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;UACf,YAAY;qBACD,kBAAkB;;;UAG7B,YAAY,GAAG,SAAS;UACxB,YAAY,GAAG,eAAe;UAC9B,YAAY,GAAG,UAAU;qBACd,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;UAET,QAAQ;UACR,QAAQ;;;;;;CAMjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.template.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK3D,SAAS,eAAe,CAAiC,UAA+B,EAAE;IACxF,OAAO,aAAa,CAAI;QACtB,cAAc,EAAE,IAAI,CAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE;KAC9C,CAAC,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,eAAe,EAAwB,CAAC"}
+{"version":3,"file":"counter-badge.template.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK3D,SAAS,eAAe,CAAiC,UAA+B,EAAE;IACxF,OAAO,aAAa,CAAI;QACtB,cAAc,EAAE,IAAI,CAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE;KAC9C,CAAC,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,eAAe,EAAwB,CAAC"}

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

@@ -1,5 +1,5 @@
-export * from './counter-badge.js';
-export * from './counter-badge.options.js';
+export { CounterBadge } from './counter-badge.js';
+export { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
 export { template as CounterBadgeTemplate } from './counter-badge.template.js';
 export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
 export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/counter-badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/counter-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/dialog/dialog.bench.js

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

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

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