@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.71

package/dist/esm/avatar/avatar.styles.js

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
+import { anchorState, beigeState, blueState, brandState, brassState, brownState, cornflowerState, cranberryState, darkGreenState, darkRedState, forestState, goldState, grapeState, lavenderState, lightTealState, lilacState, magentaState, marigoldState, minkState, navyState, peachState, pinkState, platinumState, plumState, pumpkinState, purpleState, redState, royalBlueState, seafoamState, steelState, tealState, } from '../styles/states/index.js';
 import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusSmall, borderRadiusXLarge, colorBrandBackgroundStatic, colorNeutralBackground1, colorNeutralBackground6, colorNeutralForeground3, colorNeutralForegroundStaticInverted, colorPaletteAnchorBackground2, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeForeground2, colorPaletteBlueBackground2, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenForeground2, colorPaletteDarkRedBackground2, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeForeground2, colorPaletteLavenderBackground2, colorPaletteLavenderForeground2, colorPaletteLightTealBackground2, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground2, colorPaletteMarigoldForeground2, colorPaletteMinkBackground2, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleForeground2, colorPaletteRedBackground2, colorPaletteRedForeground2, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealForeground2, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, durationFaster, durationSlower, durationUltraSlow, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, fontWeightSemibold, shadow16, shadow28, shadow4, shadow8, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, } from '../theme/design-tokens.js';
 const animations = {
     fastOutSlowInMax: curveDecelerateMax,
@@ -23,12 +24,12 @@ export const styles = css `
     flex-shrink: 0;
     width: 32px;
     height: 32px;
-    font-family: var(${fontFamilyBase});
-    font-weight: var(${fontWeightSemibold});
-    font-size: var(${fontSizeBase300});
-    border-radius: var(${borderRadiusCircular});
-    color: var(${colorNeutralForeground3});
-    background-color: var(${colorNeutralBackground6});
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightSemibold};
+    font-size: ${fontSizeBase300};
+    border-radius: ${borderRadiusCircular};
+    color: ${colorNeutralForeground3};
+    background-color: ${colorNeutralBackground6};
     contain: layout style;
   }
 
@@ -43,14 +44,14 @@ export const styles = css `
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    border-radius: var(${borderRadiusCircular});
+    border-radius: ${borderRadiusCircular};
   }
 
   ::slotted([slot='badge']) {
     position: absolute;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 var(${strokeWidthThin}) var(${colorNeutralBackground1});
+    box-shadow: 0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1};
   }
 
   :host([size='64']) ::slotted([slot='badge']),
@@ -58,14 +59,14 @@ export const styles = css `
   :host([size='96']) ::slotted([slot='badge']),
   :host([size='120']) ::slotted([slot='badge']),
   :host([size='128']) ::slotted([slot='badge']) {
-    box-shadow: 0 0 0 var(${strokeWidthThick}) var(${colorNeutralBackground1});
+    box-shadow: 0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1};
   }
 
   :host([size='16']),
   :host([size='20']),
   :host([size='24']) {
-    font-size: var(${fontSizeBase100});
-    font-weight: var(${fontWeightRegular});
+    font-size: ${fontSizeBase100};
+    font-weight: ${fontWeightRegular};
   }
 
   :host([size='16']) {
@@ -102,7 +103,7 @@ export const styles = css `
   :host([size='28']) {
     width: 28px;
     height: 28px;
-    font-size: var(${fontSizeBase200});
+    font-size: ${fontSizeBase200};
   }
 
   :host([size='36']) {
@@ -117,7 +118,7 @@ export const styles = css `
 
   :host([size='48']),
   :host([size='56']) {
-    font-size: var(${fontSizeBase400});
+    font-size: ${fontSizeBase400};
   }
 
   :host([size='48']) {
@@ -147,7 +148,7 @@ export const styles = css `
   :host([size='64']),
   :host([size='72']),
   :host([size='96']) {
-    font-size: var(${fontSizeBase500});
+    font-size: ${fontSizeBase500};
   }
 
   :host([size='64']) .default-icon,
@@ -187,7 +188,7 @@ export const styles = css `
 
   :host([size='120']),
   :host([size='128']) {
-    font-size: var(${fontSizeBase600});
+    font-size: ${fontSizeBase600};
   }
 
   :host([size='120']) {
@@ -201,186 +202,186 @@ export const styles = css `
   }
 
   :host([shape='square']) {
-    border-radius: var(${borderRadiusMedium});
+    border-radius: ${borderRadiusMedium};
   }
 
   :host([shape='square'][size='20']),
   :host([shape='square'][size='24']) {
-    border-radius: var(${borderRadiusSmall});
+    border-radius: ${borderRadiusSmall};
   }
 
   :host([shape='square'][size='56']),
   :host([shape='square'][size='64']),
   :host([shape='square'][size='72']) {
-    border-radius: var(${borderRadiusLarge});
+    border-radius: ${borderRadiusLarge};
   }
   :host([shape='square'][size='96']),
   :host([shape='square'][size='120']),
   :host([shape='square'][size='128']) {
-    border-radius: var(${borderRadiusXLarge});
+    border-radius: ${borderRadiusXLarge};
   }
 
