@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/esm/avatar/avatar.styles.css

@@ -0,0 +1,480 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-grid;
+}
+:host {
+  position: relative;
+  place-items: center;
+  place-content: center;
+  grid-template: 1fr / 1fr;
+  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);
+  contain: layout style;
+}
+
+.monogram,
+.default-icon {
+  grid-area: 1 / 1 / -1 / -1;
+}
+
+.monogram:empty {
+  display: none;
+}
+
+.default-slot:is(.has-slotted, :has-slotted) ~ .default-icon,
+.default-slot:is(.has-slotted, :has-slotted) ~ .monogram,
+:host(:is([name]):not([name=''])) .default-icon,
+:host(:is([initials]):not([initials=''])) .default-icon {
+  display: none;
+}
+
+.default-icon,
+::slotted(svg) {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+::slotted(img) {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--borderRadiusCircular);
+}
+
+::slotted([slot='badge']) {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);
+}
+
+:host([size='64']) ::slotted([slot='badge']),
+:host([size='72']) ::slotted([slot='badge']),
+: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);
+}
+
+:host([size='16']),
+:host([size='20']),
+:host([size='24']) {
+  font-size: var(--fontSizeBase100);
+  font-weight: var(--fontWeightRegular);
+}
+
+:host([size='16']) {
+  width: 16px;
+  height: 16px;
+}
+
+:host([size='20']) {
+  width: 20px;
+  height: 20px;
+}
+
+:host([size='24']) {
+  width: 24px;
+  height: 24px;
+}
+
+:host([size='16']) .default-icon,
+:host([size='16']) ::slotted(svg) {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+
+:host([size='20']) .default-icon,
+:host([size='24']) .default-icon,
+:host([size='20']) ::slotted(svg),
+:host([size='24']) ::slotted(svg) {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+:host([size='28']) {
+  width: 28px;
+  height: 28px;
+  font-size: var(--fontSizeBase200);
+}
+
+:host([size='36']) {
+  width: 36px;
+  height: 36px;
+}
+
+:host([size='40']) {
+  width: 40px;
+  height: 40px;
+}
+
+:host([size='48']),
+:host([size='56']) {
+  font-size: var(--fontSizeBase400);
+}
+
+:host([size='48']) {
+  width: 48px;
+  height: 48px;
+}
+
+:host([size='48']) .default-icon,
+:host([size='48']) ::slotted(svg) {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+:host([size='56']) {
+  width: 56px;
+  height: 56px;
+}
+
+:host([size='56']) .default-icon,
+:host([size='56']) ::slotted(svg) {
+  width: 28px;
+  height: 28px;
+  font-size: 28px;
+}
+
+:host([size='64']),
+:host([size='72']),
+:host([size='96']) {
+  font-size: var(--fontSizeBase500);
+}
+
+:host([size='64']) .default-icon,
+:host([size='72']) .default-icon,
+:host([size='64']) ::slotted(svg),
+:host([size='72']) ::slotted(svg) {
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+}
+
+:host([size='64']) {
+  width: 64px;
+  height: 64px;
+}
+
+:host([size='72']) {
+  width: 72px;
+  height: 72px;
+}
+
+:host([size='96']) {
+  width: 96px;
+  height: 96px;
+}
+
+:host([size='96']) .default-icon,
+:host([size='120']) .default-icon,
+:host([size='128']) .default-icon,
+:host([size='96']) ::slotted(svg),
+:host([size='120']) ::slotted(svg),
+:host([size='128']) ::slotted(svg) {
+  width: 48px;
+  height: 48px;
+  font-size: 48px;
+}
+
+:host([size='120']),
+:host([size='128']) {
+  font-size: var(--fontSizeBase600);
+}
+
+:host([size='120']) {
+  width: 120px;
+  height: 120px;
+}
+
+:host([size='128']) {
+  width: 128px;
+  height: 128px;
+}
+
+:host([shape='square']) {
+  border-radius: var(--borderRadiusMedium);
+}
+
+:host([shape='square'][size='20']),
+:host([shape='square'][size='24']) {
+  border-radius: var(--borderRadiusSmall);
+}
+
+:host([shape='square'][size='56']),
+:host([shape='square'][size='64']),
+:host([shape='square'][size='72']) {
+  border-radius: var(--borderRadiusLarge);
+}
+:host([shape='square'][size='96']),
+:host([shape='square'][size='120']),
+:host([shape='square'][size='128']) {
+  border-radius: var(--borderRadiusXLarge);
+}
+
+:host([data-color='brand']) {
+  color: var(--colorNeutralForegroundStaticInverted);
+  background-color: var(--colorBrandBackgroundStatic);
+}
+
+:host([data-color='dark-red']) {
+  color: var(--colorPaletteDarkRedForeground2);
+  background-color: var(--colorPaletteDarkRedBackground2);
+}
+
+:host([data-color='cranberry']) {
+  color: var(--colorPaletteCranberryForeground2);
+  background-color: var(--colorPaletteCranberryBackground2);
+}
+
+:host([data-color='red']) {
+  color: var(--colorPaletteRedForeground2);
+  background-color: var(--colorPaletteRedBackground2);
+}
+
+:host([data-color='pumpkin']) {
+  color: var(--colorPalettePumpkinForeground2);
+  background-color: var(--colorPalettePumpkinBackground2);
+}
+
+:host([data-color='peach']) {
+  color: var(--colorPalettePeachForeground2);
+  background-color: var(--colorPalettePeachBackground2);
+}
+
+:host([data-color='marigold']) {
+  color: var(--colorPaletteMarigoldForeground2);
+  background-color: var(--colorPaletteMarigoldBackground2);
+}
+
+:host([data-color='gold']) {
+  color: var(--colorPaletteGoldForeground2);
+  background-color: var(--colorPaletteGoldBackground2);
+}
+
+:host([data-color='brass']) {
+  color: var(--colorPaletteBrassForeground2);
+  background-color: var(--colorPaletteBrassBackground2);
+}
+
+:host([data-color='brown']) {
+  color: var(--colorPaletteBrownForeground2);
+  background-color: var(--colorPaletteBrownBackground2);
+}
+
+:host([data-color='forest']) {
+  color: var(--colorPaletteForestForeground2);
+  background-color: var(--colorPaletteForestBackground2);
+}
+
+:host([data-color='seafoam']) {
+  color: var(--colorPaletteSeafoamForeground2);
+  background-color: var(--colorPaletteSeafoamBackground2);
+}
+
+:host([data-color='dark-green']) {
+  color: var(--colorPaletteDarkGreenForeground2);
+  background-color: var(--colorPaletteDarkGreenBackground2);
+}
+
+:host([data-color='light-teal']) {
+  color: var(--colorPaletteLightTealForeground2);
+  background-color: var(--colorPaletteLightTealBackground2);
+}
+
+:host([data-color='teal']) {
+  color: var(--colorPaletteTealForeground2);
+  background-color: var(--colorPaletteTealBackground2);
+}
+
+:host([data-color='steel']) {
+  color: var(--colorPaletteSteelForeground2);
+  background-color: var(--colorPaletteSteelBackground2);
+}
+
+:host([data-color='blue']) {
+  color: var(--colorPaletteBlueForeground2);
+  background-color: var(--colorPaletteBlueBackground2);
+}
+
+:host([data-color='royal-blue']) {
+  color: var(--colorPaletteRoyalBlueForeground2);
+  background-color: var(--colorPaletteRoyalBlueBackground2);
+}
+
+:host([data-color='cornflower']) {
+  color: var(--colorPaletteCornflowerForeground2);
+  background-color: var(--colorPaletteCornflowerBackground2);
+}
+
+:host([data-color='navy']) {
+  color: var(--colorPaletteNavyForeground2);
+  background-color: var(--colorPaletteNavyBackground2);
+}
+
+:host([data-color='lavender']) {
+  color: var(--colorPaletteLavenderForeground2);
+  background-color: var(--colorPaletteLavenderBackground2);
+}
+
+:host([data-color='purple']) {
+  color: var(--colorPalettePurpleForeground2);
+  background-color: var(--colorPalettePurpleBackground2);
+}
+
+:host([data-color='grape']) {
+  color: var(--colorPaletteGrapeForeground2);
+  background-color: var(--colorPaletteGrapeBackground2);
+}
+
+:host([data-color='lilac']) {
+  color: var(--colorPaletteLilacForeground2);
+  background-color: var(--colorPaletteLilacBackground2);
+}
+
+:host([data-color='pink']) {
+  color: var(--colorPalettePinkForeground2);
+  background-color: var(--colorPalettePinkBackground2);
+}
+
+:host([data-color='magenta']) {
+  color: var(--colorPaletteMagentaForeground2);
+  background-color: var(--colorPaletteMagentaBackground2);
+}
+
+:host([data-color='plum']) {
+  color: var(--colorPalettePlumForeground2);
+  background-color: var(--colorPalettePlumBackground2);
+}
+
+:host([data-color='beige']) {
+  color: var(--colorPaletteBeigeForeground2);
+  background-color: var(--colorPaletteBeigeBackground2);
+}
+
+:host([data-color='mink']) {
+  color: var(--colorPaletteMinkForeground2);
+  background-color: var(--colorPaletteMinkBackground2);
+}
+
+:host([data-color='platinum']) {
+  color: var(--colorPalettePlatinumForeground2);
+  background-color: var(--colorPalettePlatinumBackground2);
+}
+
+:host([data-color='anchor']) {
+  color: var(--colorPaletteAnchorForeground2);
+  background-color: var(--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(--curveEasyEaseMax), var(--curveLinear);
+}
+
+:host([active])::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: inherit;
+  transition-property: margin, opacity;
+  transition-duration: var(--durationUltraSlow), var(--durationSlower);
+  transition-delay: var(--curveEasyEaseMax), var(--curveLinear);
+}
+:host([active])::before {
+  box-shadow: var(--shadow8);
+  border-style: solid;
+  border-color: var(--colorBrandBackgroundStatic);
+}
+
+:host([active][appearance='shadow'])::before {
+  border-style: none;
+  border-color: none;
+}
+
+:host([active]:not([appearance='shadow']))::before {
+  margin: calc(-2 * var(--strokeWidthThick));
+  border-width: var(--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);
+}
+
+: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);
+}
+
+:host([size='20'][active][appearance])::before,
+:host([size='24'][active][appearance])::before,
+:host([size='28'][active][appearance])::before {
+  box-shadow: var(--shadow4);
+}
+
+:host([size='56'][active][appearance])::before,
+:host([size='64'][active][appearance])::before {
+  box-shadow: var(--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);
+}
+
+:host([active][appearance='ring'])::before {
+  box-shadow: none;
+}
+
+:host([active='inactive']) {
+  opacity: 0.8;
+  transform: scale(0.875);
+  transition-property: transform, opacity;
+  transition-duration: var(--durationUltraSlow), var(--durationFaster);
+  transition-delay: var(--curveDecelerateMin), var(--curveLinear);
+}
+
+:host([active='inactive'])::before {
+  margin: 0;
+  opacity: 0;
+  transition-property: margin, opacity;
+  transition-duration: var(--durationUltraSlow), var(--durationSlower);
+  transition-delay: var(--curveDecelerateMin), var(--curveLinear);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host([active]) {
+    transition-duration: 0.01ms;
+  }
+
+  :host([active])::before {
+    transition-duration: 0.01ms;
+    transition-delay: 0.01ms;
+  }
+}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
+import { display } from '../utils/display.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,
@@ -16,10 +16,11 @@ const animations = {
  * @public
  */
 export const styles = css `
-  ${display('inline-flex')} :host {
+  ${display('inline-grid')} :host {
     position: relative;
-    align-items: center;
-    justify-content: center;
+    place-items: center;
+    place-content: center;
+    grid-template: 1fr / 1fr;
     flex-shrink: 0;
     width: 32px;
     height: 32px;
@@ -32,6 +33,22 @@ export const styles = css `
     contain: layout style;
   }
 
+  .monogram,
+  .default-icon {
+    grid-area: 1 / 1 / -1 / -1;
+  }
+
+  .monogram:empty {
+    display: none;
+  }
+
+  .default-slot:is(.has-slotted, :has-slotted) ~ .default-icon,
+  .default-slot:is(.has-slotted, :has-slotted) ~ .monogram,
+  :host(:is([name]):not([name=''])) .default-icon,
+  :host(:is([initials]):not([initials=''])) .default-icon {
+    display: none;
+  }
+
   .default-icon,
   ::slotted(svg) {
     width: 20px;
@@ -50,7 +67,7 @@ export const styles = css `
     position: absolute;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1};
+    box-shadow: 0 0 0 ${strokeWidthThin} ${colorNeutralBackground1};
   }
 
   :host([size='64']) ::slotted([slot='badge']),
@@ -58,7 +75,7 @@ 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 ${strokeWidthThick}) ${colorNeutralBackground1};
+    box-shadow: 0 0 0 ${strokeWidthThick} ${colorNeutralBackground1};
   }
 
   :host([size='16']),
@@ -392,8 +409,8 @@ export const styles = css `
     right: 0;
     border-radius: inherit;
     transition-property: margin, opacity;
-    transition-duration: ${durationUltraSlow}), ${durationSlower};
-    transition-delay: ${animations.fastEase}), ${animations.nullEasing});
+    transition-duration: ${durationUltraSlow}, ${durationSlower};
+    transition-delay: ${animations.fastEase}, ${animations.nullEasing};
   }
   :host([active])::before {
     box-shadow: ${shadow8};

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.html

@@ -0,0 +1,13 @@
+<f-template name="fluent-avatar" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot class="default-slot" f-slotted="{slottedDefaults}" f-ref="{defaultSlot}"></slot>
+    <span class="monogram" f-ref="{monogram}">{{initials}}</span>
+    <svg width="1em" height="1em" viewBox="0 0 20 20" class="default-icon" fill="currentcolor" aria-hidden="true">
+      <path
+        d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"
+      ></path>
+    </svg>
+    <slot name="badge"></slot>
+  </template>
+</f-template>

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

@@ -1,9 +1,8 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, slotted } from '@microsoft/fast-element';
 const defaultIconTemplate = html `<svg
   width="1em"
   height="1em"
   viewBox="0 0 20 20"
-  xmlns="http://www.w3.org/2000/svg"
   class="default-icon"
   fill="currentcolor"
   aria-hidden="true"
@@ -18,7 +17,9 @@ const defaultIconTemplate = html `<svg
  */
 export function avatarTemplate() {
     return html `
-    <slot ${ref('defaultSlot')}>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
+    <slot class="default-slot" ${slotted('slottedDefaults')} ${ref('defaultSlot')}></slot>
+    <span class="monogram" ${ref('monogram')}>${x => x.initials}</span>
+    ${defaultIconTemplate}
     <slot name="badge"></slot>
   `;
 }

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,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;;OAYzB,CAAC;AAER;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;YACJ,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC;;GAEvG,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,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvF,MAAM,mBAAmB,GAAG,IAAI,CAAA;;;;;;;;;;;OAWzB,CAAC;AAER;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;iCACiB,OAAO,CAAC,iBAAiB,CAAC,IAAI,GAAG,CAAC,aAAa,CAAC;6BACpD,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;MACzD,mBAAmB;;GAEtB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}