-  :host([data-color='brand']) {
-    color: var(${colorNeutralForegroundStaticInverted});
-    background-color: var(${colorBrandBackgroundStatic});
+  :host(${brandState}) {
+    color: ${colorNeutralForegroundStaticInverted};
+    background-color: ${colorBrandBackgroundStatic};
   }
 
-  :host([data-color='dark-red']) {
-    color: var(${colorPaletteDarkRedForeground2});
-    background-color: var(${colorPaletteDarkRedBackground2});
+  :host(${darkRedState}) {
+    color: ${colorPaletteDarkRedForeground2};
+    background-color: ${colorPaletteDarkRedBackground2};
   }
 
-  :host([data-color='cranberry']) {
-    color: var(${colorPaletteCranberryForeground2});
-    background-color: var(${colorPaletteCranberryBackground2});
+  :host(${cranberryState}) {
+    color: ${colorPaletteCranberryForeground2};
+    background-color: ${colorPaletteCranberryBackground2};
   }
 
-  :host([data-color='red']) {
-    color: var(${colorPaletteRedForeground2});
-    background-color: var(${colorPaletteRedBackground2});
+  :host(${redState}) {
+    color: ${colorPaletteRedForeground2};
+    background-color: ${colorPaletteRedBackground2};
   }
 
-  :host([data-color='pumpkin']) {
-    color: var(${colorPalettePumpkinForeground2});
-    background-color: var(${colorPalettePumpkinBackground2});
+  :host(${pumpkinState}) {
+    color: ${colorPalettePumpkinForeground2};
+    background-color: ${colorPalettePumpkinBackground2};
   }
 
-  :host([data-color='peach']) {
-    color: var(${colorPalettePeachForeground2});
-    background-color: var(${colorPalettePeachBackground2});
+  :host(${peachState}) {
+    color: ${colorPalettePeachForeground2};
+    background-color: ${colorPalettePeachBackground2};
   }
 
-  :host([data-color='marigold']) {
-    color: var(${colorPaletteMarigoldForeground2});
-    background-color: var(${colorPaletteMarigoldBackground2});
+  :host(${marigoldState}) {
+    color: ${colorPaletteMarigoldForeground2};
+    background-color: ${colorPaletteMarigoldBackground2};
   }
 
-  :host([data-color='gold']) {
-    color: var(${colorPaletteGoldForeground2});
-    background-color: var(${colorPaletteGoldBackground2});
+  :host(${goldState}) {
+    color: ${colorPaletteGoldForeground2};
+    background-color: ${colorPaletteGoldBackground2};
   }
 
-  :host([data-color='brass']) {
-    color: var(${colorPaletteBrassForeground2});
-    background-color: var(${colorPaletteBrassBackground2});
+  :host(${brassState}) {
+    color: ${colorPaletteBrassForeground2};
+    background-color: ${colorPaletteBrassBackground2};
   }
 
-  :host([data-color='brown']) {
-    color: var(${colorPaletteBrownForeground2});
-    background-color: var(${colorPaletteBrownBackground2});
+  :host(${brownState}) {
+    color: ${colorPaletteBrownForeground2};
+    background-color: ${colorPaletteBrownBackground2};
   }
 
-  :host([data-color='forest']) {
-    color: var(${colorPaletteForestForeground2});
-    background-color: var(${colorPaletteForestBackground2});
+  :host(${forestState}) {
+    color: ${colorPaletteForestForeground2};
+    background-color: ${colorPaletteForestBackground2};
   }
 
-  :host([data-color='seafoam']) {
-    color: var(${colorPaletteSeafoamForeground2});
-    background-color: var(${colorPaletteSeafoamBackground2});
+  :host(${seafoamState}) {
+    color: ${colorPaletteSeafoamForeground2};
+    background-color: ${colorPaletteSeafoamBackground2};
   }
 
-  :host([data-color='dark-green']) {
-    color: var(${colorPaletteDarkGreenForeground2});
-    background-color: var(${colorPaletteDarkGreenBackground2});
+  :host(${darkGreenState}) {
+    color: ${colorPaletteDarkGreenForeground2};
+    background-color: ${colorPaletteDarkGreenBackground2};
   }
 
-  :host([data-color='light-teal']) {
-    color: var(${colorPaletteLightTealForeground2});
-    background-color: var(${colorPaletteLightTealBackground2});
+  :host(${lightTealState}) {
+    color: ${colorPaletteLightTealForeground2};
+    background-color: ${colorPaletteLightTealBackground2};
   }
 
-  :host([data-color='teal']) {
-    color: var(${colorPaletteTealForeground2});
-    background-color: var(${colorPaletteTealBackground2});
+  :host(${tealState}) {
+    color: ${colorPaletteTealForeground2};
+    background-color: ${colorPaletteTealBackground2};
   }
 
-  :host([data-color='steel']) {
-    color: var(${colorPaletteSteelForeground2});
-    background-color: var(${colorPaletteSteelBackground2});
+  :host(${steelState}) {
+    color: ${colorPaletteSteelForeground2};
+    background-color: ${colorPaletteSteelBackground2};
   }
 
-  :host([data-color='blue']) {
-    color: var(${colorPaletteBlueForeground2});
-    background-color: var(${colorPaletteBlueBackground2});
+  :host(${blueState}) {
+    color: ${colorPaletteBlueForeground2};
+    background-color: ${colorPaletteBlueBackground2};
   }
 
-  :host([data-color='royal-blue']) {
-    color: var(${colorPaletteRoyalBlueForeground2});
-    background-color: var(${colorPaletteRoyalBlueBackground2});
+  :host(${royalBlueState}) {
+    color: ${colorPaletteRoyalBlueForeground2};
+    background-color: ${colorPaletteRoyalBlueBackground2};
   }
 
-  :host([data-color='cornflower']) {
-    color: var(${colorPaletteCornflowerForeground2});
-    background-color: var(${colorPaletteCornflowerBackground2});
+  :host(${cornflowerState}) {
+    color: ${colorPaletteCornflowerForeground2};
+    background-color: ${colorPaletteCornflowerBackground2};
   }
 
-  :host([data-color='navy']) {
-    color: var(${colorPaletteNavyForeground2});
-    background-color: var(${colorPaletteNavyBackground2});
+  :host(${navyState}) {
+    color: ${colorPaletteNavyForeground2};
+    background-color: ${colorPaletteNavyBackground2};
   }
 
-  :host([data-color='lavender']) {
-    color: var(${colorPaletteLavenderForeground2});
-    background-color: var(${colorPaletteLavenderBackground2});
+  :host(${lavenderState}) {
+    color: ${colorPaletteLavenderForeground2};
+    background-color: ${colorPaletteLavenderBackground2};
   }
 
-  :host([data-color='purple']) {
-    color: var(${colorPalettePurpleForeground2});
-    background-color: var(${colorPalettePurpleBackground2});
+  :host(${purpleState}) {
+    color: ${colorPalettePurpleForeground2};
+    background-color: ${colorPalettePurpleBackground2};
   }
 
-  :host([data-color='grape']) {
-    color: var(${colorPaletteGrapeForeground2});
-    background-color: var(${colorPaletteGrapeBackground2});
+  :host(${grapeState}) {
+    color: ${colorPaletteGrapeForeground2};
+    background-color: ${colorPaletteGrapeBackground2};
   }
 
-  :host([data-color='lilac']) {
-    color: var(${colorPaletteLilacForeground2});
-    background-color: var(${colorPaletteLilacBackground2});
+  :host(${lilacState}) {
+    color: ${colorPaletteLilacForeground2};
+    background-color: ${colorPaletteLilacBackground2};
   }
 
-  :host([data-color='pink']) {
-    color: var(${colorPalettePinkForeground2});
-    background-color: var(${colorPalettePinkBackground2});
+  :host(${pinkState}) {
+    color: ${colorPalettePinkForeground2};
+    background-color: ${colorPalettePinkBackground2};
   }
 
-  :host([data-color='magenta']) {
-    color: var(${colorPaletteMagentaForeground2});
-    background-color: var(${colorPaletteMagentaBackground2});
+  :host(${magentaState}) {
+    color: ${colorPaletteMagentaForeground2};
+    background-color: ${colorPaletteMagentaBackground2};
   }
 
-  :host([data-color='plum']) {
-    color: var(${colorPalettePlumForeground2});
-    background-color: var(${colorPalettePlumBackground2});
+  :host(${plumState}) {
+    color: ${colorPalettePlumForeground2};
+    background-color: ${colorPalettePlumBackground2};
   }
 
-  :host([data-color='beige']) {
-    color: var(${colorPaletteBeigeForeground2});
-    background-color: var(${colorPaletteBeigeBackground2});
+  :host(${beigeState}) {
+    color: ${colorPaletteBeigeForeground2};
+    background-color: ${colorPaletteBeigeBackground2};
   }
 
-  :host([data-color='mink']) {
-    color: var(${colorPaletteMinkForeground2});
-    background-color: var(${colorPaletteMinkBackground2});
+  :host(${minkState}) {
+    color: ${colorPaletteMinkForeground2};
+    background-color: ${colorPaletteMinkBackground2};
   }
 
-  :host([data-color='platinum']) {
-    color: var(${colorPalettePlatinumForeground2});
-    background-color: var(${colorPalettePlatinumBackground2});
+  :host(${platinumState}) {
+    color: ${colorPalettePlatinumForeground2};
+    background-color: ${colorPalettePlatinumBackground2};
   }
 
-  :host([data-color='anchor']) {
-    color: var(${colorPaletteAnchorForeground2});
-    background-color: var(${colorPaletteAnchorBackground2});
+  :host(${anchorState}) {
+    color: ${colorPaletteAnchorForeground2};
+    background-color: ${colorPaletteAnchorBackground2};
   }
 
   :host([active]) {
     /* Work-around for text pixel snapping at the end of the animation */
     transform: perspective(1px);
     transition-property: transform, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
-    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}, ${durationFaster};
+    transition-delay: ${animations.fastEase}, ${animations.nullEasing};
   }
 
   :host([active])::before {
@@ -392,13 +393,13 @@ export const styles = css `
     right: 0;
     border-radius: inherit;
     transition-property: margin, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
-    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}), ${durationSlower};
+    transition-delay: ${animations.fastEase}), ${animations.nullEasing});
   }
   :host([active])::before {
-    box-shadow: var(${shadow8});
+    box-shadow: ${shadow8};
     border-style: solid;
-    border-color: var(${colorBrandBackgroundStatic});
+    border-color: ${colorBrandBackgroundStatic};
   }
 
   :host([active][appearance='shadow'])::before {
@@ -407,40 +408,40 @@ export const styles = css `
   }
 
   :host([active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(${strokeWidthThick}));
-    border-width: var(${strokeWidthThick});
+    margin: calc(-2 * ${strokeWidthThick});
+    border-width: ${strokeWidthThick};
   }
 
   :host([size='56'][active]:not([appearance='shadow']))::before,
   :host([size='64'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(${strokeWidthThicker}));
-    border-width: var(${strokeWidthThicker});
+    margin: calc(-2 * ${strokeWidthThicker});
+    border-width: ${strokeWidthThicker};
   }
 
   :host([size='72'][active]:not([appearance='shadow']))::before,
   :host([size='96'][active]:not([appearance='shadow']))::before,
   :host([size='120'][active]:not([appearance='shadow']))::before,
   :host([size='128'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * var(${strokeWidthThickest}));
-    border-width: var(${strokeWidthThickest});
+    margin: calc(-2 * ${strokeWidthThickest});
+    border-width: ${strokeWidthThickest};
   }
 
   :host([size='20'][active][appearance])::before,
   :host([size='24'][active][appearance])::before,
   :host([size='28'][active][appearance])::before {
-    box-shadow: var(${shadow4});
+    box-shadow: ${shadow4};
   }
 
   :host([size='56'][active][appearance])::before,
   :host([size='64'][active][appearance])::before {
-    box-shadow: var(${shadow16});
+    box-shadow: ${shadow16};
   }
 
   :host([size='72'][active][appearance])::before,
   :host([size='96'][active][appearance])::before,
   :host([size='120'][active][appearance])::before,
   :host([size='128'][active][appearance])::before {
-    box-shadow: var(${shadow28});
+    box-shadow: ${shadow28};
   }
 
   :host([active][appearance='ring'])::before {
@@ -451,16 +452,16 @@ export const styles = css `
     opacity: 0.8;
     transform: scale(0.875);
     transition-property: transform, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
-    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}, ${durationFaster};
+    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
   }
 
   :host([active='inactive'])::before {
     margin: 0;
     opacity: 0;
     transition-property: margin, opacity;
-    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
-    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}, ${durationSlower};
+    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
   }
 
   @media screen and (prefers-reduced-motion: reduce) {

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

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

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,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,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.js

@@ -1,5 +1,5 @@
-export * from './avatar.js';
-export * from './avatar.options.js';
+export { BaseAvatar, Avatar } from './avatar.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,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,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.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.definition.js

@@ -3,9 +3,6 @@ import { Badge } from './badge.js';
 import { styles } from './badge.styles.js';
 import { template } from './badge.template.js';
 /**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
  *
  * @public
  * @remarks

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

@@ -1 +1 @@
-{"version":3,"file":"badge.definition.js","sourceRoot":"","sources":["../../../src/badge/badge.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"badge.definition.js","sourceRoot":"","sources":["../../../src/badge/badge.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}