package/dist/esm/avatar/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/avatar/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './avatar.definition-async.js';
+import { Avatar } from './avatar.js';
+RenderableFASTElement(Avatar).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/avatar/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/avatar/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBAAqB,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/avatar/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './avatar.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { Avatar } from './avatar.js';
+Avatar.define(definition);
 //# sourceMappingURL=define.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/avatar/define.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"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/avatar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

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

@@ -4,3 +4,4 @@ export { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarSh
 export { template as AvatarTemplate } from './avatar.template.js';
 export { styles as AvatarStyles } from './avatar.styles.js';
 export { definition as AvatarDefinition } from './avatar.definition.js';
+export { tagName as AvatarTagName } from './avatar.options.js';

package/dist/esm/avatar/index.js

@@ -4,4 +4,5 @@ export { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarSh
 export { template as AvatarTemplate } from './avatar.template.js';
 export { styles as AvatarStyles } from './avatar.styles.js';
 export { definition as AvatarDefinition } from './avatar.definition.js';
+export { tagName as AvatarTagName } from './avatar.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

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

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

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

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './badge.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const badge = document.createElement('fluent-badge');
     badge.appendChild(document.createTextNode('Badge'));

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

@@ -1 +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"}
+{"version":3,"file":"badge.bench.js","sourceRoot":"","sources":["../../../src/badge/badge.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,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"}